A method for combining images and text based on TextMeshPro

Abstract

The present invention discloses a method for batching text and images based on TextMeshPro, comprising the following steps: S1, extending the text material of TextMeshPro, and merging the image material into the text material; S2, the rendering materials of the parent node and the child node all adopt the extended text material; S3, creating a super rendering component, the super rendering component consisting of a grid text component and a grid image component, the grid text component adopts 3D grid text rendering, and the grid image component adopts 3D grid image rendering; S4, the super rendering component merges the text grid on the parent node and the image grid on its child node, and performs batch rendering. The method of the present invention can reduce the number of drawing calls during rendering, save the batch computing consumption of UGUI, improve performance, and meet the rendering requirements of multiple overlapping texts and usage scenarios with high performance requirements.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and in particular to a text-and-image batching method based on TextMeshPro. Background Art

[0002] TextMeshPro is a Unity tool for 2D and 3D text layout and rendering. It supports mixed text and image layout. For images interspersed within text, TextMeshPro renders the images using different materials than the text, using the text as the parent node and the image as the child node. This method, when multiple texts do not overlap, can render all text with just two draw calls (one for text and one for the image), achieving excellent performance. However, when multiple texts overlap, the different materials of the text and images prevent them from being batched together. The number of draw calls required can far exceed two, depending on the number of texts and their overlap. In the worst case, 2N draw calls are required, and as the number of draw calls increases, performance degrades. If the text positions constantly change, the cost of batching the text increases. Therefore, TextMeshPro's inability to batch text and images fails to meet performance requirements in scenarios with multiple overlapping texts. Summary of the Invention

[0003] In order to solve the above problems, the present invention provides a text-image batching method based on TextMeshPro.

[0004] The present invention adopts the following technical solutions:

[0005] A method for combining images and text based on TextMeshPro, comprising the following steps:

[0006] S1. Expand the text material of TextMeshPro and merge the image material into the text material;

[0007] S2. Create a node, set the text as the parent node and the image as the child node, and use the extended text material as the rendering material for both the parent node and the child node.

[0008] S3. Create a super rendering component, wherein the super rendering component is composed of a grid text component and a grid image component. The grid text component uses 3D grid text rendering, and the grid image component uses 3D grid image rendering;

[0009] S4. Mount the super rendering component on the parent node that needs batch rendering. The super rendering component merges the text grid on the parent node and the image grid on its child node, and performs batch rendering.

[0010] Furthermore, the step S1 is specifically as follows:

[0011] S11. Add a vertex data texcoord2. The vertex data texcoord2 includes an x ​​channel and a y channel. When rendering text, the x channel and the y channel are respectively passed 1 and 0; when rendering an image, the x channel and the y channel are respectively passed 0 and 1;

[0012] S12. Create a text attribute set and a picture attribute set, wherein the text attribute set is used to collect the color value of the text, and the picture attribute set is used to collect the color value of the picture in the text;

[0013] S13. Calculate the final color value, which is: final color value = text color value × x + image color value × y.

[0014] Furthermore, the grid text component and the grid image component both include a grid filter and a grid renderer.

[0015] Furthermore, the step S4 is specifically as follows:

[0016] S41, the super rendering component mounts a grid filter and a grid renderer on the parent node;

[0017] S42, merging the text grid and the image grid on each node into a merged grid in the super rendering component;

[0018] S43. The merged grid uses the text material to batch render the text and pictures on each node.

[0019] After adopting the above technical solution, the present invention has the following advantages compared with the background technology:

[0020] The present invention expands the text material so that text and images use the same rendering material, so that they can be batch rendered when text and images are mixed, reducing the number of painting calls during rendering, and both text and images use 3D grids, thus breaking away from the original canvas rendering and realizing independent 3D grid rendering, saving the batch computing consumption of UGUI, improving performance, and meeting the rendering needs of multiple overlapping texts and usage scenarios with high performance requirements. BRIEF DESCRIPTION OF THE DRAWINGS

[0021] Figure 1 Flow chart of the method of the present invention. DETAILED DESCRIPTION

[0022] In order to make the purpose, technical solutions and advantages of the present invention more clearly understood, the present invention will be further described in detail below with reference to the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are only used to explain the present invention and are not intended to limit the present invention.

[0023] Example

[0024] In actual games, each character has a text representing the character's name and an image representing an attribute identifier (such as a health bar, a crown, etc.) above their head. In game scenes, characters are often placed close together, and in this case, these texts and images will overlap. The TextMeshPro tool cannot perform batch rendering in this case, and multiple drawing calls are required. This embodiment discloses a text and image batching method based on TextMeshPro to solve the problem of performance degradation caused by too many drawing calls when multiple texts overlap.

