本日はイベント枠です。 昨日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]をアタッチします。
②Projectウィンドウから[PressableButtonHoloLens2]プレファブをシーンに配置します。
③hierarchyウィンドウから[PressableButtonHoloLens2]の子オブジェクトから[IconAndText]オブジェクトを複製、前回作成したQuad(ここでは判定している指ごとに計3つあるためIndexQuad、middleQuad、RingAndPinkyQuadと名付けました。)の子オブジェクトとして配置します。
④[PressableButtonHoloLens2]プレファブをシーンから削除します。
⑤Quadの[ButtonConfigHelper]の[IconAndText]オブジェクトの子オブジェクト[UIButtonSquareIcon]オブジェクトをアタッチします。
⑥[ButtonConfigHelper]の[IconSet]にはMRTKで提供されている[DefaultIconSet]をアタッチします。
これでアイコンが設定されました。
⑦最後に[ButtonConfigHelper]の[Main label Text]に[IconAndText]オブジェクトの[TextMeshPro]をアタッチします。
以上の作業をほかの2つの指に対応するQuadにも行います。
これでMRTKのButtonで使用されているアイコンと同様の仕組みでアイコンおよびテキストの変更、設定が行えるようになりました。