1 Overview
At the end of the unity grid series, let's deal with the mesh problem of UGUI. All the grid meshes of ugui are quadrilateral by default, and the side length is 1, that is, the mesh vertex coordinates are four. Since all ui are derived from the Graphic class, just rewrite the virtual method OnPopulateMesh. There are two OnPopulateMesh with different entry parameters, one is VertexHelper and the other is Mesh. The method whose entry parameter is Mesh is already in error, so this article focuses on the method of generating mesh by VertexHelper. As follows:
protected override void OnPopulateMesh(VertexHelper vh)
{
base.OnPopulateMesh(vh);
vh.Clear();
vh.AddVert(new Vector3(-50,-50), Color.white, new Vector2(0, 0));
vh.AddVert(new Vector3(50, -50), Color.red, new Vector2(1, 0));
vh.AddVert(new Vector3(50, 50), Color.red, new Vector2(1, 1));
vh.AddVert(new Vector3(-50, 50), Color.white, new Vector2(0, 1));
vh.AddTriangle(0, 1, 2);
vh.AddTriangle(0, 2, 3);
}
2. UI Mesh
2.1 Operation steps
Create a new canvas, and create an empty game object under the canvas, create a new one inherited from the Graphic script and mount it on it. Then you can override the OnPopulateMesh method and customize the grid. For example, you can customize circles or rings, or use ui to draw function curves, etc.
**Note:** When calculating the vertices of the grid, the size of the ui should be considered. For example, the size of the game object corresponding to the vertex coordinates in the overview is 100*100. You can also use the method GetPixelAdjustedRect() to obtain the pixel size.
3.2 VertexHelper adds vertices
3.2.1 Common methods
The general method is as shown in the overview, as long as you define the vertices, the color, uv and triangle of each vertex. The color can default to white.
3.2.2 Vertex Editing
If you want to edit a vertex information, you can use the PopulateUIVertex method to obtain a vertex, and then use the SetUIVertex method to reset the vertex attributes.
void CreateMeshRegular(VertexHelper vh)
{
Rect size = GetPixelAdjustedRect();
vh.AddVert(new Vector3(-0.5f * size.width, -0.5f * size.height), Color.white, new Vector2(0, 0));
vh.AddVert(new Vector3(0.5f * size.width, -0.5f * size.height), Color.red, new Vector2(1, 0));
vh.AddVert(new Vector3(0.5f * size.width, 0.5f * size.height), Color.red, new Vector2(1, 1));
vh.AddVert(new Vector3(-0.5f * size.width, 0.5f * size.height), Color.white, new Vector2(0, 1));
vh.AddTriangle(0, 1, 2);
vh.AddTriangle(0, 2, 3);
UIVertex selectedUIVertex = new UIVertex();
vh.PopulateUIVertex(ref selectedUIVertex, 2);
selectedUIVertex.color = Color.green;
vh.SetUIVertex(selectedUIVertex, 2);
}
3.2.3 Vertex Flow Method
The vertex stream method refers to the method of adding mesh through the list of vertices and triangles by using AddUIVertexStream, as follows:
void CreateMeshByVertexStream(VertexHelper vh)
{
Rect size = GetPixelAdjustedRect();
UIVertex vertices0 = new UIVertex();
vertices0.position = new Vector3(-0.5f * size.width, -0.5f * size.height);
vertices0.color = Color.blue;
vertices0.uv0 = new Vector2(0, 0);
UIVertex vertices1 = new UIVertex();
vertices1.position = new Vector3(0.5f * size.width, -0.5f * size.height);
vertices1.color = Color.red;
vertices1.uv0 = new Vector2(1, 0);
UIVertex vertices2 = new UIVertex();
vertices2.position = new Vector3(0.5f * size.width, 0.5f * size.height);
vertices2.color = Color.red;
vertices2.uv0 = new Vector2(1, 1);
UIVertex vertices3 = new UIVertex();
vertices3.position = new Vector3(-0.5f * size.width, 0.5f * size.height);
vertices3.color = Color.white;
vertices3.uv0 = new Vector2(0, 1);
List<UIVertex> vertices = new List<UIVertex>()
{
vertices0,vertices1,vertices2,vertices3
};
List<int> triangles = new List<int>()
{
0,1,2,0,2,3
};
vh.AddUIVertexStream(vertices, triangles);
}
3.2.4 Add quads
To add a quadrilateral through the AddUIVertexQuad method, we only need to define the four vertex information of the quadrilateral without defining the triangle. as follows
void CreateMeshByQuad(VertexHelper vh)
{
Rect size = GetPixelAdjustedRect();
UIVertex[] vertices0= new UIVertex[4];
vertices0[0].position = new Vector3(-0.5f * size.width, -0.5f * size.height);
vertices0[0].color = Color.white;
vertices0[0].uv0 = new Vector2(0, 0);
vertices0[1].position = new Vector3(0.5f * size.width, -0.5f * size.height);
vertices0[1].color = Color.red;
vertices0[1].uv0 = new Vector2(1, 0);
vertices0[2].position = new Vector3(0.5f * size.width, 0.5f * size.height);
vertices0[2].color = Color.red;
vertices0[2].uv0 = new Vector2(1, 1);
vertices0[3].position = new Vector3(-0.5f * size.width, 0.5f * size.height);
vertices0[3].color = Color.white;
vertices0[3].uv0 = new Vector2(0, 1);
UIVertex[] vertices1 = new UIVertex[4];
vertices1[0].position = new Vector3(-0.5f * size.width, 0.5f * size.height);
vertices1[0].color = Color.white;
vertices1[0].uv0 = new Vector2(0, 0);
vertices1[1].position = new Vector3(0.5f * size.width, 0.5f * size.height);
vertices1[1].color = Color.red;
vertices1[1].uv0 = new Vector2(1, 0);
vertices1[2].position = new Vector3(0.5f * size.width, 1.5f * size.height);
vertices1[2].color = Color.red;
vertices1[2].uv0 = new Vector2(1, 1);
vertices1[3].position = new Vector3(-0.5f * size.width, 1.5f * size.height);
vertices1[3].color = Color.white;
vertices1[3].uv0 = new Vector2(0, 1);
vh.AddUIVertexQuad(vertices0);
vh.AddUIVertexQuad(vertices1);
}
3.2.5 Add triangle flow
Add directly through the vertex list. At this time, there will be no three vertices to generate a triangle. There is no need to define a triangle array, but if the list is a multiple of three, otherwise the subsequent vertices will be omitted. as follows
void CreateMeshByTriangleStream(VertexHelper vh)
{
Rect size = GetPixelAdjustedRect();
UIVertex vertices0 = new UIVertex();
vertices0.position = new Vector3(-0.5f * size.width, -0.5f * size.height);
vertices0.color = Color.blue;
vertices0.uv0 = new Vector2(0, 0);
UIVertex vertices1 = new UIVertex();
vertices1.position = new Vector3(0.5f * size.width, -0.5f * size.height);
vertices1.color = Color.red;
vertices1.uv0 = new Vector2(1, 0);
UIVertex vertices2 = new UIVertex();
vertices2.position = new Vector3(0.5f * size.width, 0.5f * size.height);
vertices2.color = Color.red;
vertices2.uv0 = new Vector2(1, 1);
UIVertex vertices3 = new UIVertex();
vertices3.position = new Vector3(-0.5f * size.width, 0.5f * size.height);
vertices3.color = Color.white;
vertices3.uv0 = new Vector2(0, 1);
UIVertex vertices4 = new UIVertex();
vertices4.position = new Vector3(1.5f * size.width, -0.5f * size.height);
vertices4.color = Color.blue;
vertices4.uv0 = new Vector2(0, 0);
List<UIVertex> vertexList = new List<UIVertex>()
{
vertices0,vertices1,vertices2,vertices1,vertices4,vertices2
};
vh.AddUIVertexTriangleStream(vertexList);
}