Unity 自己使用顶点描绘圆形UI图片

2020-09-10

 

在游戏的UI中，圆形图片的需求是很高的，但是，在Unity中想要实现圆形UI，一般的做法是是使用圆形Mask（遮罩），但是使用Mask的缺点很明显，主要有三点:

 

1.比较麻烦，使游戏对象管理变得更复杂

2.效果不佳（质量难以把控），比如说有锯齿

3.性能问题

 

那么来实现自己的圆形UI效果是很重要的

 

效果：

 

步骤：

在Canvas上创建一个空物体

新建脚本 CircleImage.cs 将CircleImage类继承Image类

然后接下来则是具体的思路：

 

 完成！将组件添加到空对象上，并添加想要看的精灵图片，效果如开头所示。

 

 

 完整脚本CircleImage.cs（代替Image）：

using UnityEngine;
using UnityEngine.Sprites;
using UnityEngine.UI;

public class CircleImage : Image
{
    /// <summary>
    /// 圆形由多少个三角形组成
    /// </summary>
    private int segement = 100;

    protected override void OnPopulateMesh(VertexHelper vh)
    {
        vh.Clear();

        float width = rectTransform.rect.width;
        float height = rectTransform.rect.height;

        Vector4 uv = overrideSprite != null ? DataUtility.GetOuterUV(overrideSprite) : Vector4.zero;
        float uv_width = uv.z - uv.x;
        float uv_height = uv.w - uv.y;
        Vector2 uvCenter = new Vector2(uv_width * 0.5f, uv_height * 0.5f);
        Vector2 convertRatio = new Vector2(uv_width / width, uv_height / height);

        float radian = 2 * Mathf.PI / segement;
        float radius = width * 0.5f;

        UIVertex origin = new UIVertex();
        origin.color = color;
        origin.position = Vector3.zero;
        origin.uv0 = new Vector2(origin.position.x * convertRatio.x + uvCenter.x, origin.position.y * convertRatio.y + uvCenter.y);
        vh.AddVert(origin);

        int vertexCount = segement + 1;
        float curRadian = 0;
        for (int i = 0; i < vertexCount; i++)
        {
            float x = Mathf.Cos(curRadian) * radius;
            float y = Mathf.Sin(curRadian) * radius;
            curRadian += radian;

            UIVertex vertexTemp = new UIVertex();
            vertexTemp.color = color;
            vertexTemp.position = new Vector2(x, y);
            vertexTemp.uv0 = new Vector2(vertexTemp.position.x * convertRatio.x + uvCenter.x, vertexTemp.position.y * convertRatio.y + uvCenter.y);
            vh.AddVert(vertexTemp);
        }

        int id = 1;
        for (int i = 0; i < segement; i++)
        {
            vh.AddTriangle(id, 0, id + 1);
            id++;
        }
    }
}