MRが楽しい

MRやVRについて学習したことを書き残す

オブジェクトを整列させるGridObjectCollectionを使ってボタンをきれいに並べる

本日は MRTK の小ネタ枠です。
オブジェクトを整列させる を使ってボタンをきれいに並べる手順を記事にします。
f:id:bluebirdofoz:20210219233241j:plain

GridObjectCollection

GridObjectCollectionンはいくつかのレイアウトパラメータで編成された子オブジェクトの並べ替えを行います。
これを使用して、コントロールパネルまたはプレハブやオブジェクトをすばやく整列することができます。
microsoft.github.io

MRTK の以下のドキュメントに具体的な仕様方法があります。
microsoft.github.io
microsoft.github.io

また、こちらのドキュメントは以下で日本語訳されています。
hololabinc.github.io
hololabinc.github.io

サンプルシーン

MRTK の Examples パッケージをインポートすれば、以下のサンプルシーンで GridObjectCollection の動きを確認できます。
・Assets/MRTK/Examples/Demos/UX/Collections/Scenes/ObjectCollectionExamples.unity
f:id:bluebirdofoz:20210219233323j:plain

または以下の NearMenuExamples のサンプルシーンでも利用されています。
・Assets/MRTK/Examples/Demos/HandTracking/Scenes/NearMenuExamples
f:id:bluebirdofoz:20210219233332j:plain

GridObjectCollectionを使ってボタンを並べる

今回は NearMenu プレハブを利用し、予め GridObjectCollection を使って並べられたボタンをカスタマイズしてみます。
NearMenu プレハブは以下にあります。
・Assets/MRTK/SDK/Features/UX/Prefabs/Menus
f:id:bluebirdofoz:20210219233342j:plain

プレハブをシーンに配置します。
NearMenu の子オブジェクトである ButtonCollection で GridObjectCollection が使われています。
f:id:bluebirdofoz:20210219233353j:plain

GridObjectCollectionの設定項目

GridObjectCollection の各設定の詳細は以下の通りです。

Ignore Inactive Transform:非アクティブなトランスフォームをレイアウトに含めるかどうか
Sort Type:オブジェクトの順序を決定するソートのタイプ。
Surface Type:コレクションをマップするサーフェス(形状)のタイプ。
Orient Type:コレクションの原点に対するオブジェクトの方向のタイプ。
Layout:オブジェクトの基本レイアウトを指定します
Num Rows:列あたりの行数。Layout が RowsThenColumns の場合にのみ割り当てることができます
Row Alignment:行がどの位置(上寄せ、中央寄せ、下寄せ)に配置されるか
Cell Width:コレクション内のオブジェクトごとのセルの幅。
Cell Height:コレクション内のオブジェクトごとのセルの高さ。
Distance from parent:平面からの奥行のオフセットの距離
Anchor:グリッドがローカル原点に対して固定される位置。[Middle Center]の場合、中央に配置される。

f:id:bluebirdofoz:20210219233407j:plain

ボタンを並べ替える

実際にボタンを追加して並び替えを行ってみます。
ボタンをコピーして子オブジェクトのボタンを6つに増やします。
f:id:bluebirdofoz:20210219233417j:plain

これを 3x2 の配列に変更してみます。
GridObjectCollection の[Num Rows](行数)を 2 に変更し、[Update Collection]をクリックします。
f:id:bluebirdofoz:20210219233427j:plain

これで GridObjectCollection の設定に基づいて、並び替えが行われます。
f:id:bluebirdofoz:20210219233437j:plain

背景の Backplate は GridObjectCollection のオブジェクトではないため、自動では調整されません。
Backplate オブジェクトの下の Quad の横幅と高さを「0.032 * [ボタンの数 + 1]」の値で手動調整します。
例えば横幅は 0.032 * (3 + 1) = 0.128 で、高さは 0.032 * (2 + 1) = 0.96 です。
f:id:bluebirdofoz:20210219233447j:plain