親戚のゲーム作ってるおじさんブログ

「そういえば、そんな人いるとか聞いたなあ」って思ったでしょ？ 私です。

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

Unity

はじめに

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

image.png

流れ

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

Unityリファレンス：Graphics

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

作ってみる

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

using UnityEngine;
using UnityEngine.UI;
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);
    }
}

結果

image.png おお。。ホントに描画できた。。。

次回予告

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