Gradient rendering method based on Cocos UI vertex color override

Abstract

The application provides a gradient rendering method based on Cocos UI vertex color override, comprising: obtaining a target interface node carrying a UI rendering component, and mounting a gradient control component on the target interface node; configuring a gradient parameter for the gradient control component, wherein the gradient parameter at least includes a gradient direction and a gradient color group; according to the gradient direction, overriding color data in the gradient color group to a color attribute of a corresponding vertex of the UI rendering component; reusing a Cocos native UI rendering pipeline, performing rasterization interpolation rendering based on vertex color data of the UI rendering component, and outputting a gradient display effect on the target interface node. The scheme directly controls the color distribution of each vertex of the UI primitive, reuses the Cocos native UI rendering pipeline, and makes a single interface element itself form a gradient display effect, thereby reducing resource burden, improving dynamic color changing capability, and simplifying interface production, updating, maintenance and other processes.

Description

Technical Field

[0001] This application relates to the field of Cocos development technology, and more specifically, to a gradient rendering method based on Cocos UI vertex color overriding. Background Technology

[0002] In Cocos Creator projects, gradients are commonly used for button backgrounds, tooltips, icon bases, card decorations, panel borders, and themed interfaces. To allow the same set of UI resources to adapt to different themes and states, projects often need to provide dynamic gradient capabilities for multiple UI elements.

[0003] Existing solutions mainly include the following categories: The first category is to calculate color transitions through a dedicated graphics program during the rendering stage; the second category is to directly create gradient image resources of different colors and replace the resources when switching interfaces; the third category is to create a transition color effect by overlaying two or more semi-transparent nodes; and the fourth category is to pre-solidify the gradient results in the art resources.

[0004] While these solutions can achieve basic gradient display, they still have significant limitations in terms of interface resource reuse, dynamic color changing, production efficiency, and access to common components.

[0005] The main drawbacks of existing technologies are: firstly, when relying on a dedicated rendering solution, the access link is long and the cost of modifying interface components is high; secondly, when relying on gradient images, multiple sets of similar resources need to be maintained, which is not conducive to skinning and unified configuration; thirdly, when relying on the overlay of multiple nodes, it will increase the complexity of hierarchical management, editing and interface maintenance costs; and fourthly, when relying on offline resources, it is difficult to adjust the gradient direction and color in real time according to the state changes during runtime.

[0006] Therefore, developing a lightweight, unified gradient rendering method that is suitable for the reuse of interface components is a technical problem that needs to be solved in this field. Summary of the Invention

[0007] The purpose of this application is to provide a gradient rendering method based on Cocos UI vertex color overriding. By directly controlling the color distribution of each vertex of the UI primitive and reusing the Cocos native UI rendering pipeline, a single interface element can form a gradient display effect on its own, thereby reducing resource burden, improving dynamic color changing capability, and simplifying the processes of interface creation, updating, and maintenance.

[0008] To achieve the above objectives, the embodiments of this application are implemented in the following manner: In a first aspect, embodiments of this application provide a gradient rendering method based on Cocos UI vertex color overriding, comprising: obtaining a target interface node carrying a UI rendering component, and attaching a gradient control component to the target interface node, wherein the gradient control component is a logic control component corresponding to the UI rendering component; configuring gradient parameters for the gradient control component, wherein the gradient parameters include at least a gradient direction and a gradient color group; overriding the color data in the gradient color group to the color attributes of the corresponding vertex of the UI rendering component according to the gradient direction; reusing the Cocos native UI rendering pipeline, performing rasterization interpolation rendering based on the vertex color data of the UI rendering component, and outputting the gradient display effect on the target interface node.

[0009] In conjunction with the first aspect, in the first possible implementation of the first aspect, the shape of the UI rendering component is a rectangle, and the gradient control component is configured with gradient parameters, including: configuring a horizontal gradient direction for the gradient control component; configuring color data of the four vertices of the rectangle for the gradient control component, wherein the color data of the two vertices on the left side of the rectangle are the same, the color data of the two vertices on the right side of the rectangle are the same, and the color data of the two vertices on the left side of the rectangle are different from the color data of the two vertices on the right side of the rectangle.

