使用VertexHelper自定义控件之ColorBar（一）

使用VertexHelper自定义控件之ColorBar（一）

一、VertexHelper简介

在自定义控件之前我们必须先了解VertexHelper（顶点辅助器）这个类。UGUI是图形学渲染和射线检测这两个技术结合的典型例子。图形学渲染来处理UI的显示，射线检测用来交互。

1. 所有的渲染对象都是由网格（mesh）构成，mesh的绘制单元是图元（点、线、三角形）。意思就是所有的游戏对象都是在绘制一些点、线、三角形的集合。
2. 顶点数据中最主要的是位置、颜色、纹理坐标、法线等。也就是说顶点中保存着其位置、颜色、纹理坐标、法线信息等。
3. 贴纹理是指，将一张纹理（可以称为图片），根据纹理坐标，贴在模型上面。就好比同一个模型人穿上了不同的衣服。纹理坐标指的是根据坐标将图片信息覆盖在mesh表面，就相当于袖子就贴在手臂上，裤子就贴在腿上

UGUI提供了构建顶点、三角形的类，那就是VertexHelper类。通过这个类，我们可以创建顶点，构建三角形，填充到一张mesh上，然后用MeshRender渲染到屏幕上，实际上我们可以直接操作mesh类添加顶点、三角形等操作，这里的vertexhelper只是UGUI与mesh之间的一座桥梁。

二、VertexHelper简单实践

首先我们先建一个空对象，然后给对象添加MeshFilter组件，用来添加mesh（这里的mesh就是我们使用vertexhelper自定义得到的），还需要添加MeshRender组件，用来渲染mesh，使其能够在屏幕中显示。

然后给物体创建脚本用来自定义mesh：

public class CreateRectangle : MonoBehaviour
{
    // Use this for initialization
    void Start()
    {
        VertexHelper vp = new VertexHelper();
        vp.Clear();
        //这里采用的添加顶点函数，函数参数分别对应了顶点位置，顶点颜色，纹理坐标
        vp.AddVert(new Vector3(0, 0, 0), Color.red, new Vector2(0, 0));
        vp.AddVert(new Vector3(0, 1, 0), Color.green, new Vector2(0, 1));
        vp.AddVert(new Vector3(1, 1, 0), Color.blue, new Vector2(1, 1));
        vp.AddVert(new Vector3(1, 0, 0), Color.cyan, new Vector2(1, 0));


        vp.AddTriangle(0, 1, 2);
        vp.AddTriangle(2, 3, 0);

        var meshFilter = this.GetComponent<MeshFilter>();
        Mesh mesh = new Mesh();
        vp.FillMesh(mesh);
        meshFilter.mesh = mesh;
    }
}

上例中，我们用4个顶点构造出矩形的两个三角形，当然我们可以构造更多的三角形去显示一个矩形，但是这样不仅显得多余，而且对于计算机来说计算量就会上升。同时我们还要注意一点，unity默认是只渲染物体的正面，背面是不渲染的，这里就涉及到构造三角形的顺序。在unity中以顺时针方向构造三角形，这个三角形就是正面。最后我们将vertexhelper对象填充到一个mesh上，并将这个mesh赋值给空物体的meshfilter上。

运行游戏后我们可以看到上面的界面，那么问题来了呀，为什么是一个紫红色的矩形？？？我们来看官方的解释：

意思是大部分的shader都不会显示顶点颜色，用一个可以可以显示顶点颜色的shader比如，particle shader去观察顶点的颜色。我们自定义一个Material，然后给它选择一个Shader。

然后再将MeshRender的Material设置为我们自定义的Material，运行游戏我们就可以看到我们想要的颜色。

矩形的四个顶点是我们设定的，中间的颜色是差值得到的。当然我们可以用Material中的颜色或者一张图片，给mesh贴上纹理，就相当于给mesh穿上纯色或者有图案的衣服。

其实上面的写法不是创建一个UI元素，而是一个游戏物体。

三、OnPopulateMesh函数

当一个UI元素生成顶点数据时会调用OnPopulateMesh(VertexHelper vh)函数，我们可以在这个函数中修改顶点的数据或者获取顶点的数据。

