[UGUI]Text文字效果

参考链接：

http://www.xuanyusong.com/archives/3471

https://www.cnblogs.com/lyh916/p/9162463.html

https://www.cnblogs.com/zsb517/p/6565446.html

 

0.Text的顶点分布

using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class TestMesh : BaseMeshEffect {

    public override void ModifyMesh(VertexHelper vh)
    {
        List<UIVertex> vertexs = new List<UIVertex>();
        vh.GetUIVertexStream(vertexs);
        for (int i = 0; i < vertexs.Count; i++)
        {
            Debug.LogWarning(vertexs[i].position);
        }

        print(vertexs.Count);
        print(vh.currentIndexCount);
        print(vh.currentVertCount);
    }
}

新建一个text，然后使内容保留至一个字，添加上面的脚本。可以发现，1个字有4个顶点，而顶点的排列如下图。1个字由2个三角形组成，绘制顺序为0-1-2和2-3-0，顺时针绘制。

 

1.渐变效果

using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

[AddComponentMenu("UI/Effects/Gradient")]
public class Gradient : BaseMeshEffect
{
    [SerializeField]
    private Color32 topColor = Color.white;
    [SerializeField]
    private Color32 bottomColor = Color.black;

    public override void ModifyMesh(VertexHelper vh)
    {
        List<UIVertex> vertexs = new List<UIVertex>();
        vh.GetUIVertexStream(vertexs);
        for (int i = 0; i < vertexs.Count;)
        {
            SetVertexColor(vertexs, i, topColor);
            SetVertexColor(vertexs, i + 1, topColor);
            SetVertexColor(vertexs, i + 2, bottomColor);
            SetVertexColor(vertexs, i + 3, bottomColor);
            SetVertexColor(vertexs, i + 4, bottomColor);
            SetVertexColor(vertexs, i + 5, topColor);
            i += 6;
        }
        vh.Clear();
        vh.AddUIVertexTriangleStream(vertexs);
    }

    private void SetVertexColor(List<UIVertex> vertexs, int index, Color32 color)
    {
        UIVertex vertex = vertexs[index];
        vertex.color = color;
        vertexs[index] = vertex;
    }
}

 

2.阴影效果

UGUI自带Shadow脚本，可以下载UGUI源码查看其实现。新建一个Text并添加Shadow组件，将effectDistance距离调大，如下图。其中白字是自身，黑字是阴影效果，可以看到，阴影效果就是将顶点复制一份，然后向某一方向移动位置。

 

3.描边效果

UGUI自带Outline脚本，Outline继承Shadow，换言之，其实现与Shadow类似。新建一个Text并添加Outline组件，将effectDistance距离调大，如下图。其中白字是自身，黑字是描边效果，可以看到，描边效果就是将顶点复制四份，然后向四个方向移动位置。