Drawing method, device and electronic equipment of control

Abstract

The application provides a drawing method and device of a control and electronic equipment, a scene picture of a game scene is drawn on a first layer of a graphical user interface; a target map is acquired, a control element of a preset control is drawn in the target map; the control element is processed based on preset control parameters, and a target control element is obtained; wherein the control parameters are used to provide a specified display effect of the preset control; the target control element is drawn to a second layer of the graphical user interface, and a drawing result of the preset control is obtained. In this way, before the step of drawing the control element on the graphical user interface, the control element is drawn and processed on the acquired target map, the post-processing of the UI layer of the graphical user interface is realized, no additional art resources are generated, resource redundancy is avoided, the drawing method of the control is simple, and the drawing method can be used for real-time operation in the game running.

Description

Technical Field

[0001] This invention relates to the field of rendering technology, and in particular to a method, apparatus and electronic device for drawing controls. Background Technology

[0002] Post-processing is a common technique in game development, and its proper use can enhance the visual presentation of a game. Post-processing is the final stage of the rendering pipeline, primarily involving the processing of images generated for the entire scene. In game development, developers typically only perform post-processing on the game scene itself, without affecting controls in the graphical user interface (GUI). Related techniques usually involve pre-processing control image resources using graphics processing software or modifying the drawing logic of each control through the game engine, thereby affecting the controls in the GUI. However, the methods of pre-processing control image resources using graphics processing software generate additional art assets, increasing redundancy. The method of modifying the drawing logic of each control through the game engine increases the complexity of the shader program that draws the controls and cannot perform real-time calculations, only processing screenshots. Summary of the Invention

[0003] In view of this, the purpose of the present invention is to provide a method, apparatus and electronic device for drawing controls, which draws and processes controls on a temporary texture before the step of drawing controls on the graphical user interface, so as to realize the screen post-processing of controls, without generating additional art resources, and the method of drawing controls is simple and can be calculated in real time during game operation.

[0004] In a first aspect, embodiments of the present invention provide a method for drawing controls, which provides a graphical user interface through a terminal device. The method includes: drawing a scene of a game scene on a first layer of the graphical user interface; obtaining a target texture and drawing control elements of a preset control on the target texture; processing the control elements based on preset control parameters to obtain a target control element; wherein the control parameters are used to: provide a specified display effect for the preset control; and drawing the target control element onto a second layer of the graphical user interface to obtain the drawing result of the preset control.

[0005] Secondly, embodiments of the present invention provide a control drawing apparatus that provides a graphical user interface through a terminal device. The apparatus includes: a first layer drawing module for drawing a scene of a game scene on a first layer of the graphical user interface; a target texture drawing module for acquiring a target texture and drawing control elements of a preset control on the target texture; a control element processing module for processing the control elements based on preset control parameters to obtain target control elements; wherein the control parameters are used to provide a specified display effect for the preset control; and a second layer drawing module for drawing the target control elements onto a second layer of the graphical user interface to obtain the drawing result of the preset control.

[0006] Thirdly, embodiments of the present invention provide an electronic device, including a processor and a memory, wherein the memory stores computer-executable instructions that can be executed by the processor, and the processor executes the computer-executable instructions to implement the control drawing method of any of the first aspects.

[0007] Fourthly, embodiments of the present invention provide a computer-readable storage medium storing computer-executable instructions. When the computer-executable instructions are invoked and executed by a processor, the computer-executable instructions cause the processor to implement the control drawing method of any one of the first aspects.

[0008] The embodiments of the present invention bring the following beneficial effects:

[0009] This invention provides a method, apparatus, and electronic device for drawing controls. The method involves drawing a game scene on a first layer of a graphical user interface (GUI); acquiring a target texture and drawing control elements of a preset control on the target texture; processing the control elements based on preset control parameters to obtain target control elements; wherein the control parameters are used to provide a specified display effect for the preset control; and drawing the target control elements onto a second layer of the GUI to obtain the drawing result of the preset control. In this method, before drawing control elements on the GUI, drawing and processing the control elements on the acquired target texture achieves post-processing of the UI layer of the GUI, avoiding the generation of additional art resources and resource redundancy. The method of drawing controls is simple, and this drawing method can be performed in real-time during game execution.

[0010] Other features and advantages of the invention will be set forth in the description which follows, and will be apparent in part from the description, or may be learned by practicing the invention. The objects and other advantages of the invention are realized and obtained in accordance with the structures particularly pointed out in the description, claims and drawings.

[0011] To make the above-mentioned objects, features and advantages of the present invention more apparent and understandable, preferred embodiments are described below in detail with reference to the accompanying drawings. Attached Figure Description

[0012] To more clearly illustrate the specific embodiments of the present invention or the technical solutions in the prior art, the drawings used in the description of the specific embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are some embodiments of the present invention. For those skilled in the art, other drawings can be obtained from these drawings without creative effort.

[0013] Figure 1 A flowchart illustrating a method for drawing a control according to an embodiment of the present invention;

[0014] Figure 2 A flowchart illustrating a method for drawing a control according to an embodiment of the present invention;

[0015] Figure 3 This is a schematic diagram of the structure of a control drawing device provided in an embodiment of the present invention;

[0016] Figure 4 This is a schematic diagram of the structure of an electronic device provided in an embodiment of the present invention. Detailed Implementation

[0017] To make the objectives, technical solutions, and advantages of the embodiments of the present invention clearer, the technical solutions of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present invention, not all embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of the present invention.

[0018] Post-processing is a very common technique in game development. When used appropriately, it can greatly enhance the visual presentation of a game. Simply put, post-processing is the final stage of the rendering pipeline, where the image generated from the entire scene is processed, such as applying HDR (High Dynamic Range Imaging) or motion blur effects. Through post-processing, the overall style or effect of a game can be completely altered.

