デコシノニッキ

ホロレンジャーの戦いの記録

MR Learning Base Module で学ぶHoloLens 2アプリ開発 その2 UIとハンドトラッキング

※ この記事は2019/02/26時点のものを参考に書いています

www.tattichan.work

その1では動作確認を行いました(HoloLens2もってないけど…)
その2ではMRTKを使ってHoloLens 2でボタンなどのUIをどう使っていくかやハンドトラッキングについて学んでいきます。

docs.microsoft.com

Instructions

MRTKプロファイルの設定

新しいMRTKでは,これまでのMRTKのようなprefabを配置していくような静的な環境構築と異なり,プロファイルと呼ばれる設定ファイルを使った動的な環境構築を行うのが特徴で最初は少し戸惑う方もいらっしゃると思います。

1.ヒエラルキー内の"MRTK"を選択し,インスペクタパネルから"Mixed Reality Toolkit Script"の"Active profile"の項をダブルクリックします。
f:id:haikage1755:20190501174427p:plain:w450

2.デフォルトのプロファイルは編集できませんが,Copy&Customizeでデフォルトのプロファイルをコピーすることができ,複製したものはカスタマイズすることができます。このプロファイルの下にネストされている追加のプロファイルについても,コピーしてカスタマイズの手順を繰り返す必要があります。

f:id:haikage1755:20190501182113p:plain:w450

3.SpatialMeshの表示を無効にします。"Spatial Awareness System Settings"の項から”Clone"を押してデフォルトのプロファイルを置き換えてカスタマイズします。ポップアップウィンドウが出たら,Cloneボタンを押してください。


f:id:haikage1755:20190501183428p:plain:w450

f:id:haikage1755:20190501183456p:plain:w450

4.Default Mixed Reality Spatial Mesh Observerをカスタマイズ用にコピーします。"Windows Mixed Reality Spatial Mesh Observer"の矢印"▶"を押して,オプションを展開します。"Default Mixed Reality Spatial Mesh Observer"を見つけ,同様にCloneして置き換えます。

f:id:haikage1755:20190501183954p:plain:w450

5.次に,Display Settingsを"Occlusion"に切り替えます。こうすることで,SpatialMeshが不可視になりますが,ゲームオブジェクトはSpatialMeshに隠れるようになります。

Note: この時,SpatialMeshは見えなくはなりますが,存在はしておりインタラクションも可能です。


f:id:haikage1755:20190501184213p:plain:w450

ハンドトラッキングとインタラクション可能なボタン

1.プロジェクトフォルダの"Assets"を選択します 2.search barから"pressablebutton"を検索します


f:id:haikage1755:20190501184547p:plain:w450

3.ヒエラルキードラッグアンドドロップします

Note: "Importing TMP Essentials"と表示された場合はインポートしてください。


f:id:haikage1755:20190501195147p:plain:w450

4."PressableButton" GameObjectをダブルクリックして,画像のようにシーンに表示します。


f:id:haikage1755:20190501195335p:plain:w450

5.Inspectorパネルからボタンを押されたときにイベントを発火するために"Add Event"を押してください。ドロップダウンメニューを選択し,"InteractableOnPressReciever"を選択します。これにより手がボタンを押したときに,ボタンの押下に紐づいて登録された処理が実行されるようになります。

f:id:haikage1755:20190501195520p:plain:w450

6.Cubeをシーンに配置します。ヒエラルキーで右クリ句を押し,3D Objectから"cube"をクリックします。すると,Cubeがディスプレイに表示されます。これは巨大すぎるので,サイズを小さくします。今回はスケールに,x=0.1, y=0.1, z=0.1を用います。Cubeの位置がボタンに重ならならず,近くに配置されていることを確認してください。下図では,cubeをx=0, y=0.2, z=1に配置しています。

f:id:haikage1755:20190501200247p:plain:w450

f:id:haikage1755:20190501200303p:plain:w450

7.このステップではボタンを押したらCubeの色が変わるようにします。PressableButtonを選択し,Inspectorパネルの"Select Event Type" の"+"ボタンを押してください。"Runtime Only"の直下のエリアにCubeをドラッグアンドドロップしてください。


f:id:haikage1755:20190501200605p:plain:w450

"No Function"と書かれたドロップリストを展開し,"MeshRenderer">"Material material"を選択します。これでボタンが押されたときにマテリアルを変更できるようになります。