[0010] In conjunction with the first possible implementation of the first aspect, in the second possible implementation of the first aspect, the gradient parameter also includes a reverse switch. If the reverse switch is enabled, the method further includes: swapping the color data of the two vertices on the left side of the rectangle with the color data of the two vertices on the right side of the rectangle.

[0011] In conjunction with the first aspect, in the third possible implementation of the first aspect, the shape of the UI rendering component is a rectangle, and gradient parameters are configured for the gradient control component, including: configuring a vertical gradient direction for the gradient control component; configuring color data for the four vertices of the rectangle for the gradient control component, wherein the color data of the two upper vertices of the rectangle are the same, the color data of the two lower vertices of the rectangle are the same, and the color data of the two upper vertices of the rectangle are different from the color data of the two lower vertices of the rectangle.

[0012] In conjunction with the third possible implementation of the first aspect, in the fourth possible implementation of the first aspect, the gradient parameter also includes a reverse switch. If the reverse switch is enabled, the method further includes: swapping the color data of the two upper vertices of the rectangle with the color data of the two lower vertices of the rectangle.

[0013] In conjunction with the first aspect, in the fifth possible implementation of the first aspect, the shape of the UI rendering component is a rectangle, and the gradient control component is configured with gradient parameters, including: configuring the four corner gradient directions for the gradient control component; configuring the color data of the four vertices of the rectangle for the gradient control component, wherein at least one vertex color data of the four vertices of the rectangle is different from the color data of its two adjacent vertices.

[0014] In conjunction with the fifth possible implementation of the first aspect, in the sixth possible implementation of the first aspect, the gradient parameter also includes a reverse switch. If the reverse switch is enabled, the method further includes: diagonally swapping the color data of each vertex in the rectangle.

[0015] In conjunction with the first aspect, in the seventh possible implementation of the first aspect, the rendering mesh corresponding to the UI rendering component includes a central vertex and N edge vertices arranged sequentially along the polygon boundary, and is composed of N triangles that share the central vertex and connect adjacent two edge vertices respectively. The gradient control component is configured with gradient parameters, including: configuring a radial gradient direction for the gradient control component, wherein the radial gradient direction represents a change from the central vertex to the polygon boundary; configuring color data for each vertex for the gradient control component, wherein the color data of the central vertex is different from the color data of the edge vertices, and the color data of each edge vertex is the same or different. When the color data of each edge vertex is different, a non-axisymmetric central radial gradient is formed.

[0016] In conjunction with the seventh possible implementation of the first aspect, in the eighth possible implementation of the first aspect, the gradient parameter further includes a reverse switch. If the reverse switch is enabled and the color data of each edge vertex is the same, the method further includes: setting the original color data of each edge vertex to the new color data of the center vertex, and setting the original color data of the center vertex to the new color data of each edge vertex.

[0017] In combination with the first aspect or any of the first to eighth possible implementations of the first aspect, in the ninth possible implementation of the first aspect, when the gradient parameters are updated or the runtime interface state changes, the UI rendering component triggers a color refresh process, wherein updating the gradient parameters means that the developer modifies the gradient parameters in the editor.

[0018] Beneficial effects: This solution obtains the target interface node that hosts the UI rendering component, attaches a gradient control component (the logical control component corresponding to the UI rendering component) to the target interface node, and configures gradient parameters for the gradient control component (including at least the gradient direction and gradient color group, and may also include a reverse switch). Then, based on the gradient direction (such as horizontal gradient, vertical gradient, corner gradient, radial gradient, etc.), the color data in the gradient color group is overwritten to the color attributes of the corresponding vertices of the UI rendering component. By reusing the Cocos native UI rendering pipeline, rasterization interpolation rendering is performed based on the vertex color data of the UI rendering component to output the gradient display effect on the target interface node. This solution can achieve gradient display by a single interface element itself without adding additional display nodes, utilizing the rasterization interpolation rendering of the Cocos native UI rendering pipeline. This gradient color implementation scheme reuses the native Cocos UI rendering pipeline, only overriding vertex colors without modifying the rendering configuration of UI rendering components (materials, shaders, rendering queues, etc.). It reuses the existing rendering pipeline, materials, and textures of the host node, eliminating the need to create additional display nodes. While maintaining consistent materials, textures, blending states, and other batching conditions, vertex color overriding itself does not introduce independent materials or additional rendering batches, nor does it increase node levels. Furthermore, during later maintenance or updates (such as updating colors or gradient directions), developers can modify gradient parameters, and when runtime parameters change, the gradient display effect is updated through a color refresh process. Overall, this scheme reduces resource burden, improves dynamic color-changing capabilities, and simplifies the processes of interface creation, updates, and maintenance.

