（十）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);
    }