もう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の全ソースです。
ポイントは88行目の頂点シェーダ処理。
OUT.color = IN.color * _Color;
IN.colorとは頂点に設定されているカラー情報です。
ここが(0,0,0,0)になっているため透明で描画されている理由です。
頂点カラーを設定する
DynamicMeshWithUGUI.csに修正を加えいます。
各頂点に色を設定してみます。
DynamicMeshWithUGUI.cs
着色状態で描画されました！
まとめ
uGUIで動的に生成するのは、以前のようなMeshクラスを生成して描画するよりソースコードも少なくとても簡単でした。
次回以降このメッシュにテクスチャを貼ってみたり、三角形以外の形を描画してみようと思います。あくまで基本編です。
その他の動的にメッシュを生成するシリーズ
Unity動的にメッシュを生成するシリーズ - 渋谷ほととぎす通信
uGUIの基礎を学ぶにはこちらの本がオススメ。カラーページで分かりやすいです。