[0019] In typical game development, developers only apply screen post-processing to game scenes, such as lens flare and tone mapping. These effects only apply to physical elements within the game environment. For example, depth-of-field effects only affect characters and the environment within the scene and do not impact UI controls. However, some games require UI controls to be affected by general post-processing effects to improve the game's visual presentation.

[0020] In related technologies, image resources for controls are typically pre-processed and post-processed using graphics processing software, or the drawing logic of each control is altered through a game engine, thereby affecting the controls in the graphical user interface. However, the aforementioned methods of pre-processing and post-processing image resources for controls using graphics processing software generate additional art resources, increasing redundancy. The method of altering the drawing logic of each control through a game engine increases the complexity of the shader program for drawing controls and cannot perform real-time calculations, only processing screenshots. Based on this, embodiments of the present invention provide a method, apparatus, and electronic device for drawing controls, which can be applied to terminal devices such as mobile phones, computers, and laptops.

[0021] To facilitate understanding of this embodiment, a method for drawing a control disclosed in this invention will first be described in detail, providing a graphical user interface through a terminal device. For example... Figure 1 As shown, the method includes the following steps:

[0022] Step S102: Draw the scene of the game scene on the first layer of the graphical user interface;

[0023] The first layer mentioned above typically refers to the scene layer, used to display the scene images captured by the camera corresponding to the game scene. These scene images usually include virtual characters, virtual buildings, and virtual scenery. In actual implementation, the game scene images are typically drawn on the first layer of the graphical user interface using the game engine's default rendering pipeline.

[0024] Step S104: Obtain the target texture and draw the control elements of the preset control in the target texture;

[0025] The aforementioned target texture can serve as a "canvas" for drawing control elements, and this target texture is the same size as the graphical user interface. The control elements of the aforementioned preset controls are generally images of the preset controls. These control elements are used to respond to trigger operations on the control elements when they are displayed in the graphical user interface, executing the preset functions of those control elements.

[0026] Normally, after the default rendering pipeline completes the rendering of the game scene on the first layer of the graphical user interface (GUI), it can choose to perform screen post-processing on the first layer (i.e., image processing on the scene displayed on the first layer) and then draw control elements on the second layer of the GUI, or it can directly draw control elements on the second layer of the GUI. However, in this embodiment, after completing the rendering of the game scene on the first layer of the GUI, or after performing screen post-processing on the first layer, the control elements are not drawn on the second layer of the GUI. Instead, the control elements are drawn on a preset target texture. This facilitates image processing of the control elements, giving them various display effects.

[0027] Step S106: Based on preset control parameters, process the control element to obtain the target control element; wherein, the control parameters are used to: provide the specified display effect of the preset control;

[0028] The aforementioned control parameters are all pre-configured in the rendering pipeline code. These control parameters typically include one or more of the following: parameters providing chromatic aberration effects, parameters providing radial blur effects, parameters providing masking effects, parameters providing fisheye effects, and parameters providing tonal effects. The specified display effects include one or more of the following: chromatic aberration effect (decomposing polychromatic light into monochromatic light), radial blur effect (blurring the surrounding scenery as one accelerates), masking effect (leaving some areas unprocessed), fisheye effect (lens distortion), and effects that increase or decrease tonal value.

[0029] In actual implementation, screen post-processing is performed on control elements using preset control parameters. For example, the color channels of control elements can be separated, control elements can be sampled, control elements can be masked, control elements can be offset in coordinates, and the hue or saturation of control elements can be increased or decreased.

[0030] Step S108: Draw the target control element onto the second layer of the graphical user interface to obtain the drawing result of the preset control.

[0031] The second layer mentioned above typically refers to the UI layer, which consists of elements in the game screen that assist the player in playing the game, such as health bars, victory prompts, and NPC dialogue boxes. Specifically, the target control element is directly copied to the corresponding position in the second layer of the graphical user interface, so that the preset controls displayed in the graphical user interface have the specified display effects.

[0032] This invention provides a method for drawing controls. The method involves drawing a game scene on a first layer of a graphical user interface (GUI); acquiring a target texture and drawing control elements of a preset control on the target texture; processing the control elements based on preset control parameters to obtain the target control element; wherein the control parameters are used to provide a specified display effect for the preset control; and drawing the target control element onto a second layer of the GUI to obtain the drawing result of the preset control. In this method, before drawing the control elements on the GUI, drawing and processing the control elements on the acquired target texture achieves post-processing of the UI layer of the GUI, avoiding the generation of additional art resources and resource redundancy. The method of drawing controls is simple, and this drawing method can be performed in real-time during game execution.

[0033] The aforementioned terminal device is configured with rendering pipeline code, which can be the default rendering pipeline code in the game engine, and this code is represented as ScriptableRenderPass.

[0034] One possible implementation of the steps described above for drawing the game scene on the first layer of the graphical user interface is as follows: First, by executing code, first drawing parameters for the preset game scene are obtained; then, based on these first drawing parameters, the game scene is drawn on the first layer of the graphical user interface. Through the aforementioned code, first drawing parameters for drawing the scene are obtained, and based on these first drawing parameters, the game scene can be directly drawn on the first layer of the graphical user interface.

[0035] The aforementioned terminal device contains code for a rendering pipeline, and a target code is set at a specified location within this code; this target code can be represented as UIPostProcessPass. The specified location is typically after the scene has been rendered or after post-processing of the scene. The specified location of the target code within the code can be determined using the parameter RenderPassEvent.BeforeRenderingPostProcessing.

[0036] One possible implementation of the above steps of obtaining a target texture and drawing a preset control in the target texture is as follows: The target texture is obtained by executing a first specified function in the target code program; wherein the target texture is the same size as the graphical user interface; a second drawing parameter corresponding to the preset control is obtained by executing a drawing function in the target code program; and the control element of the preset control is drawn in the target texture according to the second drawing parameter.

