Microsoftのドキュメント[Microsoft Docs]ではHoloLens 2の入門チュートリアルが公開されています。
ツールのインストールから詳しく掲載されているためこちらを今回勉強しながらHoloLens 2が手元にないためHoloLens 1stで動かしてみます。
チュートリアルは以下で公開されています。
前回の記事はこちら
前回はMRTKで用意されているHoloLens 2用のボタンとUnity側で提供されている基本的なキューブオブジェクトを配置し、ボタンを押すことでキューブのマテリアルが変更するところまで作成しました。
〇MRTK のGridObject Collectionを使用したレイアウトの作成
●1. 親オブジェクトにボタンオブジェクトを親とする
[Hierarchy]ウィンドウ内の空の場所を右クリックし、[Create Empty]を選択します
新しく作成したオブジェクトを右クリックし、 [Change name] を選択して、適切な名前に変更します。 ここではチュートリアル通り[buttoncollection]と名付けます。
[PressableButtonHoloLens2]オブジェクトを選択し、 buttoncollectionオブジェクトの上にドラッグして、buttoncollection オブジェクトの子にします。
[PressableButtonHoloLens2]オブジェクトを右クリックし、 [Clone] を選択してコピーを作成します。(この作業はショートカットキーの[Ctrl]キー+[D]キーでも行えます。)
この作業を繰り返し５つのボタンを作成します。
●2. Grid オブジェクトコレクション (スクリプト) コンポーネントを追加して構成する
複製したボタンはすべて同じ位置に配置されているため重なってしまっています。
[Transform]を手動で変更することもできますが、多くのオブジェクトを均等に配置するためには計算する必要があるため面倒です。
MRTKではアタッチされたオブジェクトの子オブジェクトすべてのレイアウトを設定に合わせ配置する[GridObjectCollection]が用意されています。
[Hierarchy]ウィンドウで[ButtonCollection]オブジェクトを選択した状態で、[Inspector]ウィンドウで[Add component]をクリックし、[GridObjectCollection.cs] を検索して選択します。これにより、[GridObjectCollection] コンポーネントが buttoncollection オブジェクトに追加されます。
次のように、[GridObjectCollection]を設定します。
[Num Rows] を1に変更すると、すべてのボタンが1つの行に合わせて調整されます。
[Cell Width]を0.05 に変更して、ボタンの幅を0.5にします。
[Update Collection]をクリックすることで設定したレイアウトが反映されます。
実行します。
ボタンを押すことでキューブの色が変化します。
〇シーンへのテキストの追加
ここでは[TextMeshPro]を用いてbuttonColectionの下にシンプルなラベルを追加します。
ButtonCollection オブジェクトを右クリックし、[ 3DObject> Text-TextMeshPro ] を選択して、[TextMeshPro]オブジェクトを buttoncollection オブジェクトの子オブジェクトとして作成します。
そのままでは文字の大きさが大きすぎます。
フォントサイズを変更します。 [TextMeshPro(Script)]の[FontSixe]を[0.2]に設定します。
新しく作成された [Text(TMP) ]を選択したまま、[Inspector] ウィンドウで、buttoncollectionの下にラベルが表示されるように、その位置とサイズを変更します。
・[RectTransform]のPos Yを-0.0425 に変更します。
・四角形の変換幅である[Width]を0.24 に変更します
・四角形の変換の高さを0.024 に変更します。
これで文字の大きさが丁度良いものになりました。
次にレイアウトを変更します
・[TextMeshPro (script)]のTextを[ButonCollection]に変更する
・[TextMeshPro (script)] のフォントスタイルを太字に変更する。
・[TextMeshPro (script)] の配置を中央ぞろえに変更する
以上でボタンの配置が完了しました。
