HoloLensの開発ツールであるMixedRealityToolkitではサンプルとして配置するだけで使用できるボタンやスライダーなど数多くのUIが同梱されています。
開発者はプレファブとして提供されているこれらをシーンに配置し、Eventを指定するだけでUIとして機能します。
ここではBlenderを用いてSF映画や近未来を描いたアニメ作品に登場するようなFUI(Fictional User Interface)を基にHoloLens用のオリジナルデザインのUIボードを作ります。
今回は第6回目です。 5~10つほど作品が完成したタイミングでGitHubにて公開します。
前回の記事
前回まででメッシュ、ブレンドシェイプ(シェイプキー)のアニメーション、マテリアルが完成しました。
今回はUIとして必要な機能を作成していきます。
#### 〇カーソルに応じてブレンドシェイプのアニメーションを行う。
HoloLensのMixedRealityの世界に限らずUIを作成するうえで必要なことは使用するユーザーのユーザビリティを考えていることです。 これは序章の記事でも勉強しました。
今回のボタンでは、カーソルがボタンに当たった時=選択可能な状態の時ブレンドシェイプのアニメーションで視覚的に選択可能であることを示す機能を作ります。
●OnFocusイベント
ボタンオブジェクトの親オブジェクトに当たり判定である[Box Collider]をアタッチします。
ボタンオブジェクトの親オブジェクトに[Interactive On Focus.cs]をアタッチし、[Target]に自身のオブジェクトを設定します。
Unityの[Project]ウィンドウで右クリックをして[Create]→[MixedReality]→[theme]を選択して新しいThemeを作ります。ここでは[UISystem]という名前を付けました。
作成した[UISystem]のinspectorから[States]を[Default InteractiveStates]に設定して[States]の[Property]の[Focus]を[Default]から[Focus]へと切り替えます。
これでカーソルがボタンオブジェクトにあった場合Animatorの[Trigger]が変化するイベントが発生する仕組みが作成できました。
●Animator Trigger
前回作成したAnimatorが設定されているボタンオブジェクトを選択して[Animator]ウィンドウを表示します。
上部タブから[parameter]に切り替え[+]アイコンを選択し[Trigger]を作成します。
新しい[Trigger]が作成されるので[Focus]という名前を付けます。
同様の作業で[Default]という[Trigger]も作成します。
次にAnimatorの遷移の矢印を選択し[inspector]を表示させます。
[Has Exit Time]のチェックを外し無効化します。 この作業によって時間によってアニメーションの遷移が行われるのではなく別の条件でアニメーションを遷移させる設定へと切り替わります。
[Conditions]の[+]アイコンを選択し[Focus]を選択します。
ここまでの作業でHoloLens上でカーソルがボタンへと合ったときに[InteractiveOnFocus.cs]によって[Animator]の[Trigger]が[Focus]へと切り替わりAnimator側の条件を満たすことでアニメーションが実行されるようになりました。
これをHoloLensで見てみると以下のようになります。
HoloLens Fictional User Interface Test