[0037] The first specified function mentioned above can be GetTemporaryRT. By executing GetTemporaryRT, a temporary target texture (or rendering texture) can be obtained. This target texture is usually used as the "canvas" of UIPostProcessPass. The drawing function mentioned above can be Execute. By executing Execute, the second drawing parameters corresponding to the preset control can be obtained. These second drawing parameters are used to provide attributes such as the shape, size, color, and display position of the control element. Based on these second drawing parameters, the control element (also known as the control image) of the preset control is drawn at the specified position on the target texture.

[0038] One possible implementation of the above steps for processing control elements based on preset control parameters to obtain the target control element is as follows: obtain the preset control parameters by executing a second specified function in the target code program; and process the control elements based on the preset control parameters by executing a third specified function in the target code program to obtain the target control element.

[0039] The second specified function mentioned above usually refers to Execute. When the second specified function is executed, the parameters in UniversalAdditionalCameraData are obtained, which are the control parameters mentioned above. The third specified function mentioned above can be Blit. The third specified function Blit performs image processing on the control element to obtain the processed control element, which is the target control element mentioned above.

[0040] The UICamera parameter setting script in the application layer can be used in advance to set the UniversalAdditionalCameraData parameter of the camera (i.e., the aforementioned control parameter). When the second specified function in the target code program is executed, the data transmission is completed, that is, the aforementioned control parameter is obtained.

[0041] Furthermore, the target code program mentioned above is obtained by configuring the template code program (the default UIPostProcessPass). The template code program is a preset channel template file for the screen post-processing channel. This template code is the default code program in the game engine. Developers can set the function values ​​in the template code according to their needs; specific parameter settings depend on the developer's requirements. For example, setting `descriptor.depthBufferBits = 0` discards the depth buffer, and setting the `GetTemporaryRT()` method retrieves the target texture, which is then used as the "canvas" of `UIPostProcessPass`.

[0042] The above-mentioned steps of processing control elements based on preset control parameters to obtain target control elements can be implemented in one possible way: according to preset control parameters, screen post-processing is performed on the control elements in the target texture to obtain the target control element; wherein, screen post-processing includes one or more of the following: chromatic aberration processing, radial blur processing, masking processing, lens distortion processing, and tone processing; the target control element has one or more of the following: chromatic aberration effect of decomposing polychromatic light into monochromatic light, radial blur effect of blurring the surrounding scene when accelerating forward, masking effect of some areas not being processed, fisheye effect of lens distortion, and tone enhancement or reduction effects.

[0043] Specifically, the aforementioned preset control parameters include: a first control parameter; the step of performing screen post-processing on the control elements in the target texture according to the preset control parameters to obtain the target control element, one possible implementation is as follows:

[0044] Based on the first control parameters, determine at least two first offset values; based on the at least two first offset values, offset the control elements in the target texture to obtain at least two offset control elements; obtain the first color channel, second color channel, and third color channel in the control element and the at least two offset control elements respectively; obtain the target control element based on the obtained first color channel, second color channel, and third color channel; wherein, the target control element has a dispersion effect.

[0045] The aforementioned dispersion effect simulates the phenomenon of polychromatic light decomposition to form a spectrum in nature, which can be obtained by separating the RGB color channels of an image. The first control parameter mentioned above includes at least a dispersion intensity parameter. In actual implementation, two first offset values, delta, are first determined based on the dispersion intensity parameter and the coordinates of the target texture. Based on at least two first offset values, the control elements in the target texture are offset, yielding two offset coordinates of the target texture: ffocus1 = i.uv + delta2; ffocus2 = i.uv + delta1, where delta1 * 2 = delta2, i.uv is the coordinate of the target texture, and ffocus1 and ffocus2 are the two offset coordinates of the target texture. This yields at least two offset control elements, including ffocus3 (the coordinates of the target texture). The control elements and the at least two offset control elements are sampled respectively, and the first, second, and third color channels are extracted from the sampling results to obtain the dispersed color channel values, i.e., the target control elements. The first color channel can be the R channel, the second color channel can be the G channel, and the third color channel can be the B channel.

[0046] The aforementioned control parameters include: second control parameters; the step of performing screen post-processing on the control elements in the target texture according to the preset control parameters to obtain the target control elements, one possible implementation is as follows:

[0047] Based on the second control parameter, determine the target coefficient; increase the coordinates of the target texture according to the target coefficient to obtain the enlarged target texture; take the specified position of the enlarged target texture as the sampling starting point, and sample around the specified position with a specified step size to obtain the sampling result for the control element; divide the sampling result by the specified step size to obtain the target control element; the target control element has a radial blur effect.

[0048] The radial blur effect described above mimics the blurring of surrounding scenery when accelerating forward. The second control parameters mentioned above include at least the number of radial blur cycles, the radial blur intensity, and the screen width and height dimensions. The target coefficient mentioned above can also be called the dilation coefficient. The specified position mentioned above can be the center of the target texture or other locations, which can be set according to the developer's requirements. The specified step size mentioned above is pre-configured and can be set according to the developer's actual needs.

[0049] In actual implementation, based on the radial blur count, radial blur intensity, and screen dimensions, a dilation coefficient for the target texture's coordinates is determined. The target texture's coordinates are then dilated by multiplying the coefficient by the target texture's coordinates. Using a specified position on the enlarged target texture as the sampling starting point, sampling is performed around that position (e.g., one or more samplings) to obtain the sampling result for the control element. If the sampling result includes only one element, its pixel value is directly divided by the sampling step size to obtain the target control element. If the sampling result includes multiple elements, these results are superimposed, and the superimposed value is divided by the specified step size to obtain the target control element. This results in the final target control element having a similar afterimage effect.

