データ駆動な多角形の描画

備忘録です。
パラメーターUIの実装に使えるかも？

コード

DynamicPentagon.cs

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

/// <summary>
/// レーダーチャートの背景
/// </summary>
[RequireComponent(typeof(CanvasRenderer))]
[RequireComponent(typeof(RectTransform))]
[ExecuteInEditMode]
public class DynamicPentagon : Graphic
{
    protected virtual void Awake()
    {
        base.Awake();

        // 横に合わせる
        maxRadius = rectTransform.rect.width / 2.0f;
        deltaTheta = 360.0f / getVertexCount();
        v = UIVertex.simpleVert;
    }

    protected virtual void Update()
    {
#if UNITY_EDITOR
        yRate = rectTransform.rect.height / rectTransform.rect.width;
        maxRadius = rectTransform.rect.width / 2.0f;
        deltaTheta = 360.0f / getVertexCount();

        this.UpdateGeometry();
#endif
    }

    public void SetUp()
    {
        yRate = rectTransform.rect.height / rectTransform.rect.width;
        maxRadius = rectTransform.rect.width / 2.0f;
        deltaTheta = 360.0f / getVertexCount();

        this.UpdateGeometry();
    }

    protected override void OnPopulateMesh(VertexHelper vh)
    {
        // 初期化
        vh.Clear();

        // 点の計算
        for (int i = 0; i < getVertexCount(); i++)
        {
            tempVector.x = maxRadius * getVertexRate(i) * Mathf.Sin(Mathf.Deg2Rad * i * deltaTheta);
            tempVector.y = yRate * maxRadius * getVertexRate(i) * Mathf.Cos(Mathf.Deg2Rad * i * deltaTheta);
            v.color = pentagonBackgroundColor;
            v.position = tempVector;
            vh.AddVert(v);
        }

        // 中心
        v.position = Vector3.zero;
        vh.AddVert(v);

        // index生成
        for (int i = 0; i < getVertexCount(); i++)
        {
            vh.AddTriangle(
                i,
                (i + 1) % getVertexCount(),
                getVertexCount()
            );
        }
    }

    protected virtual float getVertexRate(int index)
    {
        return 1.0f;
    }

    protected virtual int getVertexCount()
    {
        return 3;
    }

    // 最大半径(Rect.widthの半分)
    private float maxRadius;
    private float deltaTheta;
    private Vector3 tempVector;
    private UIVertex v;
    private float yRate;

    [SerializeField]
    private Color32 pentagonBackgroundColor = Color.red;
}

StatusParameter.cs

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

public class StatusParameter : DynamicPentagon
{
    protected override void Awake()
    {
        base.Awake();
        SetUp();
    }

    protected override float getVertexRate(int index)
    {
        return m_ParameterList[index].value;
    }

    protected override int getVertexCount()
    {
        return m_ParameterList.Count;
    }

    [System.Serializable]
    public struct Parameter
    {
        public Parameter( string parameterName, float value )
        {
            this.parameterName = parameterName;
            this.value = value;
        }
        public string parameterName;

        [Range(0.0f, 1.0f)]
        public float value;
    }

    [SerializeField]
    public List<Parameter> m_ParameterList = new List<Parameter>
    {
        new Parameter( "体力", 1.0f),
        new Parameter( "防御", 0.5f),
        new Parameter( "攻撃力", 0.8f),
        new Parameter( "防御力", 1.0f),
        new Parameter( "素早さ", 0.1f),
    };
}

全パラメータMAX時

パラメータばらばら

TODO

もうちょっとリッチにしたい・・
アニメーション付けたりとかアウトライン付けたりとか・・