本日は MRTK の小ネタ枠です。
オブジェクトを整列させる を使ってボタンをきれいに並べる手順を記事にします。
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
または以下の NearMenuExamples のサンプルシーンでも利用されています。
・Assets/MRTK/Examples/Demos/HandTracking/Scenes/NearMenuExamples
GridObjectCollectionを使ってボタンを並べる
今回は NearMenu プレハブを利用し、予め GridObjectCollection を使って並べられたボタンをカスタマイズしてみます。
NearMenu プレハブは以下にあります。
・Assets/MRTK/SDK/Features/UX/Prefabs/Menus
プレハブをシーンに配置します。
NearMenu の子オブジェクトである ButtonCollection で GridObjectCollection が使われています。
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]の場合、中央に配置される。
ボタンを並べ替える
実際にボタンを追加して並び替えを行ってみます。
ボタンをコピーして子オブジェクトのボタンを6つに増やします。
これを 3x2 の配列に変更してみます。
GridObjectCollection の[Num Rows](行数)を 2 に変更し、[Update Collection]をクリックします。
これで GridObjectCollection の設定に基づいて、並び替えが行われます。
背景の Backplate は GridObjectCollection のオブジェクトではないため、自動では調整されません。
Backplate オブジェクトの下の Quad の横幅と高さを「0.032 * [ボタンの数 + 1]」の値で手動調整します。
例えば横幅は 0.032 * (3 + 1) = 0.128 で、高さは 0.032 * (2 + 1) = 0.96 です。