This is the 15th day of my participation in the August Text Challenge.More challenges in August

An overview of the

In the process of project development, the Text function of UIGUI is often used to display Text, while the Text function of Unity is a little less, and can only be changed simply. Sometimes, there is no gradient color, which is very inconvenient in the process of project development. Today, WE will expand the function of the Text component. Add a function of color gradient to it, and add a function of shadow along with it. Add a function of color gradient to Text. The column address

Analysis of the

To change the color of a Text to a gradient, the method used here is to change the color of each vertex to achieve the effect of the gradient. Next, we will look at the vertices of the Text in the UGUI.

Get the vertices

First let’s get the UGUI vertices and see their order before we can set the color. Text is the basic UI component in UGUI, as well as Image and RawImage, which inherit from Graphic components. Looking at the source code of Graphic components, it can be found that displaying these UI components is divided into several steps, including

  • Regenerate the list of vertices when component parameters change
  • Gets the component inherited on the current nodeIMeshModifierInterface to modify the generated list of vertices
  • Populate the grid with the generated list of vertices

UGUI Shadow and Outline inherit the IMeshModifier interface to simply copy the list of vertices generated by the UI component several times and then offset the position to achieve the effect of Shadow or Outline. The first step is to inherit BaseMeshEffect, and then we’ll rewrite ModifyMesh to get the vertices. To get a vertex we call GetUIVertexStream as follows

List<UIVertex> vertexBuffers = new List<UIVertex>(); public override void ModifyMesh(VertexHelper vh) { if (! IsActive()) { return; } vh.GetUIVertexStream(vertexBuffers); // Get debug. Log(vertexBuffers.Count); }Copy the code

It’s not enough just to get the vertices and the number of vertices, we can’t see where all these vertices are, so we’re going to have to show these vertices. Two methods are listed below

Method one is displayed in the Scene

Let’s use the OnDrawGizmos method that comes with Untiy to draw the vertices we got above in the Scene. Specifically divided into two steps

  • Convert all vertices to world coordinates
  • throughGizmos.DrawSphereMake a point
</summary> void OnDrawGizmos() {gizmos.color = color.red; // </summary> void OnDrawGizmos() {gizmos.color = color.red; // set color for (int I = 0; i < vertexBuffers.Count; Vector3 targetPosition = transform.TransformPoint(vertexBuffers[I].position); Gizmos.DrawSphere(targetPosition, 5f); }}Copy the code

Vector3: Vector3: Vector3: Vector3: Vector3: Vector3: Vector3: Vector3: Vector3: Vector3: Vector3

Method two displays the grid in Inspector

The method of displaying the grid in Inspector can be implemented directly in ModifyMesh overridden above, after obtaining the vertices. First, define a Mesh

public Mesh mesh = null;
Copy the code

Display the Mesh

If (mesh == null) {mesh = new mesh (); } vh.FillMesh(mesh);Copy the code

conclusion

Using both methods, we can see that a character in a Text valence has six vertices (two of which overlap). Let’s take a look at the effect of method oneMethod 2 Effect

Write in the last

All the shared content is the author used in the daily development process of a variety of small function points, sharing is also a way to review, if there is a bad place to write, please give more advice. Welcome to learn from each other and make progress. The next article will continue to introduce how to implement Text color gradient, source code will also be shared in the next article