[0019] This solution can adapt to horizontal and vertical gradients of various commonly used UI rendering components, and can achieve four-corner gradients of rectangular UIs, as well as radial gradients of regular polygonal UIs (it is also applicable to radial gradients of various polygons formed by combining N triangular sectors with the same central vertex, not limited to regular polygons). It can adapt to most gradient color scenarios in Cocos Creator projects (for example, it can be used for dynamic gradient display of buttons, panels, icon backgrounds, title bars and general interface elements in Cocos projects).

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

[0021] To more clearly illustrate the technical solutions of the embodiments of this application, the accompanying drawings used in the embodiments of this application will be briefly introduced below. It should be understood that the following drawings only show some embodiments of this application and should not be regarded as a limitation of the scope. For those skilled in the art, other related drawings can be obtained based on these drawings without creative effort.

[0022] Figure 1 A flowchart of a gradient rendering method based on Cocos UI vertex color overriding provided in an embodiment of this application.

[0023] Figure 2 This is a schematic diagram of a horizontal gradient scheme for a rectangular UI.

[0024] Figure 3 This is a schematic diagram of a vertical gradient scheme for a rectangular UI.

[0025] Figure 4 This is a schematic diagram of the four corner gradient scheme for a rectangular UI.

[0026] Figure 5 This is a schematic diagram of the radial gradient of a polygonal UI.

[0027] Figure 6 A schematic diagram of radial gradient after enabling the reverse switch for polygon UI. Detailed Implementation

[0028] The technical solutions in the embodiments of this application will now be described with reference to the accompanying drawings.

[0029] Please see Figure 1 , Figure 1 This is a flowchart illustrating a gradient rendering method based on Cocos UI vertex color overriding provided in an embodiment of this application. In this embodiment, the gradient rendering method based on Cocos UI vertex color overriding may include steps S10, S20, S30, and S40.

[0030] For UI primitives (i.e. UI rendering components) that require gradient colors, you can run step S10 first.

[0031] Step S10: Obtain the target interface node that carries the UI rendering component, and attach the gradient control component to the target interface node. The gradient control component is the logic control component corresponding to the UI rendering component.

[0032] In this embodiment, a target interface node carrying the UI rendering component can be obtained, and a gradient control component can be attached to the target interface node. Here, the target interface node is a UI node (Node), which is the basic container carrying the UI rendering component and the gradient control component. The gradient control component is the logical control component corresponding to the UI rendering component. The rendering mesh corresponding to the UI rendering component can be a rectangular mesh, a triangular mesh, a circular approximation mesh based on regular polygons, a rounded rectangular mesh, or other polygonal meshes. For a rendering mesh that needs to implement radial gradient, the rendering mesh needs to include a central vertex and N edge vertices set along the boundary, and is composed of multiple triangular sectors sharing the central vertex.

[0033] Then, step S20 can be run.

[0034] Step S20: Configure gradient parameters for the gradient control component, wherein the gradient parameters include at least gradient direction and gradient color group.

[0035] In this embodiment, developers can configure gradient parameters for the gradient control component in the editor, such as gradient direction and gradient color group (both of which are required), and can also configure a reverse switch (for convenient switching of gradient direction of gradient color).

