点关注不迷路,持续输出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
添加顶点,从而实现多边形的绘制。
画成图就是这样子:
封装UIPolygon.cs
脚本,它继承MaskableGraphic
,重写它的OnPopulateMesh
方法。
完整代码见文章末尾。
制作一个雷达图预设,如下:
Hierarchy
层级视图如下:
其中UIPolygon
节点挂CanvasRenderer
组件和UIPolygon
组件,
其中UIPolygon
组件相关的参数设置如下:
写一个测试脚本RadarTest.cs
,挂在Canvas
节点上,并赋值成员变量:
RadarTest.cs
代码如下:
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
///
/// 测试雷达图
///
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
代码如下:
using UnityEngine.UI;
using UnityEngine;
using System.Collections.Generic;
///
/// UI多边形
///
public class UIPolygon : MaskableGraphic
{
[SerializeField]
Texture m_Texture;
///
/// 填充
///
public bool fill = true;
///
/// 边数
///
[Range(3, 360)]
public int sides = 3;
///
/// 旋转角度
///
[Range(0, 360)]
public float rotation = 0;
///
/// 顶点数组
///
[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();
}
#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;
}
///
/// 重写OnPopulateMesh方法
///
///
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 }));
}
}
}