[0050] The aforementioned control parameters include: third control parameters; the step of performing screen post-processing on the control elements in the target texture according to the preset control parameters to obtain the target control element, one possible implementation is: determining a masking area in the target texture according to the third control parameters; controlling the reduction of the screen post-processing effect of the masking area in the target texture to obtain the target control element; wherein, the target control element has a masking effect.

[0051] The aforementioned third control parameters include at least the mask center coordinates, mask radius, and mask parameters. In actual implementation, the distance from the mask center point to the edge of the target texture is calculated, and a clamping operation is performed based on this distance value to obtain the mask area's range. The screen post-processing effect on control elements within this area is reduced based on the size of the mask parameters; a larger mask parameter results in a lower processing effect.

[0052] The aforementioned control parameters include: a fourth control parameter; and a possible implementation of the step of performing screen post-processing on the control elements in the target texture according to the preset control parameters to obtain the target control elements:

[0053] Based on the fourth control parameter, determine the second offset value; determine the sampling coordinates of the control element in the target texture; based on the second offset value, offset the sampling coordinates to obtain the target sampling coordinates; based on the target sampling coordinates, sample the control element to obtain the target control element; wherein, the target control element has a fisheye effect.

[0054] The aforementioned control parameters include: the fifth control parameter; the step of performing screen post-processing on the control elements in the target texture according to the preset control parameters to obtain the target control element, one possible implementation is: according to the fifth control parameter, adjust the color and / or saturation of the control elements in the target texture to obtain the target control element; wherein, the target control element has the effect of increasing or decreasing the hue.

[0055] After the steps of drawing the target control element onto the second layer of the graphical user interface to obtain the drawing result of the preset control, the method further includes: obtaining specified control parameters, and performing screen post-processing on the first and second layers of the graphical user interface based on the specified control parameters to obtain the processed scene image and the preset control.

[0056] After completing the screen post-processing of the UI controls in the second layer, the screen post-processing of the first and second layers in the graphical user interface can also be performed simultaneously according to the control parameters, so that the scene and UI controls in the graphical user interface have the same display effect.

[0057] See Figure 2 The flowchart illustrating the drawing method of the control shown illustrates that firstly, the game scene is drawn in the scene layer of the graphical user interface. Then, the image of the game scene is post-processed according to parameters (corresponding to the first drawing parameters mentioned above). Figure 2 The parameters are controlled in the panel, and then UI controls (corresponding to the control elements mentioned above) are drawn in the texture. Additional parameters (corresponding to the control parameters mentioned above) are obtained, and the UI controls are processed by screen post-processing. Alternatively, the game scene image can also be processed by screen post-processing at the same time.

[0058] Corresponding to the above method embodiments, this embodiment of the invention provides a control drawing device, which provides a graphical user interface through a terminal device, such as... Figure 3 As shown, the device includes:

[0059] The first layer drawing module 301 is used to draw the scene of the game scene on the first layer of the graphical user interface;

[0060] The target texture drawing module 302 is used to obtain the target texture and draw the control elements of the preset control in the target texture;

[0061] The control element processing module 303 is used to process control elements based on preset control parameters to obtain target control elements; wherein, the control parameters are used to: provide the specified display effect of the preset control;

[0062] The second layer drawing module 304 is used to draw the target control element onto the second layer of the graphical user interface to obtain the drawing result of the preset control.

[0063] This invention provides a control drawing device that draws a game scene on a first layer of a graphical user interface (GUI); acquires a target texture and draws control elements of a preset control on the target texture; processes the control elements based on preset control parameters to obtain target control elements; wherein the control parameters are used to provide a specified display effect for the preset control; and draws the target control elements onto a second layer of the GUI to obtain the drawing result of the preset control. In this method, before drawing control elements on the GUI, drawing and processing the control elements on the acquired target texture achieves post-processing of the UI layer of the GUI, avoiding the generation of additional art resources and resource redundancy. The method of drawing controls is simple, and this drawing method can be performed in real time during game execution.

[0064] The aforementioned terminal device is equipped with a rendering pipeline code program; the aforementioned first layer drawing module is also used to: obtain the first drawing parameters of the preset game scene scene by executing the code program; and draw the game scene scene scene on the first layer of the graphical user interface according to the first drawing parameters.

[0065] The aforementioned terminal device is configured with a rendering pipeline code program, and a target code program is set at a specified location in the code program; the aforementioned target texture drawing module is also used to: obtain a target texture by executing a first specified function in the target code program; wherein, the target texture is the same size as the graphical user interface; obtain a second drawing parameter corresponding to a preset control by executing a drawing function in the target code program; and draw the control element of the preset control in the target texture according to the second drawing parameter.

[0066] The aforementioned terminal device is configured with a rendering pipeline code program, and a target code program is set at a specified location in the code program; the aforementioned control element processing module is also used to: obtain preset control parameters by executing a second specified function in the target code program; and process the control element based on the preset control parameters by executing a third specified function in the target code program to obtain the target control element.

[0067] The target code program mentioned above is obtained by configuring the parameters of the template code program, which is a preset channel template file for the screen post-processing channel.

[0068] The aforementioned control element processing module is also used to: perform screen post-processing on the control elements in the target texture according to preset control parameters to obtain the target control element; wherein, the screen post-processing includes one or more of the following: chromatic dispersion processing, radial blur processing, masking processing, lens distortion processing, and tone processing; the target control element has one or more of the following: chromatic dispersion effect of polychromatic light decomposing into monochromatic light, radial blur effect of the surrounding scene becoming blurred when accelerating forward, masking effect of some areas not being processed, fisheye effect of lens distortion, and tone enhancement or reduction effects.