[0036] This example uses a commonly used rectangular UI rendering component: like Figure 2 As shown, you can configure the horizontal gradient direction (i.e., horizontal gradient) for the gradient control component, and configure the color data of the four vertices of the rectangle for the gradient control component. For the case of a horizontal gradient direction, the gradient color group needs to be configured as follows: the color data of the two vertices on the left side of the rectangle are the same, the color data of the two vertices on the right side of the rectangle are the same, and the color data of the two vertices on the left side of the rectangle are different from the color data of the two vertices on the right side of the rectangle.

[0037] like Figure 3 As shown, a vertical gradient direction (i.e., longitudinal gradient) can also be configured for the gradient control component, as well as the color data of the four vertices of the rectangle. For the case of a vertical gradient direction, the gradient color group needs to be configured as follows: the color data of the two upper vertices of the rectangle are the same, the color data of the two lower vertices of the rectangle are the same, and the color data of the two upper vertices of the rectangle are different from the color data of the two lower vertices of the rectangle.

[0038] like Figure 4As shown, you can also configure the four-corner gradient direction for the gradient control component, and configure the color data of the four vertices of the rectangle for the gradient control component. For the four-corner gradient direction, the gradient color group needs to be configured such that at least one vertex color data of the four vertices of the rectangle is different from the color data of its two adjacent vertices. For example, all four vertex color data are different; or, the color data of diagonally opposite vertices are the same, and the color data of adjacent vertices are different; or, three vertex color data are the same, and one vertex color data is different; or, two vertex color data are the same, and the other two vertex color data are different, etc.

[0039] As a configurable gradient parameter, the reverse switch, when enabled after configuration, requires the following: For horizontal gradients, the color data of the two vertices on the left and right sides of the rectangle must be swapped (i.e., top-left A swapped with top-right B, bottom-left C swapped with bottom-right D). For vertical gradients, the color data of the two vertices on the top and bottom sides of the rectangle must be swapped (i.e., top-left A swapped with bottom-left C, top-right B swapped with bottom-right D). For corner gradients, the color data of each vertex in the rectangle must be swapped diagonally (i.e., top-left A swapped with bottom-right D, bottom-left C swapped with top-right B).

[0040] Of course, to achieve more complex gradients, such as radial gradients (the direction of change from the center vertex towards the polygon boundary), the UI rendering component design needs to consider the rasterization interpolation rendering characteristics of Cocos' native UI rendering pipeline. This would result in a UI rendering component consisting of a rendering mesh with a center vertex and N edge vertices arranged sequentially along the polygon boundary, and composed of N triangles sharing the center vertex and connecting adjacent edge vertices (this can be understood as a UI rendering component that forms a polygon by combining N triangular sectors with the same center vertex; for example, a regular hexagon requires six triangular sectors with the same center vertex). Figure 5 As shown, of course, the same principle applies to other polygons (not necessarily regular polygons).

[0041] Therefore, in the gradient parameters of the gradient control component of this type of polygonal UI rendering component, the gradient color group includes the color data of the center vertex and the color data of N edge vertices. In this case, the color data of the center vertex and the color data of the edge vertices are configured with different color data, while the color data of each edge vertex can be the same or different. When the color data of each edge vertex is the same, the edge vertex color data can be configured in batches. However, when the color data of each edge vertex is partially different or not all of them are the same (forming a non-axisymmetric center-radial gradient), the color data needs to be configured point by point.

[0042] The reverse switch, as a configurable gradient parameter (this embodiment only considers the case where the color data of each edge vertex is the same, and does not consider the case where the color data of each edge vertex is partially different or completely different), if the reverse switch is enabled after configuration, then the original color data of each edge vertex can be set to the new color data of the center vertex, and the original color data of the center vertex can be set to the new color data of each edge vertex (that is, the color data of the center vertex and the color data of the edge vertex are swapped, because the color data of the edge vertex is configured in batches and the color data of each edge vertex is the same, so it can be achieved by swapping the color data of the center vertex and the color data of the edge vertex). For example, swapping the color data of the center vertex O with the color data of the edge vertex AF, such as... Figure 6 As shown.

