naichi's lab

3日後の自分(他人)への書き置き

【Unity】2Dメッシュでレーダーチャートを作図する その1

f:id:naichilab:20160828153311p:plain

今作ってるゲームで、ステータスのグラフを描く必要があってちょっと調べた。

イメージはこんな感じで、これはレーダーチャートっていうらしい。

f:id:naichilab:20160828153416j:plain:w320

メッシュを変形〜みたいなことすれば良いんだろうけど全く経験がない。

とりあえずググりながらやってみる。

環境

  • 書いた日 2016/08/28
  • OS X El Capitan 10.11.6
  • Unity 5.4.0f3

まずは試して見る

動的にメッシュ生成して描画できればええんかなーと。

ぐぐると良さそうな記事発見。

esakun.hateblo.jp

ドンピシャやないですか!!!

真似てみた。

f:id:naichilab:20160828154333p:plain

すげぇ。一瞬でできた。

昔AndEngineでOpenGL描いたときには頭痛くなるぐらいのコード書いた気がするけどたかだか15行程度でここまでできちゃうのね・・・

さらに記事の通りマテリアルを充ててみる。

f:id:naichilab:20160828155554p:plain

よいよい。

多角形にしてみる。

さっきの三角形を応用して多角形を描く。

f:id:naichilab:20160828160907j:plain

こんな感じか。

赤数字が頂点番号。矢印が描画順。

とりあえず5角形書いてみる。

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

[RequireComponent (typeof(MeshRenderer))]
[RequireComponent (typeof(MeshFilter))]
public class DynamicCreatePolygonMesh : MonoBehaviour
{
    [SerializeField]
    private Material _mat;

    //頂点数
    [SerializeField]
    private int VerticesCount = 5;

    //半径
    [SerializeField]
    private float Radius = 1f;

    private void Start ()
    {
        if (VerticesCount < 3) {
            Debug.LogError ("頂点数は3以上を指定してください。");
            return;
        }

        List<Vector3> vertices = new List<Vector3> ();
        List<int> triangles = new List<int> ();

        //原点座標
        vertices.Add (Vector3.zero);

        //各頂点座標
        for (int i = 1; i <= this.VerticesCount; i++) {
            float rad = (90f - (360f / (float)this.VerticesCount) * (i - 1)) * Mathf.Deg2Rad;
            float x = Mathf.Cos (rad);
            float y = Mathf.Sin (rad);
            vertices.Add (new Vector3 (x, y, 0));
            triangles.Add (0);
            triangles.Add (i);
            triangles.Add (i == this.VerticesCount ? 1 : i + 1);
        }

        var mesh = new Mesh ();
        mesh.vertices = vertices.ToArray ();
        mesh.triangles = triangles.ToArray ();

        var filter = GetComponent<MeshFilter> ();
        filter.sharedMesh = mesh;

        var renderer = GetComponent<MeshRenderer> ();
        renderer.material = _mat;
    }
}

f:id:naichilab:20160828163409p:plain

いい感じね!!

次は変形をアニメーションしたいけど、とりあえずここまで。

参考

chachart.net

esakun.hateblo.jp