夜風のMixedReality

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

SFチックのUIボードを作る その⑥ ~ボタンとしての機能の作成~

HoloLensの開発ツールであるMixedRealityToolkitではサンプルとして配置するだけで使用できるボタンやスライダーなど数多くのUIが同梱されています。

開発者はプレファブとして提供されているこれらをシーンに配置し、Eventを指定するだけでUIとして機能します。

ここではBlenderを用いてSF映画や近未来を描いたアニメ作品に登場するようなFUI(Fictional User Interface)を基にHoloLens用のオリジナルデザインのUIボードを作ります。

今回は第6回目です。 5~10つほど作品が完成したタイミングでGitHubにて公開します。

 前回の記事

redhologerbera.hatenablog.com

 前回まででメッシュ、ブレンドシェイプ(シェイプキー)のアニメーション、マテリアルが完成しました。

 今回はUIとして必要な機能を作成していきます。

 #### 〇カーソルに応じてブレンドシェイプのアニメーションを行う。

 HoloLensのMixedRealityの世界に限らずUIを作成するうえで必要なことは使用するユーザーのユーザビリティを考えていることです。 これは序章の記事でも勉強しました。

redhologerbera.hatenablog.com

 今回のボタンでは、カーソルがボタンに当たった時=選択可能な状態の時ブレンドシェイプのアニメーションで視覚的に選択可能であることを示す機能を作ります。

●OnFocusイベント

 ボタンオブジェクトの親オブジェクトに当たり判定である[Box Collider]をアタッチします。

 ボタンオブジェクトの親オブジェクトに[Interactive On Focus.cs]をアタッチし、[Target]に自身のオブジェクトを設定します。

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

 Unityの[Project]ウィンドウで右クリックをして[Create]→[MixedReality]→[theme]を選択して新しいThemeを作ります。ここでは[UISystem]という名前を付けました。

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

作成した[UISystem]のinspectorから[States]を[Default InteractiveStates]に設定して[States]の[Property]の[Focus]を[Default]から[Focus]へと切り替えます。   f:id:Holomoto-Sumire:20200205092808j:plain

 これでカーソルがボタンオブジェクトにあった場合Animatorの[Trigger]が変化するイベントが発生する仕組みが作成できました。

●Animator Trigger

 前回作成したAnimatorが設定されているボタンオブジェクトを選択して[Animator]ウィンドウを表示します。

 上部タブから[parameter]に切り替え[+]アイコンを選択し[Trigger]を作成します。

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

 新しい[Trigger]が作成されるので[Focus]という名前を付けます。

 同様の作業で[Default]という[Trigger]も作成します。

 次にAnimatorの遷移の矢印を選択し[inspector]を表示させます。

 [Has Exit Time]のチェックを外し無効化します。 この作業によって時間によってアニメーションの遷移が行われるのではなく別の条件でアニメーションを遷移させる設定へと切り替わります。

 [Conditions]の[+]アイコンを選択し[Focus]を選択します。

 ここまでの作業でHoloLens上でカーソルがボタンへと合ったときに[InteractiveOnFocus.cs]によって[Animator]の[Trigger]が[Focus]へと切り替わりAnimator側の条件を満たすことでアニメーションが実行されるようになりました。

 これをHoloLensで見てみると以下のようになります。


HoloLens Fictional User Interface Test