Unity開發筆記-UGUI Text通過修改頂點顏色實現打字機效果

實現效果：

0x0 兩種方法

打字機效果一般是通過substring截斷文字的方法實現的，這種方法簡便，但字符串substring操作會產生大量臨時字符串造成gc壓力。
在此基礎上的改進方法是想辦法改成0gc。
另一種方法是改變頂點顏色屬性，這種方法可以實現單個文字的精確控制，比如讓某幾個文字alpha漸變效果，相比上面的方法更靈活，另外也可以實現單個文字的跳動效果。
下面是實現的過程

Ox1 實現BaseMeshEffect的子類

這個功能的核心原理是繼承BaseMeshEffect，實現ModifyMesh(VertexHelper vh)的方法，通過這個方法修改單個文字的頂點數據來實現。

  `public class UI_Text_Single_Char_Color : BaseMeshEffect
  {
public override void ModifyMesh(VertexHelper vh)
{
    //這里實現我們的功能
}
  }`

Ox2 第一步，改變第一個字符的顏色

我們來實現最簡單的一步，這是我們實現所有功能的起點

  `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即可

  `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