【游戏开发实战】Unity UGUI制作雷达图/天赋图/属性图/能力图，因为太怕痛就全点了防御力

文章目录

一、前言
二、最终效果
三、原理
四、具体实现
- 1、雷达图背景图
- 2、封装UIPolygon.cs
- 3、制作预设
- 4、测试脚本RadarTest.cs
五、运行测试
六、结束语
七、附录：UIPolygon.cs完整代码

一、前言

点关注不迷路，持续输出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;List<float> datas = new List<float>();void Start(){// 防御力datas.Add(0.92f);// 智力datas.Add(0.31f);// 灵巧datas.Add(0.36f);// 力量datas.Add(0.28f);// 敏捷datas.Add(0.35f);uiPolygon.DrawPolygon(datas);}private void Update(){if(Input.GetMouseButtonDown(0)){for(int i=0,cnt = datas.Count;i<cnt;++i){datas[i] = Random.Range(0f, 1f);}// 重新随机雷达数据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){List<float> finalDatas = new List<float>(datas);sides = finalDatas.Count;// 加上最后一个点，最后一个点与第一个点重合finalDatas.Add(finalDatas[0]);VerticesDistances = finalDatas.ToArray();// 触发重绘SetVerticesDirty();}#endregionvoid Update(){// 根据宽高适配尺寸size = rectTransform.rect.width;if (rectTransform.rect.width > rectTransform.rect.height)size = rectTransform.rect.height;elsesize = 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 }));}}
}