[0069] The aforementioned preset control parameters include: a first control parameter; the aforementioned control element processing module is further configured to: determine at least two first offset values ​​based on the first control parameters; offset the control elements in the target texture based on the at least two first offset values ​​to obtain at least two offset control elements; obtain the first color channel, the second color channel, and the third color channel in the control element and the at least two offset control elements respectively; obtain the target control element based on the obtained first color channel, second color channel, and third color channel; wherein, the target control element has a dispersion effect.

[0070] The aforementioned control parameters include: second control parameters; the aforementioned control element processing module is further configured to: determine the target coefficient based on the second control parameter; increase the coordinates of the target texture based on the target coefficient to obtain the increased target texture; take the specified position of the increased target texture as the sampling starting point, and sample around the specified position with a specified step size to obtain the sampling result for the control element; divide the sampling result by the specified step size to obtain the target control element; wherein, the target control element has a radial blur effect.

[0071] The aforementioned control parameters include: third control parameters; the aforementioned control element processing module is also used to: determine the masking area in the target texture according to the third control parameters; control the masking area in the target texture to reduce the screen post-processing effect, thereby obtaining the target control element; wherein, the target control element has a masking effect.

[0072] The aforementioned control parameters include: the fourth control parameter; the aforementioned control element processing module is also used to: determine the second offset value based on the fourth control parameter; determine the sampling coordinates of the control element in the target texture, and perform offset processing on the sampling coordinates based on the second offset value to obtain the target sampling coordinates; sample the control element based on the target sampling coordinates to obtain the target control element; wherein, the target control element has a fisheye effect.

[0073] The aforementioned control parameters include: the fifth control parameter; the aforementioned control element processing module is also used to: adjust the color and / or saturation of the control elements in the target texture according to the fifth control parameter to obtain the target control element; wherein, the target control element has the effect of increasing or decreasing the hue.

[0074] The aforementioned device further includes a second processing module, used to: perform screen post-processing on the first and second layers in the graphical user interface based on the control parameters, to obtain the processed scene image and preset controls.

[0075] The control drawing device provided in this embodiment of the invention has the same technical features as the control drawing method provided in the above embodiments, so it can also solve the same technical problems and achieve the same technical effects.

[0076] This embodiment also provides an electronic device, including a processor and a memory. The memory stores machine-executable instructions that can be executed by the processor. The processor executes the machine-executable instructions to implement the above-described control drawing method. This electronic device can be a server or a terminal device.

[0077] See Figure 4 As shown, the electronic device includes a processor 100 and a memory 101. The memory 101 stores machine-executable instructions that can be executed by the processor 100. The processor 100 executes the machine-executable instructions to implement the drawing method of the control described above.

[0078] Furthermore, Figure 4 The electronic device shown also includes a bus 102 and a communication interface 103, with the processor 100, the communication interface 103 and the memory 101 connected via the bus 102.

[0079] The memory 101 may include high-speed random access memory (RAM) or non-volatile memory, such as at least one disk storage device. Communication between this system network element and at least one other network element is achieved through at least one communication interface 103 (which can be wired or wireless), such as the Internet, wide area network, local area network, or metropolitan area network. The bus 102 may be an ISA bus, PCI bus, or EISA bus, etc. The bus can be divided into address bus, data bus, control bus, etc. For ease of representation, Figure 4 The symbol is represented by a single double-headed arrow, but this does not mean that there is only one bus or one type of bus.

[0080] Processor 100 may be an integrated circuit chip with signal processing capabilities. In implementation, each step of the above method can be completed by the integrated logic circuitry in the hardware of processor 100 or by instructions in software form. Processor 100 may be a general-purpose processor, including a Central Processing Unit (CPU), a Network Processor (NP), etc.; it may also be a Digital Signal Processor (DSP), an Application Specific Integrated Circuit (ASIC), a Field-Programmable Gate Array (FPGA), or other programmable logic devices, discrete gate or transistor logic devices, or discrete hardware components. It can implement or execute the methods, steps, and logic block diagrams disclosed in the embodiments of this invention. The general-purpose processor may be a microprocessor or any conventional processor. The steps of the methods disclosed in the embodiments of this invention can be directly manifested as execution by a hardware decoding processor, or execution by a combination of hardware and software modules in the decoding processor. The software module can reside in a mature storage medium in the art, such as random access memory, flash memory, read-only memory, programmable read-only memory, electrically erasable programmable memory, or registers. This storage medium is located in memory 101. The processor 100 reads information from memory 101 and, in conjunction with its hardware, completes the steps of the method described in the foregoing embodiment, specifically including:

[0081] The process involves drawing the game scene on the first layer of the graphical user interface (GUI); acquiring a target texture and drawing preset control elements on it; processing the control elements based on preset control parameters to obtain the target control elements; where the control parameters are used to provide specified display effects for the preset controls; and finally drawing the target control elements onto the second layer of the GUI to obtain the drawing result of the preset controls. In this method, before drawing control elements on the GUI, drawing and processing the control elements on the acquired target texture achieves post-processing of the UI layer of the GUI, avoiding the generation of additional art resources and resource redundancy. The method of drawing controls is simple, and this drawing method can be performed in real-time during game execution.

[0082] The aforementioned terminal device is equipped with a rendering pipeline code program; the step of drawing the scene image of the game scene on the first layer of the graphical user interface includes: obtaining the first drawing parameters of the preset game scene scene image by executing the code program; and drawing the scene image of the game scene on the first layer of the graphical user interface according to the first drawing parameters.

[0083] The aforementioned terminal device is configured with a rendering pipeline code program, and a target code program is set at a specified location in the code program. The steps of obtaining a target texture and drawing a preset control in the target texture include: obtaining the target texture by executing a first specified function in the target code program; wherein the target texture is the same size as the graphical user interface; obtaining a second drawing parameter corresponding to the preset control by executing a drawing function in the target code program; and drawing the control element of the preset control in the target texture according to the second drawing parameter.