[0025] like Figure 1 As shown in FIG, a method for combining text and images based on TextMeshPro includes the following steps:

[0026] S1. Expand the text material of TextMeshPro and merge the image material into the text material;

[0027] Step S1 is specifically as follows:

[0028] S11. Add a vertex data texcoord2. The vertex data texcoord2 includes an x ​​channel and a y channel. When rendering text, the x channel and the y channel are respectively passed 1 and 0; when rendering an image, the x channel and the y channel are respectively passed 0 and 1;

[0029] S12. Create a text attribute set and a picture attribute set, wherein the text attribute set is used to collect the color value of the text, and the picture attribute set is used to collect the color value of the picture in the text;

[0030] S13. Calculate the final color value, which is: final color value = text color value × x + image color value × y.

[0031] S2. Create a node, and use the text as the parent node and the image as the child node. The rendering material of the parent node and the child node both use the expanded text material. When the text and image are mixed, they can be rendered in batches.

[0032] S3. Create a super rendering component (i.e., TextMeshProRenderer). The super rendering component consists of a mesh text component and a mesh image component. The mesh text component uses 3D mesh text rendering, and the mesh image component uses 3D mesh image rendering. Both the mesh text component and the mesh image component contain a mesh filter and a mesh renderer.

[0033] Among them, the grid image component inherits from the Unity engine's maskable image component (i.e. UnityEngine.UI.MaskableGraphic). The required components are the grid filter (i.e. UnityEngine.MeshFilter) and the grid renderer (i.e. UnityEngine.MeshRenderer), instead of the canvas renderer (i.e. UnityEngine.UI.CanvasRenderer), so that it can be separated from the canvas as an independent 3D grid rendering. The grid image component has all the functions of the UI image component (i.e. UnityEngine.UI.Image); similarly, the grid text component (i.e. TextMeshPro) uses 3D text to realize 3D mesh rendering of text, save the batch calculation of UGUI, and improve performance.

[0034] S4. Mount the super rendering component on the parent node that needs batch rendering. The super rendering component merges the text grid on the parent node and the image grid on its child node, and performs batch rendering.

[0035] Step S4 is specifically as follows:

[0036] S41, the super rendering component mounts a mesh filter and a mesh renderer on the parent node. The mesh renderer selects whether to enable the atlas function as needed during operation. If the atlas function is enabled, batch rendering is performed. If the atlas function is not enabled, text and images are rendered separately without batch rendering. However, if batch rendering is not enabled, the number of drawing calls will be very high.

[0037] S42. After the atlas function is turned on, the text grid and the image grid on each node will be merged into the merged grid in the super rendering component;

[0038] S43, the merged grid of text and image uses the text material to batch render the text and image on each node.

[0039] The above description is merely a preferred embodiment of the present invention, but the scope of protection of the present invention is not limited thereto. Any changes or substitutions that can be easily conceived by a person skilled in the art within the technical scope disclosed in the present invention should be included in the scope of protection of the present invention. Therefore, the scope of protection of the present invention should be based on the scope of protection of the claims.

Claims

1. A method for combining text and images based on TextMeshPro, characterized by: The steps include: S1. Expand the text material of TextMeshPro and merge the image material into the text material; S2. Create a node, set the text as the parent node and the image as the child node, and use the extended text material as the rendering material for both the parent node and the child node. S3. Create a super rendering component, wherein the super rendering component is composed of a grid text component and a grid image component. The grid text component uses 3D grid text rendering, and the grid image component uses 3D grid image rendering. The grid text component and the grid image component both include a grid filter and a grid renderer. S4. Mount the super rendering component on the parent node that needs batch rendering. The super rendering component merges the text grid on the parent node and the image grids on its child nodes, and performs batch rendering. Step S1 is specifically as follows: S11. Add a vertex data texcoord2. The vertex data texcoord2 includes an x ​​channel and a y channel. When rendering text, the x channel and the y channel are respectively passed 1 and 0; when rendering an image, the x channel and the y channel are respectively passed 0 and 1; S12. Create a text attribute set and a picture attribute set, wherein the text attribute set is used to collect the color value of the text, and the picture attribute set is used to collect the color value of the picture in the text; S13. Calculate the final color value, which is: text color value × x + image color value × y. Step S4 is specifically as follows: S41, the super rendering component mounts a grid filter and a grid renderer on the parent node; S42, merging the text grid and the image grid on each node into a merged grid in the super rendering component; S43. The merged grid uses the text material to batch render the text and pictures on each node.

Images