Help us understand the problem. What is going on with this article?

uGUIで線を引く~その1:三角メッシュの描画編~

はじめに

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

image.png

流れ

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

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)
    {
        //(1)座標の準備
        var v1 = new Vector2(0.0f, 0.0f);
        var v2 = new Vector2(100.0f, 0.0f);
        var v3 = new Vector2(0.0f, 100.0f);
        // (2)(1)の座標に頂点を追加
        AddVert(vh, v1);
        AddVert(vh, v2);
        AddVert(vh, v3);
        // (3)(2)で追加した頂点に三角形メッシュを設定
        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で線を引く~その2:線の描画編~

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした