夜風のMixedReality

xRと出会って変わった人生と出会った技術を書き残すためのGeekなHoloRangerの居場所

Osaka HoloLens Hackathon Online 2021 チームビルド 6日目 オリジナルUIのテキスト、アイコンをMRTKに合わせる

本日はイベント枠です。   昨日3月6日から大阪駆動開発のイベント「Osaka Hakkathon Online 2021 チームビルド」が始まりました。

このイベントは関西のxRコミュニティ大阪駆動開発が主催のHoloLensイベントで、毎年行われているイベントが今年は新型コロナウィルス感染症の影響を受けオンラインの形で行われました。

本日は6日目の取り組みになります。

〇ボッチソン『HoloLensで片手で操作できる未来感あるUI』

今回筆者が取り組むテーマは『HoloLensで片手で操作できる未来感あるUI』です。

これはHoloLens 2で使用できるHandTrackingを用いたオリジナルのUIを作成するプロダクトで、MRTKで提供されているHandMenuなどデフォルトのHandUIは片手操作ができないという門外があります。

様々な人が今後HoloLensを使っていく中で片手で操作できるUIというものを作りたいと思いテーマとして選びました。

〇アイコンの導入

MRTKではIconSetと呼ばれるボタンなどのUI用の機能が提供されています。

これはあらかじめ設定していたアイコン画像を開発者がUnityのinspectorウィンドウ上のGUIからクリック一つで設定できる機能です。

今回オリジナルのUIを作るにあたりアイコンやテキストの表示の仕組みをMRTKに合わせました。

MRTKのButtonでは[ButtonConfigHelper]というコンポーネントでそれらを行うことができます。

①前回作成したQuadに[ButtonConfigHelper]をアタッチします。

f:id:Holomoto-Sumire:20210311043516j:plain

②Projectウィンドウから[PressableButtonHoloLens2]プレファブをシーンに配置します。

f:id:Holomoto-Sumire:20210311044704j:plain

③hierarchyウィンドウから[PressableButtonHoloLens2]の子オブジェクトから[IconAndText]オブジェクトを複製、前回作成したQuad(ここでは判定している指ごとに計3つあるためIndexQuad、middleQuad、RingAndPinkyQuadと名付けました。)の子オブジェクトとして配置します。

f:id:Holomoto-Sumire:20210311044839j:plain

④[PressableButtonHoloLens2]プレファブをシーンから削除します。

⑤Quadの[ButtonConfigHelper]の[IconAndText]オブジェクトの子オブジェクト[UIButtonSquareIcon]オブジェクトをアタッチします。

f:id:Holomoto-Sumire:20210311045547j:plain

⑥[ButtonConfigHelper]の[IconSet]にはMRTKで提供されている[DefaultIconSet]をアタッチします。

f:id:Holomoto-Sumire:20210311045806j:plain

これでアイコンが設定されました。

⑦最後に[ButtonConfigHelper]の[Main label Text]に[IconAndText]オブジェクトの[TextMeshPro]をアタッチします。

f:id:Holomoto-Sumire:20210311050459j:plain

以上の作業をほかの2つの指に対応するQuadにも行います。

f:id:Holomoto-Sumire:20210311045947j:plain

これでMRTKのButtonで使用されているアイコンと同様の仕組みでアイコンおよびテキストの変更、設定が行えるようになりました。

f:id:Holomoto-Sumire:20210311050624j:plain