夜風のMixedReality

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

HoloLensで使えるオリジナルのUIを作成する  Watch その2 ボタンの実装

本本日はMRTKを基にHoloLensで使用できるオリジナルのUIを作成します。

本シリーズではMixedRealityToolkitを基にHoloLensで使いやすいようにカスタマイズしたオリジナルのUIを作成しています。 

今回はwatch型UIを作成しています。

前回はプロトタイプとその製作動機を紹介しました。

redhologerbera.hatenablog.com

今回は続編です。

〇ボタンの実装

前回は腕輪型のリングの表示までを行いました。

f:id:Holomoto-Sumire:20201109090101j:plainf:id:Holomoto-Sumire:20201109091414g:plain

今回はここからボタンを付けインタラクティブなUIとして機能するようにします。

①Projectウィンドウから[PressableButtonHoloLens2]プレファブを手首のオブジェクトである[WatchRing]オブジェクトの子オブジェクトとしてアタッチし複製し二つのボタンを作成します。

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

このボタンが機能を評価するためのプロトタイプでのメニューを表示させるためのボタンになります。

②[WatchRing]オブジェクトの子オブジェクトに空のゲームオブジェクトを作成し[WatchMenu]という名前を付けます。

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

 この[WatchMenu]オブジェクトがHandMenu同様のメニューを表示するためのゲームオブジェクトになります。

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

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

 今回このメニューをwatchでのメニューとして使用できるようにします。

[PalmUpHandMenu_AboveFingertips_3x2]プレファブは[PalmUpHandMenu_AboveFingertips_3x2]オブジェクトでHandMenuの機能を実現しています。

その子オブジェクトに当たる[Visuals]オブジェクト以下の子オブジェクトでメニューとしてのUIを実現しています。

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

今回HandMenuの機能は必要ないので[Visuals]オブジェクトのみを取り出して使用します。

④[PalmUpHandMenu_AboveFingertips_3x2]プレファブを選択し右クリック、[Unpack Prefab]を選択します。

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

[Unpack Prefab]はプレファブ状態を解除します。

 この動作によってプレファブが解除され自由にオブジェクトを改造できるようになります。

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

⑤[Visuals]オブジェクトをドラッグ&ドロップして[WatchMenu]オブジェクトの子オブジェクトへ移動します。

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

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

⑥[Visuals]オブジェクトを非表示にします。

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

⑦[PressableButtonHoloLens2]の一つを選択しinspectorウィンドウから[Button Config Helper]コンポーネントの[On Click()]のイベントを以下のように設定します。

・WatchMenuオブジェクトをアクティブにします。

・自分自身をディアクティブ(非表示)にします。

・もう一つの[PressableButtonHoloLens2]プレファブをアクティブにします。

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

⑧もう一方の[PressableButtonHoloLens2]はinspectorウィンドウではじめディアクティブにしておきます。その状態でinspectorウィンドウから[Button Config Helper]コンポーネントの[On Click()]のイベントを以下のように設定します。

・WatchMenuオブジェクトをディアクティブにします。

・自分自身をディアクティブ(非表示)にします。

・もう一つの[PressableButtonHoloLens2]プレファブをアクティブにします。

これでボタンを押すとメニューが現れ、メニューを閉じるためのボタンが出現し、メニューを閉じるためのボタンを押すと逆にメニューが閉じ、メニューを出すためのボタンが表示されるようになりました。

以上でWatch型UIの機能を見るためのプロトタイプが完成しました。

youtu.be