夜風のMixedReality

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

SFチックのUIを作る その⑮ ~E.F.S.F.コックピット風UIパネルを作る~

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

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

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

今回はシリーズ第15回目です。

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

 シリーズ2~8回は第一弾としてボタンを作成しました。

 9回から実際にアニメの中に出てくるFUIがHoloLensのMixedReality世界でどのような振る舞いを見せるのかを調査する意味でもアニメの中のFUIをまねながらオリジナルのUIボードを作成しています。

  前回はUnityでUIのlabelに当たる[Text(TMP)]を配置し[コの字型ボタン部]に当たり判定である[BoxCollider]、MRTKでのイベントを返す[Interactable]を設定しました。

redhologerbera.hatenablog.com

〇MRTK Themeを作成する

 前回はオブジェクトの[Interactable]を設定しましたが、今回は実際の変化に該当する[Theme]を作成します。

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

 [Project]ウィンドウを右クリックから[Create][Mixed Reality Toolkit][Theme]で[Theme]を作成します。

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

〇コの字型ボタンのTheme

 [Interactable]のボタンの[Deselected]に[Theme]として作成した[Theme]を設定します。

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

 [Theme Runtime]に[Interactable ColorTheme]を設定します。

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

このThemeは非選択状態のカラーになります。

 同様に[Selected]時の[Theme]

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

 [Selected]の[Theme]は選択状態のカラーになります。

 ここにはデフォルトの緑系統とはわかりやすく分ける意味合いで赤系統の色を選びました。

この状態で実行するとボタンを選択したら赤く変色するようになりました。

f:id:Holomoto-Sumire:20200229100220g:plain

〇テキストのTheme

コの字型ボタンと同様にThemeを作成します。

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

 [Theme Runtime]に[ScaleOffsetColoreTheme]を設定します。

 この設定はターゲットの色とスケールを同時に扱うことができます。

 [Scale]を[0.8]に設定して非選択状態では大きさを若干小さくしました。

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

 また、色をグレーにして非選択状態であることを視覚的に分かりやすくしました。

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

 選択状態に当たる[Select]の[Theme]は非選択時と同様の設定で、色を白に[Scale]を[1]に設定しています。

 以上で[Theme]の完成です。

実行したものが以下になります。

f:id:Holomoto-Sumire:20200229102334g:plain

今回で大分UIらしくなってきました。