uGUIで線を引く～その１：三角メッシュの描画編～

はじめに

「uGUIで線を引きたい！」
と思ってuGUIのコンポーネントをあさっていたら、
「...ない！？」
ということに気づき
「試しにつくってみるかああ！！」
と重い腰を上げて、今に至ります。

流れ

調べてみると、uGUIのGraphicsクラスに**「３つ頂点から、三角形メッシュを描画する」**というメソッドがあるようなので、これで２つメッシュを作り、細長～い四角形を作ることで、線にする作戦をとります。

Unityリファレンス：Graphics

そもそもこのGraphicsって何？という話ですが、
uGUIのCanvasに描画する基底クラスのようです。
（Image,RawImage,Textなどなど）
というわけで、このGraphicsを継承して、まずは三角形を描画する**「Triangle」**というクラスを作ってみたいと思います！

作ってみる

Graphicクラスには、メッシュ生成時のコールバックOnPopulateMeshが用意されているので、こちらを使います。
引数でもらったvhに、頂点とメッシュを設定すればおしまいです。

using UnityEngine;
using UnityEngine.UI;

// ↓ugui描画に必須なコンポーネント達
[RequireComponent(typeof(CanvasRenderer))]
[RequireComponent(typeof(RectTransform))]
public class Triangle : Graphic
{
    /// <summary>
    /// uGUIでメッシュ生成する際のコールバック
    /// </summary>
    /// <param name="vh">この引数にメッシュを設定すればOK</param>
    protected override void OnPopulateMesh(VertexHelper vh)
    {
        //（１）座標の準備
        var v1 = new Vector2(0.0f, 0.0f);
        var v2 = new Vector2(100.0f, 0.0f);
        var v3 = new Vector2(0.0f, 100.0f);
        // (２)（１）の座標に頂点を追加
        AddVert(vh, v1);
        AddVert(vh, v2);
        AddVert(vh, v3);
        // (３)（２）で追加した頂点に三角形メッシュを設定
        vh.AddTriangle(0, 1, 2);
    }

    private void AddVert(VertexHelper vh, Vector2 pos)
    {
        var vert = UIVertex.simpleVert;
        vert.position = pos;
        vert.color = color;
        vh.AddVert(vert);
    }
}

結果

おお。。ホントに描画できた。。。

次回予告

次は細長い四角で線をつくります。
uGUIで線を引く～その２：線の描画編～