[0084] The aforementioned terminal device is configured with a rendering pipeline code program, and a target code program is set at a specified location in the code program; the steps of processing control elements based on preset control parameters to obtain target control elements include: obtaining preset control parameters by executing a second specified function in the target code program; and processing control elements based on preset control parameters by executing a third specified function in the target code program to obtain target control elements.

[0085] The target code program mentioned above is obtained by configuring the parameters of the template code program, which is a preset channel template file for the screen post-processing channel.

[0086] The above steps of processing control elements based on preset control parameters to obtain target control elements include: performing screen post-processing on control elements in the target texture according to preset control parameters to obtain target control elements; wherein, screen post-processing includes one or more of the following: chromatic dispersion processing, radial blur processing, masking processing, lens distortion processing, and tone processing; the target control element has one or more of the following: chromatic dispersion effect of decomposing polychromatic light into monochromatic light, radial blur effect of blurring the surrounding scene when accelerating forward, masking effect of some areas not being processed, fisheye effect of lens distortion, and tone enhancement or reduction effects.

[0087] The aforementioned preset control parameters include: first control parameters; the step of performing screen post-processing on the control elements in the target texture according to the preset control parameters to obtain the target control element includes: determining at least two first offset values ​​according to the first control parameters; offsetting the control elements in the target texture according to the at least two first offset values ​​to obtain at least two offset control elements; obtaining the first color channel, second color channel, and third color channel in the control element and the at least two offset control elements respectively; obtaining the target control element according to the obtained first color channel, second color channel, and third color channel; wherein, the target control element has a dispersion effect.

[0088] The aforementioned control parameters include: a second control parameter; the step of performing screen post-processing on the control elements in the target texture according to the preset control parameters to obtain the target control element includes: determining a target coefficient according to the second control parameter; increasing the coordinates of the target texture according to the target coefficient to obtain an increased target texture; taking a specified position of the increased target texture as the sampling starting point, sampling around the specified position with a specified step size to obtain a sampling result for the control element; dividing the sampling result by the specified step size to obtain the target control element; wherein, the target control element has a radial blur effect.

[0089] The aforementioned control parameters include: third control parameters; the step of performing screen post-processing on the control elements in the target texture according to the preset control parameters to obtain the target control element includes: determining the masking area in the target texture according to the third control parameters; controlling the reduction of the screen post-processing effect of the masking area in the target texture to obtain the target control element; wherein, the target control element has a masking effect.

[0090] The aforementioned control parameters include: a fourth control parameter; the step of performing screen post-processing on the control elements in the target texture according to the preset control parameters to obtain the target control element includes: determining a second offset value according to the fourth control parameter; determining the sampling coordinates of the control elements in the target texture, and offsetting the sampling coordinates according to the second offset value to obtain the target sampling coordinates; sampling the control elements according to the target sampling coordinates to obtain the target control element; wherein, the target control element has a fisheye effect.

[0091] The aforementioned control parameters include: the fifth control parameter; the step of performing screen post-processing on the control elements in the target texture according to the preset control parameters to obtain the target control element includes: adjusting the color and / or saturation of the control elements in the target texture according to the fifth control parameter to obtain the target control element; wherein, the target control element has the effect of increasing or decreasing the hue.

[0092] After the steps of drawing the target control element onto the second layer of the graphical user interface to obtain the drawing result of the preset control, the method further includes: performing screen post-processing on the first and second layers of the graphical user interface based on the control parameters to obtain the processed scene image and the preset control.

[0093] This embodiment also provides a machine-readable storage medium storing machine-executable instructions. When these machine-executable instructions are invoked and executed by a processor, they cause the processor to implement the aforementioned control drawing method, specifically including:

[0094] The process involves drawing the game scene on the first layer of the graphical user interface (GUI); acquiring a target texture and drawing preset control elements on it; processing the control elements based on preset control parameters to obtain the target control elements; where the control parameters are used to provide specified display effects for the preset controls; and finally drawing the target control elements onto the second layer of the GUI to obtain the drawing result of the preset controls. In this method, before drawing control elements on the GUI, drawing and processing the control elements on the acquired target texture achieves post-processing of the UI layer of the GUI, avoiding the generation of additional art resources and resource redundancy. The method of drawing controls is simple, and this drawing method can be performed in real-time during game execution.

[0095] The aforementioned terminal device is equipped with a rendering pipeline code program; the step of drawing the scene image of the game scene on the first layer of the graphical user interface includes: obtaining the first drawing parameters of the preset game scene scene image by executing the code program; and drawing the scene image of the game scene on the first layer of the graphical user interface according to the first drawing parameters.

[0096] The aforementioned terminal device is configured with a rendering pipeline code program, and a target code program is set at a specified location in the code program. The steps of obtaining a target texture and drawing a preset control in the target texture include: obtaining the target texture by executing a first specified function in the target code program; wherein the target texture is the same size as the graphical user interface; obtaining a second drawing parameter corresponding to the preset control by executing a drawing function in the target code program; and drawing the control element of the preset control in the target texture according to the second drawing parameter.

[0097] The aforementioned terminal device is configured with a rendering pipeline code program, and a target code program is set at a specified location in the code program; the steps of processing control elements based on preset control parameters to obtain target control elements include: obtaining preset control parameters by executing a second specified function in the target code program; and processing control elements based on preset control parameters by executing a third specified function in the target code program to obtain target control elements.

[0098] The target code program mentioned above is obtained by configuring the parameters of the template code program, which is a preset channel template file for the screen post-processing channel.

[0099] The above steps of processing control elements based on preset control parameters to obtain target control elements include: performing screen post-processing on control elements in the target texture according to preset control parameters to obtain target control elements; wherein, screen post-processing includes one or more of the following: chromatic dispersion processing, radial blur processing, masking processing, lens distortion processing, and tone processing; the target control element has one or more of the following: chromatic dispersion effect of decomposing polychromatic light into monochromatic light, radial blur effect of blurring the surrounding scene when accelerating forward, masking effect of some areas not being processed, fisheye effect of lens distortion, and tone enhancement or reduction effects.

