（十）UI Mesh

1.概述

在unity 网格系列的最后来处理一下UGUI的mesh问题。ugui所有的网格mesh默认为四边形（可以通过自定义改为特殊形状，比如圆形圆环等），边长为1，即mesh顶点坐标为四个。由于所有的ui均从Graphic类衍生，所以只要重写虚方法OnPopulateMesh即可。OnPopulateMesh存在两个，入口参数不同，一个时VertexHelper一个时Mesh。入口参数为Mesh的方法已经过失，所以本文主讲VertexHelper生成mesh的方法。如下所示：

    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 操作步骤

新建canvas，并在canvas下新建空的游戏物体，新建一个继承自Graphic脚本并挂载在其上。然后就可以重写OnPopulateMesh方法，并自定义网格。比如可以自定义圆形或者圆环，或者采用ui进行函数曲线的绘制等。

**注意：**在进行网格顶点计算时，要考虑ui的大小，比如概述中顶点坐标对应游戏物体大小为100*100，也可以使用方法GetPixelAdjustedRect()来获取像素大小。

3.2 VertexHelper添加顶点

3.2.1 普通方法

普通方法如概述所示，只要定义顶点，每个顶点的颜色、uv以及三角形即可。颜色可以默认为白色。

3.2.2 顶点编辑

如果要编辑某个顶点信息可以采用PopulateUIVertex方法获取到某个顶点，然后采用SetUIVertex方法重新设置顶点属性。

    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 顶点流方法

顶点流方法是指采用AddUIVertexStream，通过顶点以及三角形的list添加mesh 的方法，如下所示：

   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 添加quad

通过AddUIVertexQuad方法添加四边形，我们只要定义四边形的四个顶点信息，不用定义三角形即可。如下

    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 添加三角形流

直接添加通过顶点list添加，此时会没三个顶点生成一个三角形，不用定义三角形数组，但是list要是三的倍数，否则后续顶点会省略掉。如下

    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);}