Unity UGUI制作雷達圖/天賦圖/屬性圖/能力圖，因為太怕痛就全點了防御力

一、前言

點關注不迷路，持續輸出Unity干貨文章，

嗨，大家好，我是新發，
不知道大家有沒有看過這部影片片《因為太怕痛就全點了防御力》：


女主在好友理沙的引誘之下，開始玩起最新的VRMMO 《NewWorldOnline》，因為太怕痛，所以全點了防御力，
劇情挺有意思的，大家感興趣的話可以去看下這部影片片，
言歸正傳，今天我要講的，就是如何使用Unity UGUI制作雷達圖（或者天賦圖/屬性圖/能力圖），

二、最終效果

本文Demo工程已上傳到CodeChina，感興趣的同學可自行下載學習，
地址：https://codechina.csdn.net/linxinfa/UnityUGUIPolygonRadarGraphicDemo
注：我使用的Unity版本：2020.2.7f1c1 (64-bit)，

三、原理

在UGUI中，不管是RawImage、Image還是Text，它們都是繼承MaskableGraphic的，而MaskableGraphic又是繼承Graphic的，在Graphic中有個OnPopulateMesh方法，

protected virtual void OnPopulateMesh(VertexHelper vh);

引數是VertexHelper，我們可以通過VertexHelper添加頂點，從而實作多邊形的繪制，
畫成圖就是這樣子：

四、具體實作

1、雷達圖背景圖

首先，我們先制作雷達背景圖，如下：

匯入Unity工程中：

2、封裝UIPolygon.cs

封裝UIPolygon.cs腳本，它繼承MaskableGraphic，重寫它的OnPopulateMesh方法，
完整代碼見文章末尾，

3、制作預設

制作一個雷達圖預設，如下：

Hierarchy層級視圖如下：

其中UIPolygon節點掛CanvasRenderer組件和UIPolygon組件，

其中UIPolygon組件相關的引數設定如下：

4、測驗腳本RadarTest.cs

寫一個測驗腳本RadarTest.cs，掛在Canvas節點上，并賦值成員變數：

RadarTest.cs代碼如下：

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

/// <summary>
/// 測驗雷達圖
/// </summary>
public class RadarTest : MonoBehaviour
{
    public UIPolygon uiPolygon;
    
    void Start()
    {
        List<float> datas = new List<float>();
        // 防御力
        datas.Add(0.92f);
        // 智力
        datas.Add(0.31f);
        // 靈巧
        datas.Add(0.36f);
        // 力量
        datas.Add(0.28f);
        // 敏捷
        datas.Add(0.35f);
        uiPolygon.DrawPolygon(datas);
    }
}

五、運行測驗

運行Unity，測驗效果如下：

我們可以在Inspector面板看到我們通過代碼設定的頂點資料生效了（注意第5個頂點是與第0個頂點重合的）：

我們可以手動拖拉這些頂點，效果如下：

六、結束語

完畢，
喜歡Unity的同學，不要忘記點擊關注，如果有什么Unity相關的技術難題，也歡迎留言或私信~

七、附錄：UIPolygon.cs完整代碼

UIPolygon.cs代碼如下：

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

/// <summary>
/// UI多邊形
/// </summary>
public class UIPolygon : MaskableGraphic
{
    [SerializeField]
    Texture m_Texture;
    /// <summary>
    /// 填充
    /// </summary>
    public bool fill = true;

    /// <summary>
    /// 邊數
    /// </summary>
    [Range(3, 360)]
    public int sides = 3;
    /// <summary>
    /// 旋轉角度
    /// </summary>
    [Range(0, 360)]
    public float rotation = 0;
    /// <summary>
    /// 頂點陣列
    /// </summary>
    [Range(0, 1)]
    public float[] VerticesDistances = new float[3];

    private float size = 0;

    public override Texture mainTexture
    {
        get
        {
            return m_Texture == null ? s_WhiteTexture : m_Texture;
        }
    }

    public Texture texture
    {
        get
        {
            return m_Texture;
        }
        set
        {
            if (m_Texture == value) return;
            m_Texture = value;
            SetVerticesDirty();
            SetMaterialDirty();
        }
    }
    #region 提供外部的介面
    public void DrawPolygon(int _sides)
    {
        sides = _sides;
        VerticesDistances = new float[_sides + 1];
        for (int i = 0; i < _sides; i++) VerticesDistances[i] = 1;
    }

    public void DrawPolygon(List<float> datas)
    {
        sides = datas.Count;
        // 加上最后一個點，最后一個點與第一個點重合
        datas.Add(datas[0]);
        VerticesDistances = datas.ToArray();
    }
    #endregion

    void Update()
    {
        // 根據寬高適配尺寸
        size = rectTransform.rect.width;
        if (rectTransform.rect.width > rectTransform.rect.height)
            size = rectTransform.rect.height;
        else
            size = rectTransform.rect.width;
    }

    protected UIVertex[] SetVertexs(Vector2[] vertices, Vector2[] uvs)
    {
        UIVertex[] vbo = new UIVertex[4];
        for (int i = 0; i < vertices.Length; i++)
        {
            var vert = UIVertex.simpleVert;
            vert.color = color;
            vert.position = vertices[i];
            vert.uv0 = uvs[i];
            vbo[i] = vert;
        }
        return vbo;
    }

    /// <summary>
    /// 重寫OnPopulateMesh方法
    /// </summary>
    /// <param name="vh"></param>
    protected override void OnPopulateMesh(VertexHelper vh)
    {
        vh.Clear();
        Vector2 prevX = Vector2.zero;
        Vector2 prevY = Vector2.zero;
        Vector2 uv0 = new Vector2(0, 0);
        Vector2 uv1 = new Vector2(0, 1);
        Vector2 uv2 = new Vector2(1, 1);
        Vector2 uv3 = new Vector2(1, 0);
        Vector2 pos0;
        Vector2 pos1;
        Vector2 pos2;
        Vector2 pos3;
        float degrees = 360f / sides;
        int vertices = sides + 1;
        if (VerticesDistances.Length != vertices)
        {
            VerticesDistances = new float[vertices];
            for (int i = 0; i < vertices - 1; i++) VerticesDistances[i] = 1;
        }
        // 最后一個頂點，也即是第一個頂點
        VerticesDistances[vertices - 1] = VerticesDistances[0];
        for (int i = 0; i < vertices; i++)
        {
            float outer = -rectTransform.pivot.x * size * VerticesDistances[i];
            float inner = -rectTransform.pivot.x * size * VerticesDistances[i];
            float rad = Mathf.Deg2Rad * (i * degrees + rotation);
            float c = Mathf.Cos(rad);
            float s = Mathf.Sin(rad);
            uv0 = new Vector2(0, 1);
            uv1 = new Vector2(1, 1);
            uv2 = new Vector2(1, 0);
            uv3 = new Vector2(0, 0);
            pos0 = prevX;
            pos1 = new Vector2(outer * c, outer * s);
            if (fill)
            {
                pos2 = Vector2.zero;
                pos3 = Vector2.zero;
            }
            else
            {
                pos2 = new Vector2(inner * c, inner * s);
                pos3 = prevY;
            }
            prevX = pos1;
            prevY = pos2;
            vh.AddUIVertexQuad(SetVertexs(new[] { pos0, pos1, pos2, pos3 }, new[] { uv0, uv1, uv2, uv3 }));
        }
    }
}