HoloLensの開発ツールであるMixedRealityToolkitではサンプルとして配置するだけで使用できるボタンやスライダーなど数多くのUIが同梱されています。
開発者はプレファブとして提供されているこれらをシーンに配置し、Eventを指定するだけでUIとして機能します。
ここではBlenderを用いてSF映画や近未来を描いたアニメ作品に登場するようなFUI(Fictional User Interface)を基にHoloLens用のオリジナルデザインのUIボードを作ります。
今回はシリーズ第15回目です。
シリーズ2~8回は第一弾としてボタンを作成しました。
9回から実際にアニメの中に出てくるFUIがHoloLensのMixedReality世界でどのような振る舞いを見せるのかを調査する意味でもアニメの中のFUIをまねながらオリジナルのUIボードを作成しています。
前回はUnityでUIのlabelに当たる[Text(TMP)]を配置し[コの字型ボタン部]に当たり判定である[BoxCollider]、MRTKでのイベントを返す[Interactable]を設定しました。
〇MRTK Themeを作成する
前回はオブジェクトの[Interactable]を設定しましたが、今回は実際の変化に該当する[Theme]を作成します。
[Project]ウィンドウを右クリックから[Create][Mixed Reality Toolkit][Theme]で[Theme]を作成します。
〇コの字型ボタンのTheme
[Interactable]のボタンの[Deselected]に[Theme]として作成した[Theme]を設定します。
[Theme Runtime]に[Interactable ColorTheme]を設定します。
このThemeは非選択状態のカラーになります。
同様に[Selected]時の[Theme]
[Selected]の[Theme]は選択状態のカラーになります。
ここにはデフォルトの緑系統とはわかりやすく分ける意味合いで赤系統の色を選びました。
この状態で実行するとボタンを選択したら赤く変色するようになりました。
〇テキストのTheme
コの字型ボタンと同様にThemeを作成します。
[Theme Runtime]に[ScaleOffsetColoreTheme]を設定します。
この設定はターゲットの色とスケールを同時に扱うことができます。
[Scale]を[0.8]に設定して非選択状態では大きさを若干小さくしました。
また、色をグレーにして非選択状態であることを視覚的に分かりやすくしました。
選択状態に当たる[Select]の[Theme]は非選択時と同様の設定で、色を白に[Scale]を[1]に設定しています。
以上で[Theme]の完成です。
実行したものが以下になります。
今回で大分UIらしくなってきました。