[0100] The aforementioned preset control parameters include: first control parameters; the step of performing screen post-processing on the control elements in the target texture according to the preset control parameters to obtain the target control element includes: determining at least two first offset values ​​according to the first control parameters; offsetting the control elements in the target texture according to the at least two first offset values ​​to obtain at least two offset control elements; obtaining the first color channel, second color channel, and third color channel in the control element and the at least two offset control elements respectively; obtaining the target control element according to the obtained first color channel, second color channel, and third color channel; wherein, the target control element has a dispersion effect.

[0101] The aforementioned control parameters include: a second control parameter; the step of performing screen post-processing on the control elements in the target texture according to the preset control parameters to obtain the target control element includes: determining a target coefficient according to the second control parameter; increasing the coordinates of the target texture according to the target coefficient to obtain an increased target texture; taking a specified position of the increased target texture as the sampling starting point, sampling around the specified position with a specified step size to obtain a sampling result for the control element; dividing the sampling result by the specified step size to obtain the target control element; wherein, the target control element has a radial blur effect.

[0102] The aforementioned control parameters include: third control parameters; the step of performing screen post-processing on the control elements in the target texture according to the preset control parameters to obtain the target control element includes: determining the masking area in the target texture according to the third control parameters; controlling the reduction of the screen post-processing effect of the masking area in the target texture to obtain the target control element; wherein, the target control element has a masking effect.

[0103] The aforementioned control parameters include: a fourth control parameter; the step of performing screen post-processing on the control elements in the target texture according to the preset control parameters to obtain the target control element includes: determining a second offset value according to the fourth control parameter; determining the sampling coordinates of the control elements in the target texture, and offsetting the sampling coordinates according to the second offset value to obtain the target sampling coordinates; sampling the control elements according to the target sampling coordinates to obtain the target control element; wherein, the target control element has a fisheye effect.

[0104] The aforementioned control parameters include: the fifth control parameter; the step of performing screen post-processing on the control elements in the target texture according to the preset control parameters to obtain the target control element includes: adjusting the color and / or saturation of the control elements in the target texture according to the fifth control parameter to obtain the target control element; wherein, the target control element has the effect of increasing or decreasing the hue.

[0105] After the steps of drawing the target control element onto the second layer of the graphical user interface to obtain the drawing result of the preset control, the method further includes: performing screen post-processing on the first and second layers of the graphical user interface based on the control parameters to obtain the processed scene image and the preset control.

[0106] The computer program products of the control drawing method, apparatus, electronic device and system provided in the embodiments of the present invention include a computer-readable storage medium storing program code. The instructions included in the program code can be used to execute the methods described in the preceding method embodiments. For specific implementation, please refer to the method embodiments, which will not be repeated here.

[0107] Those skilled in the art will clearly understand that, for the sake of convenience and brevity, the specific working process of the system and apparatus described above can be referred to the corresponding process in the foregoing method embodiments, and will not be repeated here.

[0108] Furthermore, in the description of the embodiments of the present invention, unless otherwise explicitly specified and limited, the terms "installation," "connection," and "linking" should be interpreted broadly. For example, they can refer to a fixed connection, a detachable connection, or an integral connection; they can refer to a mechanical connection or an electrical connection; they can refer to a direct connection or an indirect connection through an intermediate medium; and they can refer to the internal connection of two components. Those skilled in the art can understand the specific meaning of the above terms in the present invention based on the specific circumstances.

[0109] If the aforementioned functions are implemented as software functional units and sold or used as independent products, they can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of this invention, essentially, or the part that contributes to the prior art, or a portion of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods described in the various embodiments of this invention. The aforementioned storage medium includes various media capable of storing program code, such as USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical disks.

[0110] In the description of this invention, it should be noted that the terms "center," "upper," "lower," "left," "right," "vertical," "horizontal," "inner," and "outer," etc., indicate the orientation or positional relationship based on the orientation or positional relationship shown in the accompanying drawings. They are used only for the convenience of describing the invention and for simplifying the description, and do not indicate or imply that the device or element referred to must have a specific orientation, or be constructed and operated in a specific orientation. Therefore, they should not be construed as limitations on the invention. Furthermore, the terms "first," "second," and "third" are used for descriptive purposes only and should not be construed as indicating or implying relative importance.

[0111] Finally, it should be noted that the above embodiments are merely specific implementations of the present invention, used to illustrate the technical solutions of the present invention, and not to limit it. The scope of protection of the present invention is not limited thereto. Although the present invention has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that any person skilled in the art can still modify or easily conceive of changes to the technical solutions described in the foregoing embodiments within the technical scope disclosed in the present invention, or make equivalent substitutions for some of the technical features; and these modifications, changes, or substitutions do not cause the essence of the corresponding technical solutions to deviate from the spirit and scope of the technical solutions of the embodiments of the present invention, and should all be covered within the scope of protection of the present invention. Therefore, the scope of protection of the present invention should be determined by the scope of the claims.

Claims

1. A method for drawing a control, characterized in that, The method of providing a graphical user interface via a terminal device includes: Draw the scene of the game scene on the first layer of the graphical user interface; Obtain the target texture and draw the control elements of the preset control in the target texture; Based on preset control parameters, the control element is processed to obtain the target control element; wherein, the control parameters are used to: provide a specified display effect for the preset control; The target control element is drawn onto the second layer of the graphical user interface to obtain the drawing result of the preset control; The step of processing the control element based on preset control parameters to obtain the target control element includes: According to the preset control parameters, screen post-processing is performed on the control elements in the target texture to obtain the target control element; wherein, the screen post-processing includes one or more of the following: chromatic dispersion processing, radial blur processing, masking processing, lens distortion processing, and tone processing; the target control element has one or more of the following: chromatic dispersion effect of decomposing polychromatic light into monochromatic light, radial blur effect of blurring the surrounding scene when accelerating forward, masking effect of some areas not being processed, fisheye effect of lens distortion, and tone enhancement or reduction effects.

