読者です 読者をやめる 読者になる 読者になる

渋谷ほととぎす通信

完全趣味でやってるUnityメモ。説明できないところを説明できるようにするための個人ブログ。昨日の自分より少しでも大きく慣れるように。。。 ※所属団体とは一切関係がありません

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


f:id:esakun:20150730215258g:plain

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

esakun.hateblo.jp

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で設定します。

早速描画

f:id:esakun:20160627222351p:plain

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

f:id:esakun:20160627222443p:plain

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

なぜ透明なのか

これは、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

f:id:esakun:20160627222400p:plain

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

まとめ

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

「動的メッシュ生成」シリーズ記事

esakun.hateblo.jp esakun.hateblo.jp esakun.hateblo.jp esakun.hateblo.jp

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

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

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

あわせてuGUI記事もどうぞ

www.shibuya24.info

www.shibuya24.info