【Unity】かっちょいいUIを作る!解説編【UI】

今朝に引き続きUIのお話です。

前回はこちら
seiroise.hatenablog.com

今回は前回紹介したこいつ↓について解説します。(主に忘れっぽい自分へ)

f:id:seiroise:20160919122549g:plain:w500

ソースコード

まず初めに全体のソースコードへのリンクをはっておきます。
説明なんていらん!という人はこっちを見てください。
github.com

円の描画

Unityで円を描画させるにはいくつかあるんですが、 今回は円形のMeshを作って描画するようにしました。 ソースコードでいうと

といった役割になっています。
円の形状定義と描画部分を分けてモジュールっぽさを上げてます。
描画するための形状のデータはEasyMeshとかいう、簡易的な頂点などの集合を介して行うようにしています。

メインの部分は円の形状を定義しているCircleFragment.csですかね。こいつに何度(start)から何度(end)まで、内径(inner)と外径(outer)といった円の形状を指定して、あとはSetIndicate()でどんな表示の仕方をするかを決めてCircleFragment.Update()を呼ぶことで形状をいじくってます。

コライダーへのポインタイベントの送信

今回の方法では既存のEventSystemは使えないので、こちらで都合の良いものを用意します。

ほぼほぼいうことはないと思いますがCollisionEventSystemはマウスの位置からRaycastを行って当たったものに対してICollisionEventHandlerが確認できたらそいつにイベントを送るといった感じです。

Radial Menu の制御

最後にRadialMenuの管理ですがその名の通りRadialMenu.cs君が全て行っています。
UniCoLib/RadialMenu.cs at master · seiroise/UniCoLib · GitHub

表示命令がきたらそのオブジェクトの子のUICircleFragmentを探しそれらに対して位置や範囲を指定して表示するようにしています。
親子関係はTreeではなくStackで擬似的に管理しています。
今回のRadialMenuでは別の子が同時に二つ以上表示されることがないのでStackでおけっていうことですね。

こいつの問題点

今更ですが、ここでこのRadialMenuの問題点を言っておこうと思います。 なんとなく察しているとは思いますが。こいつはワールド空間に配置されているので一緒にテキストを表示するのがちとめんどくさいです。

こいつに関しては今の所良い方法が思い浮かばないので保留です。
何か良い方法があったらコメントください・・・

おわり

かなり端折りましたが解説はこんな感じです。
ここわからんという方はコメント欄とかでよろしくです。

そんでは次の記事では使い方を説明していきたいと思います。
明日の朝には書けると良いなぁ・・・

ではではー

余談

すーぱー被ってるAssetを発見。
事前調査してなかった・・・
assetsale.hateblo.jp

https://www.assetstore.unity3d.com/jp/#!/content/15857