点关注不迷路,持续输出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
添加顶点,从而实现多边形的绘制。
画成图就是这样子:
首先,我们先制作雷达背景图,如下:
导入Unity
工程中:
封装UIPolygon.cs
脚本,它继承MaskableGraphic
,重写它的OnPopulateMesh
方法。
完整代码见文章末尾。
制作一个雷达图预设,如下:
Hierarchy
层级视图如下:
其中UIPolygon
节点挂CanvasRenderer
组件和UIPolygon
组件,
其中UIPolygon
组件相关的参数设置如下:
写一个测试脚本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
代码如下:
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 }));
}
}
}
基于控制台应用程序+opencv,实现点击鼠标左键,可以拖动图片以显示感兴趣区域 #...
首先说一下, href属性 和 onclick事件 的执行顺序,当鼠标点击a标签的时候会先...
ajax分页查询功能的具体代码,供大家参考,具体内容如下 显示的效果如下: 实现...
鸿蒙JSFA 使用 WebView 我的具体流程JSFA 调用 JAVAPA 拉起 JAVAFA 1.JSFA expor...
我国传统的清明节大约始于周代已有二千五百多年的历史。清明最开始是一个很重要...
本文实例讲述了php变量与字符串的增删改查操作。分享给大家供大家参考,具体如下...
上篇文章给大家介绍了 vue实现裁切图片同时实现放大、缩...
table border="1" cellpadding="0" cellspacing="0" style="border-collapse:col...
微软目前正在测试一种向Windows 10操作系统提供功能更新和更改的新方法。到目前...
1.采用javascript 复制代码 代码如下: input type="button" value="关闭窗口" on...