UGUI制作圆形UI

最新推荐文章于 2021-01-04 02:01:31 发布

原创

最新推荐文章于 2021-01-04 02:01:31 发布 · 1.2k 阅读

本文介绍了如何在Unity中使用UGUI制作圆形UI，包括使用Mask的方法及其缺点，以及通过重写Image组件的OnPopulateMesh方法来避免锯齿并减少Draw Call。此外，还详细阐述了如何实现对圆形UI的精确点击响应，通过射线法判断点击位置是否在图形内，提供了一种有效解决点击判断问题的方法。最后提到了UGUI原生支持不规则图形点击响应的解决方案——使用Polygon Collider 2D组件。

UGUI制作圆形UI

源代码

使用Mask来制作

创建两个具有父子关系的Image，父物体添加Mask组件，精灵是一个圆形的遮罩，子物体是要显示的图片。
在这里插入图片描述
这样做有两个坏处：
1.圆形UI的锯齿感非常强烈
2.增加了Draw Call

重写Image组件的OnPopulateMesh方法来实现

我们通过自己计算圆形UI的顶点来实现圆形UI的绘制。当然，这个圆形是通过大量的三角片拼接而成。
toFill就是要绘制这个图形所需要的顶点数据。

    /// <summary>
    /// 圆形由多少个三角块拼成
    /// </summary> 
    [SerializeField]
    private int segements = 100;
    /// <summary>
    /// 显示出来的百分比
    /// </summary>
    [SerializeField]
    private float percent = 1;
    private List<Vector2> _vertexList = new List<Vector2>();
    protected override void OnPopulateMesh(VertexHelper toFill)
    {
   
   
        toFill.Clear();
        AddVertex(toFill);

        for(int i = 1; i <= segements; i++)
        {
   
   
            toFill.AddTriangle(i, 0, i + 1);
        }
    }

我们通过AddVertex来想toFill中添加顶点数据，再通过AddTriangle来进行三角形的绘制。

    private void AddVertex(VertexHelper toFill)
    {
   
   
        //获得Rect长宽和需要显示为亮的三角片的数量
        float width = rectTransform.rect.width;
        float height = rectTransform.rect.height;
        int whiteSegement = (int)(segements * percent);

        //计算原点的uv和uv与长宽的换算关系
        Vector4 uv = overrideSprite != null ? DataUtility.GetOuterUV(overrideSprite) : Vector4.