MetaQuest3アプリのUI作成(MetaXRInteractionSDK)
概要
以前、Hololens2でのMR開発をしていた際、公式(MRTK)からボタンやテキストを表示するパネルが提供されていました。
これと同じようなものがMetaからも提供されていたので、勉強がてら触れてみました。
行ったことは以下の二点です
- すべてのUIライブラリが一つにまとまった、UIセットのサンプルシーンを実際にMetaQuest上で実行
- 提供されているライブラリを用いたUIの作成
UIセットのサンプル
まずは、以下の記事のようにMetaQuest開発用にUnityプロジェクトを設定します。
今回BuildingBlocksから追加した項目は以下の通りです。
CameraRigPassthroughHandTrackingInteractionRig
設定が完了したらサンプルシーンを実行します。
Meta All-in-One SDKをプロジェクトに追加すると、内包されているMeta XR Interaction SDK EssentialsがPackagesの中に追加されています。
この中のMetaXRInteractionSDK/Runtime/Sample/Objects/UIset/Scenes
にUIsetnのサンプルが入っています。
そのままでは開けないので、一度Assetsの中に移動してからSceneを開きます。
TextMeshProのインポートを行うか聞かれるので、インポートを行う
扱いやすくするため、UISetにあるContentRootのTransformのYを1.2に設定
Meta Quest Linkにつないで実行します
画像のようなUIのコンポーネントが表示され実際に操作することができました。
UIsetにはボタンやドロップダウン、スライダーなど様々な種類のコンポーネントがあり、それらを自由に組み合わせてUIを作成できるそうです。
UIの作成
サンプルシーンを参考にしながら実際にUIを作成してみます。
今回はタイトル、ボタン、スライダーを作成します。
MetaXRInteractionSDK/Runtime/Sample/Objects/UIset/Prefabs
の位置に各種プレハブが入っているので、これを使用します。
1.バックプレートの配置
まずはバックプレートを配置します。
Backplate内にEmptyUIBackplateWithCanvasというプレハブがあるので、これをシーンに追加します。
このバックプレートが、すべてのUIコンポーネントの基本となります。
バックプレートの大きさを変更します。
CanvasRootのRectTransformの値をWidth:400、Height:250に設定します。
次にその配下にあるUIBackplateのRectTransformの値も
Width:400、Height:250に設定します。
2.タイトルの設置
タイトルを設置します。
CanvasRoot内、UIBackplateを右クリックし、UI→Text-TextMeshProを選択します。(Title)
Inspector内のTextMeshProからタイトルを設定します。
3.ボタンの設置
ボタンを設置します。Button/UnityButtonBased内にある
PrimaryButton_IconAndLabel_UnityUIButtonを選択します。
これをシーン内のUIBackplate内に配置します。
ボタンが押された時のイベントはボタンプレハブ内から追加できます。
ボタンのラベルやテキストはElementsの下から変更できます。
4.スライダーの設置
スライダーを設置します。Slider内にあるLargeSlider_LabelsAndIconsを使用します。
これをシーン内のUIBackplate内に配置します。
LargeSliderオブジェクト内のInspectorで最大最小値の設定、値が更新された時のイベント設定などができます
labelTextオブジェクト内では下のラベルに表示するテキストを設定できます。
終わりに
Metaから提供されているUIライブラリについて勉強してみました。
様々な種類のUIコンポーネントがあり、すべては把握しきれていませんが後々、使えるようにしたいですね。
参考サイト
Discussion