テラシュールブログ

旧テラシュールウェアブログUnity記事。主にUnityのTipsやAR・VR、ニコニコ動画についてのメモを残します。

【Unity】リングコマンド的にUIを円形に配置する

f:id:tsubaki_t1:20160411054626g:plain

今回はUIを円形に配置する方法について紹介します。

 UI要素を円形に並べる

せっかくなので、ILayoutGroupを使用して円形に配置するレイアウトグループを作ってみます。
ILayoutGroupは、UI要素が変化した際にコールバックを返してくれるインターフェースです。これを利用して、UI数の変化を受けて円形に並べれば、上画像のように要素数が変化した時に並べる事が出来ます。

gist.github.com

使い方は簡単、Radiusで半径指定して、Offset Angleで回します。基本はLayoutGroupなので、レイアウトグループっぽく。

f:id:tsubaki_t1:20160411071305j:plain

UnityのuGUIでスクロールビューを作る - テラシュールブログ

色々と試作してみる

これを応用して、色々とやってみました。
まず、IDragHandlerIEndDragHandlerを使用してターンテーブル的に回してみます。
IDragHandlerでドラッグ中の情報を、IEndDragHandlerでドラッグ終了検知を行い、並べる事自体はCoroutineで行います。
何故ILayoutGroupではなくCoroutineかと言えば、ILayoutGroupはあくまで要素数が変わった時に呼ばれる物なので、最後に特定の位置にゆっくり合わせる的な事が出来ないのです。Updateを呼ぶ程の事でもないですし…
このUIはタッチパネルやマウス操作を基準として回転出来るのがポイントですが、「タッチパネルで自由に選択できるから、このインターフェース無意味だよね」と気づかせてくれた試作号です。
ゲームパッドなら有益なのですが、それならAngleで回した方が効果的です。

f:id:tsubaki_t1:20160411061320g:plain

ならばと回転軸を二つにしてみましたが、これはこれで面白い気がしますが難しい所です。
この「一部を隠すタイプのスクロールビュー」は、どちらかと言えば「隠れてる要素を自由に差し替えられる事」がポイントなので、レイアウトグループとして実装するよりも、もっと別の実装方法がありそうな気がします。
無限スクロールビューみたいに、要素回転時の情報を元に、UI要素を差し替える的な。

UnityのuGUIで無限にスクロール出来るスクロールビューを作る - テラシュールブログ

f:id:tsubaki_t1:20160411062651g:plain

この「UIを円形でスクロールで回すタイプのUI」表示してUIは中々に憧れではあるのですが、実際に作って色々してみると、タッチパネルやマウス上での操作を考えると案外使いにくいかもしれません(見た目はかっこよいですが)
ゲームパッドやViveコントローラー、マウスジェスチャーといった「間接的な操作で選択する」タイプなら、割と理に適ってる気がしますが、それならタッチパネルで回す必要ないよねと。
なので、最終的にはAngleだけ露出してゲームシステムからの操作で回すのが理にかなってるかもしれません。

この「回転するUIの名前」

この回転するタイプのUIの名前をTwitterにて聞いた所、「リボルバー」や「ターンテーブル」、そして「リングコマンド」という回答をいただきました。
リングコマンドは個人的には聖剣伝説のインターフェース名な気がしなくも無いのですが、認知度的にはリングコマンドが圧倒的だったので、コレでも良いかなって気がします。

 関連

qiita.com

www.justapixel.co.uk

shamaton.orz.hm