2. The method according to claim 1, characterized in that, The terminal device is equipped with code for a rendering pipeline. The steps of drawing the game scene on the first layer of the graphical user interface include: By executing the code program, the first drawing parameters of the preset game scene are obtained; according to the first drawing parameters, the scene of the game scene is drawn on the first layer of the graphical user interface.

3. The method according to claim 1, characterized in that, The terminal device is configured with a rendering pipeline code program, and a target code program is set at a designated location in the code program; The steps of obtaining a target texture and drawing a preset control on the target texture include: A target texture is obtained by executing a first specified function in the target code program; wherein the target texture is the same size as the graphical user interface. By executing the drawing function in the target code program, the second drawing parameters corresponding to the preset control are obtained; Based on the second drawing parameters, the control elements of the preset control are drawn in the target texture.

4. The method according to claim 1, characterized in that, The terminal device is configured with a rendering pipeline code program, and a target code program is set at a designated location in the code program; The steps of processing the control element based on preset control parameters to obtain the target control element include: The preset control parameters are obtained by executing the second specified function in the target code program; By executing the third specified function in the target code program, the control element is processed based on the preset control parameters to obtain the target control element.

5. The method according to claim 3 or 4, characterized in that, The target code program is obtained by configuring parameters of the template code program, which is a preset channel template file for the screen post-processing channel.

6. The method according to claim 1, characterized in that, The preset control parameters include: first control parameters; The step of performing screen post-processing on the control elements in the target texture according to the preset control parameters to obtain the target control elements includes: Based on the first control parameter, at least two first offset values ​​are determined; based on the at least two first offset values, the control elements in the target texture are offset to obtain the control elements after at least two offsets; The first color channel, the second color channel, and the third color channel of the control element and the at least two offset control elements are obtained respectively; the target control element is obtained based on the obtained first color channel, second color channel, and third color channel; wherein, the target control element has a dispersion effect.

7. The method according to claim 1, characterized in that, The control parameters include: second control parameters; The step of performing screen post-processing on the control elements in the target texture according to the preset control parameters to obtain the target control elements includes: Based on the second control parameters, determine the target coefficient; increase the coordinates of the target texture according to the target coefficient to obtain the enlarged target texture; Using the specified position of the enlarged target texture as the sampling starting point, sampling is performed around the specified position with a specified step size to obtain the sampling result for the control element; the sampling result is divided by the specified step size to obtain the target control element; wherein, the target control element has a radial blur effect.

8. The method according to claim 1, characterized in that, The control parameters include: third control parameters; The step of performing screen post-processing on the control elements in the target texture according to the preset control parameters to obtain the target control elements includes: Based on the third control parameters, a masking area is determined in the target texture; the screen post-processing effect of the masking area in the target texture is reduced to obtain a target control element; wherein the target control element has a masking effect.

9. The method according to claim 1, characterized in that, The control parameters include: the fourth control parameter; The step of performing screen post-processing on the control elements in the target texture according to the preset control parameters to obtain the target control elements includes: Based on the fourth control parameter, determine the second offset value; determine the sampling coordinates of the control element in the target texture; and offset the sampling coordinates based on the second offset value to obtain the target sampling coordinates. Based on the target sampling coordinates, the control element is sampled to obtain the target control element; wherein the target control element has a fisheye effect.

10. The method according to claim 1, characterized in that, The control parameters include: the fifth control parameter; The step of performing screen post-processing on the control elements in the target texture according to the preset control parameters to obtain the target control elements includes: Based on the fifth control parameter, the color and / or saturation of the control elements in the target texture are adjusted to obtain the target control element; wherein, the target control element has the effect of increasing or decreasing the hue.

11. The method according to claim 1, characterized in that, After the step of drawing the target control element onto the second layer of the graphical user interface to obtain the drawing result of the preset control, the method further includes: Based on the control parameters, screen post-processing is performed on the first layer and the second layer in the graphical user interface to obtain the processed scene image and the preset control.

12. A device for drawing controls, characterized in that, The device provides a graphical user interface via a terminal device, the apparatus comprising: The first layer drawing module is used to draw the scene of the game scene on the first layer of the graphical user interface; The target texture drawing module is used to acquire a target texture and draw the control elements of a preset control in the target texture; The control element processing module is used to process the control element based on preset control parameters to obtain the target control element; wherein, the control parameters are used to: provide a specified display effect for the preset control; The second layer drawing module is used to draw the target control element onto the second layer of the graphical user interface to obtain the drawing result of the preset control; The control element processing module is further configured to: perform screen post-processing on the control elements in the target texture according to the preset control parameters to obtain the target control element; wherein, the screen post-processing includes one or more of the following: chromatic dispersion processing, radial blur processing, masking processing, lens distortion processing, and tone processing; the target control element has one or more of the following: chromatic dispersion effect of polychromatic light decomposing into monochromatic light, radial blur effect of the surrounding scene becoming blurred when accelerating forward, masking effect of some areas not being processed, fisheye effect of lens distortion, and tone enhancement or reduction effects.

13. An electronic device, characterized in that, It includes a processor and a memory, the memory storing computer-executable instructions that can be executed by the processor, the processor executing the computer-executable instructions to implement the control drawing method according to any one of claims 1-11.

14. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores computer-executable instructions, which, when invoked and executed by a processor, cause the processor to implement the control drawing method according to any one of claims 1-11.

Images