[0043] After configuring the gradient parameters of the gradient control component, step S30 can be run.

[0044] Step S30: Based on the gradient direction, overwrite the color data in the gradient color group to the color attributes of the corresponding vertices of the UI rendering component.

[0045] In this embodiment, the color data in the gradient color group can be overwritten to the color attributes of the corresponding vertices of the UI rendering component according to the gradient direction. Taking a rectangular UI rendering component as an example, the gradient control component can overwrite the color data to the color attributes of the top-left, bottom-left, top-right, and bottom-right vertices of the UI rendering component according to the current gradient direction.

[0046] After completing the vertex color overwrite of the UI rendering component, you can run step S40.

[0047] Step S40: Reuse the Cocos native UI rendering pipeline, perform rasterization interpolation rendering based on the vertex color data of the UI rendering component, and output the gradient display effect on the target interface node.

[0048] In this embodiment, since the gradient color implementation of this solution does not add extra display nodes, the gradient color display can be completed by a single interface element itself. Therefore, the Cocos native UI rendering pipeline can be directly reused to perform rasterization interpolation rendering based on the vertex color data of the UI rendering component, thereby outputting the gradient display effect on the target interface node.

[0049] During later maintenance or updates, when adjustments to the gradient display are needed, developers can modify the gradient parameters in the editor to change and adjust the gradient effect, such as changing the gradient direction, modifying the gradient color group, and enabling the reverse switch. The UI rendering component can trigger a color refresh process to update the gradient display effect in real time when the gradient parameters are updated or the runtime interface state changes.

[0050] In summary, this application provides a gradient rendering method based on Cocos UI vertex color overriding. It obtains the target interface node carrying the UI rendering component, attaches a gradient control component (the logic control component corresponding to the UI rendering component) to the target interface node, and configures gradient parameters for the gradient control component (including at least the gradient direction and gradient color group, and may also include a reverse switch). Then, according to the gradient direction (such as horizontal gradient, vertical gradient, corner gradient, radial gradient, etc.), the color data in the gradient color group is overridden to the color attributes of the corresponding vertices of the UI rendering component. By reusing the Cocos native UI rendering pipeline, rasterization interpolation rendering is performed based on the vertex color data of the UI rendering component to output the gradient display effect on the target interface node. This solution can achieve gradient display by a single interface element itself using rasterization interpolation rendering of the Cocos native UI rendering pipeline without adding additional display nodes. This gradient color implementation scheme reuses the native Cocos UI rendering pipeline, only overriding vertex colors without modifying the rendering configuration of UI rendering components (materials, shaders, rendering queues, etc.). It reuses the existing rendering pipeline, materials, and textures of the host node, eliminating the need to create additional display nodes. While maintaining consistent materials, textures, blending states, and other batching conditions, vertex color overriding itself does not introduce independent materials or additional rendering batches, nor does it increase node levels. Furthermore, during later maintenance or updates (such as updating colors or gradient directions), developers can modify gradient parameters, and when runtime parameters change, the gradient display effect is updated through a color refresh process. Overall, this scheme reduces resource burden, improves dynamic color-changing capabilities, and simplifies the processes of interface creation, updates, and maintenance.

[0051] This solution can adapt to horizontal and vertical gradients of various commonly used UI rendering components, and can achieve four-corner gradients of rectangles and radial gradients of regular polygons (it is also applicable to radial gradients of various polygons formed by combining N triangular sectors with the same central vertex, not limited to regular polygons). It can adapt to most gradient color scenarios in Cocos Creator projects (for example, it can be used for dynamic gradient display of buttons, panels, icon backgrounds, title bars and general interface elements in Cocos projects).

[0052] The above description is merely an embodiment of this application and is not intended to limit the scope of protection of this application. Various modifications and variations can be made to this application by those skilled in the art. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of this application should be included within the scope of protection of this application.

Claims

