Unity中的角色属性芒星比例图

Unity中的角色属性芒星比例图

很多游戏里的角色选择界面都会贴出不同职业的属性大致情况，如输出职业输出高难度大，肉职业可能伤害低，生存强。给出的芒星图可以让玩家很直观的了解不同职业的属性比重。如下图：

这里给出一种实现方式：

不同职业有不同的属性比例，这个可以由策划配置，例如现在“伤害”配置为0.8，那我们就知道：

伤害这条线上的点应该处的位置在于中心点到伤害顶点这个线段的4/5位置处，中心点和顶点的坐标我们都可以知道，然后我们可以算出目标点的位置。

然后每个属性的点的位置我们知道了，那现在想得到途中的效果，那我们就需将这些点连接起来，形成一个区域，绘制网格出来，参照下面代码：

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

public class RoleAttr5D : Graphic
{
    void Update()
    {
        SetAllDirty(); //设置更改，请求渲染（可以在需要的时候手动调用，而不是在update中）
    }

    protected override void OnPopulateMesh(VertexHelper vh)
    {
        if (transform.childCount == 0)
        {
            return;
        }

        Color32 color32 = color;//绘制的颜色
        vh.Clear(); //清除原先需要绘制的顶点和三角形数据，用下面的元素替代

        // 几何图形的顶点，本例中根据子节点坐标确定顶点
        int index = 0;
        foreach (Transform child in transform)
        {
            vh.AddVert(child.localPosition, color32, new Vector2(0f, 0f));
        }
        //几何图形中的三角形
        vh.AddTriangle(0, 1, 2);
        vh.AddTriangle(0, 2, 3);
        vh.AddTriangle(0, 3, 4);
    }
}

代码很简单，注释很清晰，不重复说了。

于是，上图效果就出来了。

有时候，为了边缘效果更清晰，可以在顶点间用LineRenderer绘制线。

附上工程链接：

https://pan.baidu.com/s/1nvFuAxj，密码：4sp6