Unity 動的にメッシュを生成してゴニョゴニョする : 超基本uGUI編

もう1年前の記事の続編です。

1年経ってもこちらの記事にある一定のPVがあるということは、継続的なニーズがあるのかもしれません。

ところで前回(1年前)に書いた動的メッシュ記事はMeshクラスを用いたワールド座標に表示されるメッシュです。

今回はuGUI上(Canvas上)に動的なメッシュを表示させてみます。
まずは三角形を表示させてみましょう。

本記事は、動的にメッシュを生成するシリーズの一貫です。

とりあえずソースから。

DynamicMeshWithUGUI.cs

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

public class DynamicMeshWithUGUI : Graphic
{
    protected override void OnPopulateMesh(VertexHelper vh)
    {
        // 頂点の順番
        vh.AddTriangle(0,1,2);

        // UIVertex:各頂点の情報
        var v0 = new UIVertex();
        v0.position = new Vector3(-100f, -100f);
        var v1 = new UIVertex();
        v1.position = new Vector3(0, 100f);
        var v2 = new UIVertex();
        v2.position = new Vector3(100f, -100f);

        // 頂点情報を渡す
        vh.AddVert(v0);
        vh.AddVert(v1);
        vh.AddVert(v2);
    }
}

uGUIで三角形を動的に描画する場合、Graphicクラスを継承してOnPopulateMesh関数をオーバーライドするところから始まります。

ではOnPopulateMesh関数の引数VertexHelperインスタンスに対して処理を書いていきましょう。

以前の記事と同様Meshに必要な最低限の情報は変わりません。

• 頂点座標配列
• 頂点を結ぶ順番配列

今回は配列ではなくそれ専用の関数が用意されています。

頂点座標

uGUIの場合は、UIVertexという構造体が定義されており、頂点の数分生成します。今回は三角形を描画するため、v0〜v2を生成。

前回同様Vector3型の座標をUIVertexクラスのpositionプロパティに渡します。
※今回の三角形は1辺200pixelです。

var v0 = new UIVertex();
v0.position = new Vector3(-100f, -100f);

生成した頂点情報UIVertexをVertexHelperにAddVert関数で渡します。

vh.AddVert(v0);
vh.AddVert(v1);
vh.AddVert(v2);

頂点を結ぶ順番

vh.AddTriangle(0,1,2);

頂点を結ぶ順番はVertextHelperクラスのAddTriangleで設定します。

早速描画

何も描画されていない様に見えますが、シーンビューをWireframeにして見てみましょう。

三角形が生成されていることが確認できます。

なぜ透明なのか

これは、Graphicオブジェクトにデフォルトで設定されるビルトインシェーダUI-Default.shaderの中に答えがあります。
※ちなみにビルトインシェーダーソースは公式からダウンロード可能です

http://unity3d.com/jp/get-unity/download/archive

下記はUnityビルトインシェーダのUI-Default.shaderの全ソースです。

gist.github.com

ポイントは88行目の頂点シェーダ処理。

OUT.color = IN.color * _Color;

IN.colorとは頂点に設定されているカラー情報です。
ここが(0,0,0,0)になっているため透明で描画されている理由です。

頂点カラーを設定する

DynamicMeshWithUGUI.csに修正を加えいます。
各頂点に色を設定してみます。

DynamicMeshWithUGUI.cs

gist.github.com

着色状態で描画されました！

まとめ

uGUIで動的に生成するのは、以前のようなMeshクラスを生成して描画するよりソースコードも少なくとても簡単でした。
次回以降このメッシュにテクスチャを貼ってみたり、三角形以外の形を描画してみようと思います。あくまで基本編です。

その他の動的にメッシュを生成するシリーズ

Unity動的にメッシュを生成するシリーズ - 渋谷ほととぎす通信

UnityゲームUI実践ガイド 開発者が知っておきたいGUI構築の新スタンダード

uGUIの基礎を学ぶにはこちらの本がオススメ。カラーページで分かりやすいです。

あわせてuGUI記事もどうぞ

www.shibuya24.info

www.shibuya24.info