Projectパネルに移動し,変更したいmaterialを検索します。"MRTK_Standard_Cyan"をこの例では用いるので,search barから"cyan"と打ち検索します。materialをドラッグして,"MeshRenderer.material"のボックスにドロップします。MRTKのマテリアルはAssets>MixedRealityToolkit.SDK>StandardAssets>Materialsからも見つけることができます。

f:id:haikage1755:20190501201057p:plain:w450

f:id:haikage1755:20190501201129p:plain:w450

これで,ボタンが押されたときのイベントが設定できました。Cubeは設定したマテリアルのカラーに色が変わります。

8.次に,ボタンから手を離したときに,元のDefault colorに戻るように設定します。Step7の繰り返しですが,今回は"OnPress"ではなく,"OnRelease"のイベントを使います。

9.プロジェクトパネルから,デフォルト用のマテリアルを検索します。"MRTK_Standard_LightGray"を検索し,MeshRenderer.materialにドラッグアンドドロップしてください。


f:id:haikage1755:20190501201754p:plain:w450

これでボタンを使ったインタラクションは終了になります。

MRTKのGrid Object Collectionを使ったパネルボタンの作成

オートアライメントするボタンを作り方を学びます。

1.前のセクションのボタンを複製して計5個のボタンを用意します。やり方は複数あります。

  • ボタンを右クリックして"copy",続いてボタンの下で右クリックをして"paste"を押す
  • 右クリックを押して,"duplicate(複製の意)"を押す
  • "Ctr+D(duplicate)"を押して複製する (オススメ。覚えてしまいましょう。)


f:id:haikage1755:20190501202311p:plain:w450

2.ボタンをグルーピングする空の親オブジェクトを作ります。grid collectionでボタンを配置するには,共通の親オブジェクトの下に配置する必要があります。ヒエラルキーで右クリックを押して,"create empty"を押します。"gameObject"という名前で生成されるので右クリックで"rename"を押して"ButtonCollection"に名前を変更します。


f:id:haikage1755:20190501202732p:plain:w450

3.すべてのボタンを直下に配置します。5つのボタンを選択し,”ButtonCollection”にドラッグアンドドロップして配置します。


f:id:haikage1755:20190501202918p:plain:w450

4."Grid Object Collection"コンポ―ネントをButtonCollectionに追加します。"ButtonCollection"を選択し,Inspectorから"Add Component"ボタンをクリックします。続いて"Grid Object Collection"をsearch barに打ち込み,選択します。


f:id:haikage1755:20190501203139p:plain:w450

Grid Object Collectionコンポーネントを使うと,ボタンやオブジェクトらを綺麗に行,列,またはグリッドに配列してくれます。これはMRTKが提供するビルディングブロックの1つで,美しいUIを素早く簡単に作成する方法になります。

5.Grid Object Collectionの設定を行います。すべてのボタンがユーザの方を向いていることを確認するには,"orient type","face parent forward"を選択します。セル幅とセル高を0.12x 0.12で始めます。選択したオブジェクト/ボタンアセットに応じて,これらの値を調整する必要があります。 "Row"が1に設定されていることを確認してください。次に"Update Collection"をクリックすると,シーンは下の図のようになります。


f:id:haikage1755:20190501203856p:plain:w450

Textをシーンに追加する

テキストの追加の仕方とその編集の仕方を学びます。TextMeshProが必要になるのでこちらを参考に設定を行ってください。

1."ButtonCollection"を選択し,右クリックを押して"3D object"から"TextMeshPro-Text"を選択してください。TextMeshProはCollectionの下に配置してください。


f:id:haikage1755:20190501204040p:plain:w450

f:id:haikage1755:20190501204225p:plain:w450

2.TextMeshProコンポーネントのTextのフィールドで,"Button Collection Text"と打ち込んでください。するとシーンにそのテキストが表示されますが,ボタンの後ろに隠れ,またサイズも適当ではありません。


f:id:haikage1755:20190501204416p:plain:w450

3.テキストの大きさと配置を読みやすくするために,"font size'を調整してフォントの大きさを変更します。"Rect Transofrm"のpositionとscaleを下図のように調整します。


f:id:haikage1755:20190501204830p:plain:w450

f:id:haikage1755:20190501204840p:plain:w450

4.Button Objectのテキスト値を修正するには,ボタンを矢印から展開して"SeelSayItLabel">"TextMeshPro"を選択することで,上記の流れのようにテキストを編集することができます。


f:id:haikage1755:20190501205107p:plain:w450

www.tattichan.work

[デコシノニッキ]は、Amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。」