夜風のMixedReality

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

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

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

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

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

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

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

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

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

 前回からBlenderを用いてモデリングを行っています。

redhologerbera.hatenablog.com

〇テキスト

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

 [Hierarchy]ウィンドウの上部[Create]タグから[Text-TextMeshPro]を選択し作成した[Text(TMP)]をボタン部のオブジェクトの子オブジェクトとして配置します。

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

 [Text(TMP)]の位置や大きさを[コの字型ボタン]にあうように配置します。

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

 [コの字型ボタン]に当たり判定である[BoxCollider]とMRTKでアクションに対しイベントを返す[Interactable.cs]をアタッチします。

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

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

今回はただのボタンではなく、ラジオボタンとして使用するため[Interactable.cs]の[Selection Mode]を[Toggle]に設定します。

 [Profiles]にはコの字型ボタンを設定しています。

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

 [Add Profle]を選択し二つ目の[Target]に[Text(TMP)]を指定します。

 次回以降[Profile]を作成し、UIとして視覚的にボタンの選択状態と非選択状態がわかるような機能を盛り込みます。