创建一个空的UI元素，然后给这个元素创建一个脚本。

该脚本继承自Graphic，然后我们重写OnPopulateMesh方法：

public class CreateRectangle : Graphic
{
    protected override void OnPopulateMesh(VertexHelper vh)
    {
        vh.Clear();
        //这里采用的添加顶点函数，函数参数分别对应了顶点位置，顶点颜色，纹理坐标
        vh.AddVert(new Vector3(0, 0, 0), Color.red, new Vector2(0, 0));
        vh.AddVert(new Vector3(0, 100, 0), Color.green, new Vector2(0, 1));
        vh.AddVert(new Vector3(100, 100, 0), Color.blue, new Vector2(1, 1));
        vh.AddVert(new Vector3(100, 0, 0), Color.cyan, new Vector2(1, 0));

        vh.AddTriangle(0, 1, 2);
        vh.AddTriangle(2, 3, 0);
    }
}

注意，这里的坐标单位是屏幕坐标单位。

AddVert

添加一个顶点到VertexHelper缓存中

AddTriangle

添加一个三角形到VertexHelper缓存中

属性currentIndexCount 和currentVertCount

• currentVertCount表示VertexHelper结构中有几个顶点
• currentIndexCount表示VertexHelper结构中有几个顶点索引（为了绘制三角形，同一个顶点可能会使用多次，这里会统计使用多次的情况）

PopulateUIVertex函数

返回指定索引的顶点数据，返回的顶点数据会填充UIVertex数据结构：

UIVertex vertex = new UIVertex();
vh.PopulateUIVertex(ref vertex, 2);

SetUIVertex函数

设置一个顶点的数据:

//得到第三个顶点(顶点索引为2，从0开始)的颜色
        UIVertex vertex = new UIVertex();
        vh.PopulateUIVertex(ref vertex, 2);

        //设置颜色为黄色
        vertex.color = Color.yellow;
        vh.SetUIVertex(vertex, 2);

AddUIVertexQuad(UIVertex[] verts)函数

增加一个长方形：

    protected override void OnPopulateMesh(VertexHelper vh)
    {
        vh.Clear();
        UIVertex[] verts = new UIVertex[4];
        verts[0].position = new Vector3(0, 0);
        verts[0].color = Color.red;
        verts[0].uv0 = Vector2.zero;

        verts[1].position = new Vector3(0, 100);
        verts[1].color = Color.green;
        verts[1].uv0 = Vector2.zero;

        verts[2].position = new Vector3(100, 100);
        verts[2].color = Color.black;
        verts[2].uv0 = Vector2.zero;

        verts[3].position = new Vector3(100, 0);
        verts[3].color = Color.blue;
        verts[3].uv0 = Vector2.zero;

        vh.AddUIVertexQuad(verts);
    }

AddUIVertexStream(List verts, List indices);

这个方法向VertexHelper中批量增加顶点数据，第一个参数为顶点数据，第二个参数为构成图元的顶点索引目录

假如我们要绘制两个三角形,加入我们有两个三角形，顶点索引分别为(0,1,2),(2,3,0),那么我们的indices应该定义为

List indices = new List() { 0, 1, 2, 2, 3, 0 };

AddUIVertexTriangleStream(List verts)函数

这个方法向VertexHelper中批量增加三角形顶点数据,参数的长度必须是三的倍数

GetUIVertexStream(List stream)函数

获取当前VertexHelper中的所有顶点的信息

UpdateGeometry();

当需要重新调用OnPopulateMeshhan函数的时候调用。所以如果我们想修改顶点数据（顶点数据不放在函数中，放在类中），则可以在修改顶点数据后调用**UpdateGeometry（）方法。

注：新发现，UGUI采用脏标记系统，只要控件被标记为“脏”状态，就会强制刷新一遍，在每次改变了顶点或者纹理后，调用SetVerticesDirty() 或 SetMaterialDirty()即可。

四、ModifyMesh(VertexHelper vh)函数

这个函数是继承自BaseMeshEffect类的，用法与上文基本一致。