Unity开发笔记-UGUI Text通过修改顶点颜色实现打字机效果

实现效果：

0x0 两种方法#

打字机效果一般是通过substring截断文字的方法实现的，这种方法简便，但字符串substring操作会产生大量临时字符串造成gc压力。
在此基础上的改进方法是想办法改成0gc。
另一种方法是改变顶点颜色属性，这种方法可以实现单个文字的精确控制，比如让某几个文字alpha渐变效果，相比上面的方法更灵活，另外也可以实现单个文字的跳动效果。
下面是实现的过程

Ox1 实现BaseMeshEffect的子类#

这个功能的核心原理是继承BaseMeshEffect，实现ModifyMesh(VertexHelper vh)的方法，通过这个方法修改单个文字的顶点数据来实现。

Copy
  `public class UI_Text_Single_Char_Color : BaseMeshEffect
  {
public override void ModifyMesh(VertexHelper vh)
{
    //这里实现我们的功能
}
  }`

Ox2 第一步，改变第一个字符的颜色#

我们来实现最简单的一步，这是我们实现所有功能的起点

Copy
  `public class UI_Text_Single_Char_Color : BaseMeshEffect
  {
\[SerializeField\]
private Color _myColor;
private UIVertex vertex = new UIVertex();
public override void ModifyMesh(VertexHelper vh)
{
    int vertexIndex = 0;
    //一个字符有4个顶点构成
    int vCount = 4;
    for (int j = 0; j < vCount; j++)
        if (vertexIndex < vh.currentVertCount)
        {
            vh.PopulateUIVertex(ref vertex, vertexIndex);
            vertex.color = _myColor;
            vh.SetUIVertex(vertex, vertexIndex);
        }
        vertexIndex++;
    }
}
  }`

我们通过VertexHelper的PopulateUIVertex方法，指定顶点索引得到UIVertex，通过设置UIVertex的color改变颜色，再通过VertexHelper的SetUIVertex设置回去，从而改变了顶点的颜色属性。一个字符由2个三角形组成一个面片，因此有4个顶点（UIVertex），6个索引。

效果如下：

将vCount设置为2，只改变2个顶点颜色，就能得到一个渐变的效果

0x3 改变多个#

有了上面的思路，我们可以推广到多个字符，我们得到text内字符数量，设置一个index，大于index的alpha设置为0即可

Copy
  `public class UI_Text_Multi_Char_Color : BaseMeshEffect
  {
\[SerializeField\]
private Color _myColor;
\[SerializeField\]
private int _index;
private UIVertex vertex = new UIVertex();
public override void ModifyMesh(VertexHelper vh)
{
    //文本长度
    int charLen = this.GetComponent<Text>().text.Length;
    int vertexIndex = 0;
    for (int i = 0; i < charLen; i++)
    {
        //一个字符有4个顶点构成
        int vCount = 4;
        for (int j = 0; j < vCount; j++)
        {
            if (vertexIndex < vh.currentVertCount)
            {
                vh.PopulateUIVertex(ref vertex, vertexIndex);
                Color c = _myColor;
                c.a = i <= _index ? 1 : 0;
                vertex.color = c;
                vh.SetUIVertex(vertex, vertexIndex);
            }
            vertexIndex++;
        }
    }
      }
  }`

通过改变index，我们成功实现了打字机效果。

0x4 支持RichText#

长度问题#

上面代码中，获取文字长度在RichText下是不正确的，试试<color=green>green，长度值返回的是26而不是5
我们可以利用GetUIVertexStream得到所有文字的顶点数据，将这个长度除以6，就是真正渲染的文字数量

int totalChars = stream.Count / 6;

字体颜色问题#

富文本通过标签决定文字颜色的，因此需要先确定每个字会是什么颜色。

未完待续...

参考资料：
https://www.jianshu.com/p/6090a65ee789
https://medium.com/@chsxf/unity-webgl-making-an-efficient-typewriter-effect-946560fd2b6a
http://blog.sqstudio.com/?p=1270