1. A gradient rendering method based on vertex color overriding in Cocos UI, characterized in that, include: Obtain the target interface node that carries the UI rendering component, and attach the gradient control component to the target interface node. The gradient control component is the logic control component corresponding to the UI rendering component. Configure gradient parameters for the gradient control component, wherein the gradient parameters include at least the gradient direction and the gradient color group; Based on the gradient direction, the color data in the gradient color group is overwritten to the color attributes of the corresponding vertices of the UI rendering component; It reuses the native UI rendering pipeline of Cocos, performs rasterization interpolation rendering based on the vertex color data of the UI rendering component, and outputs gradient display effect on the target interface node.

2. The gradient rendering method based on Cocos UI vertex color overriding according to claim 1, characterized in that, The UI rendering component is rectangular in shape. Gradient parameters are configured for the gradient control component, including: Configure the horizontal gradient direction for the gradient control component; Configure the color data of the four vertices of the rectangle for the gradient control component. The color data of the two vertices on the left side of the rectangle are the same, the color data of the two vertices on the right side of the rectangle are the same, and the color data of the two vertices on the left side of the rectangle are different from the color data of the two vertices on the right side of the rectangle.

3. The gradient rendering method based on Cocos UI vertex color overriding according to claim 2, characterized in that, The gradient parameters also include a reverse switch; if the reverse switch is enabled, the method further includes: Swap the color data of the two vertices on the left side of the rectangle with the color data of the two vertices on the right side of the rectangle.

4. The gradient rendering method based on Cocos UI vertex color overriding according to claim 1, characterized in that, The UI rendering component is rectangular in shape. Gradient parameters are configured for the gradient control component, including: Configure the vertical gradient direction for the gradient control component; Configure the color data of the four vertices of the rectangle for the gradient control component. The color data of the two top vertices of the rectangle are the same, the color data of the two bottom vertices of the rectangle are the same, and the color data of the two top vertices of the rectangle are different from the color data of the two bottom vertices of the rectangle.

5. The gradient rendering method based on Cocos UI vertex color overriding according to claim 4, characterized in that, The gradient parameters also include a reverse switch; if the reverse switch is enabled, the method further includes: Swap the color data of the two top vertices of the rectangle with the color data of the two bottom vertices of the rectangle.

6. The gradient rendering method based on Cocos UI vertex color overriding according to claim 1, characterized in that, The UI rendering component is rectangular in shape. Gradient parameters are configured for the gradient control component, including: Configure the four corner gradient directions for the gradient control component; Configure the color data of the four vertices of the rectangle for the gradient control component, wherein at least one of the four vertex color data of the rectangle is different from the color data of its two adjacent vertices.

7. The gradient rendering method based on Cocos UI vertex color overriding according to claim 6, characterized in that, The gradient parameters also include a reverse switch; if the reverse switch is enabled, the method further includes: The color data of each vertex in the rectangle are swapped diagonally.

8. The gradient rendering method based on Cocos UI vertex color overriding according to claim 1, characterized in that, The rendering mesh corresponding to the UI rendering component includes a central vertex and N edge vertices arranged sequentially along the polygon boundary. It is composed of N triangles sharing the central vertex and connecting adjacent edge vertices. Gradient parameters are configured for the gradient control component, including: Configure a radial gradient direction for the gradient control component, where the radial gradient direction represents the change from the center vertex towards the polygon boundary; Configure the color data of each vertex for the gradient control component. The color data of the center vertex is different from that of the edge vertices. The color data of each edge vertex may be the same or different. When the color data of each edge vertex is different, a non-axisymmetric center radial gradient is formed.

9. The gradient rendering method based on Cocos UI vertex color overriding according to claim 8, characterized in that, The gradient parameters also include an inversion switch. If the inversion switch is enabled and the color data of each edge vertex is the same, the method further includes: Set the original color data of each edge vertex to the new color data of the center vertex, and set the original color data of the center vertex to the new color data of each edge vertex.

10. The gradient rendering method based on Cocos UI vertex color overriding according to any one of claims 1-9, characterized in that, When gradient parameters are updated or the runtime interface state changes, the UI rendering component triggers a color refresh process. Gradient parameter updates indicate that the developer modifies the gradient parameters in the editor.

Images