Unity3D UGUI 渐变效果

今天我们利用BaseMeshEffect来实现 UGUI的Text和Image 渐变。
先上效果

屏幕快照 2019-07-12 下午10.13.14.png 屏幕快照 2019-07-12 下午10.13.56.png

UGUI的Image、Text等都是Mesh 网格，这个可以通过选择wireframe显示方式来查看，如下图，每个字符都是一个网格。

截图.png.jpeg

渐变效果代码：

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

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

    public override void ModifyMesh(VertexHelper vh)
    {
        if (!IsActive())
        {
            return;
        }

        var count = vh.currentVertCount;
        if (count == 0)
            return;

        var vertexs = new List<UIVertex>();
        for (var i = 0; i < count; i++)
        {
            var vertex = new UIVertex();
            vh.PopulateUIVertex(ref vertex, i);
            vertexs.Add(vertex);
        }

        var topY = vertexs[0].position.y;
        var bottomY = vertexs[0].position.y;

        for (var i = 1; i < count; i++)
        {
            var y = vertexs[i].position.y;
            if (y > topY)
            {
                topY = y;
            }
            else if (y < bottomY)
            {
                bottomY = y;
            }
        }

        var height = topY - bottomY;
        for (var i = 0; i < count; i++)
        {
            var vertex = vertexs[i];

            var color = Color32.Lerp(bottomColor, topColor, (vertex.position.y - bottomY) / height);

            vertex.color = color;

            vh.SetUIVertex(vertex, i);
        }
    }
}

BaseMeshEffect可以操作这些网格数据。所以我可以通过它来实现一些效果。

BaseMeshEffect是用于修改生成的网格的特效类的抽象基类，Outline和Shadow等都是其衍生类或衍生类的衍生类。

其定义如下：

public abstract class BaseMeshEffect : UIBehaviour, IMeshModifier

BaseMeshEffect实现了接口IMeshModifier，所以其内部实现了方法ModifyMesh(VertexHelper verts)：

public interface IMeshModifier

{

    [Obsolete("use IMeshModifier.ModifyMesh (VertexHelper verts) instead", false)]

    void ModifyMesh(Mesh mesh);

    void ModifyMesh(VertexHelper verts);

}

IMeshModifier核心功能是对网格的修改，在Graphic的DoMeshGeneration()中会遍历所有实现了IMeshModifier接口的组件并调用其ModifyMesh(VertexHelper verts)方法，以达到修改网格的目的：

private void DoMeshGeneration()

{

    if (rectTransform != null && rectTransform.rect.width >= 0 && rectTransform.rect.height >= 0)

        OnPopulateMesh(s_VertexHelper);

    else

        s_VertexHelper.Clear(); // clear the vertex helper so invalid graphics dont draw.

    var components = ListPool<Component>.Get();

    GetComponents(typeof(IMeshModifier), components);

    for (var i = 0; i < components.Count; i++)

        ((IMeshModifier)components[i]).ModifyMesh(s_VertexHelper);

    ListPool<Component>.Release(components);

    s_VertexHelper.FillMesh(workerMesh);

    canvasRenderer.SetMesh(workerMesh);

}

在BaseMeshEffect中，ModifyMesh(VertexHelper verts)是抽象虚方法，因此，继承BaseMeshEffect的类必须覆写ModifyMesh(VertexHelper vh)。以下是UGUI中BaseMeshEffect的各个衍生类及继承关系：

public class PositionAsUV1 : BaseMeshEffect

public class Shadow : BaseMeshEffect

public class Outline : Shadow

Unity技术交流 微信公众号 UnityAsk，QQ群：891920228