Unity5的uGUI中实现文字渐变效果(Gradient)

代码以下:ide

using System.Collections;
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)
    {
        if (!IsActive()) {
            return;
        }

        var vertexList = new List<UIVertex>();
        vh.GetUIVertexStream(vertexList);
        int count = vertexList.Count;
        
        ApplyGradient(vertexList, 0, count);
        vh.Clear();
        vh.AddUIVertexTriangleStream(vertexList);
    }

    private void ApplyGradient(List<UIVertex> vertexList, int start, int end)
    {
        float bottomY = vertexList[0].position.y;
        float topY = vertexList[0].position.y;
        for (int i = start; i < end; ++i) {
            float y = vertexList[i].position.y;
            if (y > topY) {
                topY = y;
            } else if (y < bottomY) {
                bottomY = y;
            }
        }

        float uiElementHeight = topY - bottomY;
        for (int i = start; i < end; ++i) {
            UIVertex uiVertex = vertexList[i];
            uiVertex.color = Color32.Lerp(bottomColor, topColor, (uiVertex.position.y - bottomY)/uiElementHeight);
            vertexList[i] = uiVertex;
        }
    }
}

主要参考了雨凇的文章和其下的回复。  这里额外说明一个关键点就是Unity的uGUI的特殊效果的处理都是基于顶点的,它并非专门为字体写一个阴影、描边、渐变的处理,而是用顶点的处理模拟了其效果。因此若是文字同时有阴影(描边)和渐变的时候,要注意脚本的添加顺序。 应该先添加渐变的脚本,而后再添加描边的脚本,不然按照代码逻辑来处理,渐变的顶点处理会把描边的顶点颜色也都给修改了,也就是说没有描边效果了。