夜風のMixedReality

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

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

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

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

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

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

E.F.S.FUIパネルのまとめ記事です。

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

作品は次のURLで公開しています。

github.com

〇デザイン

 今回のE.F.S.FPlaneは『HoloLensのMixedReality空間でのアニメや映画に出てくるようなFUI(Fake UI /Fictional UI)がどのような振る舞いを見せるか』を調べるために『機動戦士ガンダムUC』に登場する地球連邦宇宙軍(Earth Federation Space Force=E.F.S.F)のメカニックUIを参考にDescription(説明用)パネルを製作しました。

 第一回では作中の機能を考察しました。

redhologerbera.hatenablog.com

Blenderでのモデリング

 今回もオブジェクトの作成にはフリーのモデリングツールであるBlenderを使用しました。

 今回ののパネルは左右対称であるため[モディファイア]の[ミラー]を用いることで簡単に左右対称のオブジェクトを作成しました。

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

redhologerbera.hatenablog.com    第3回ではサイドの[コの字型ボタン]はメッシュ一つ一つがそれぞれ独立したボタンとして使用するため[Ctrl]キー+[P]キーでメッシュを分離しました。

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

redhologerbera.hatenablog.com

 第4回ではUnityではオブジェクトごとのマテリアル設定はできるもののメッシュごとのマテリアル設定はできないためBlenderでマテリアル割りをそれぞれ行ってUnityへエクスポートしました。

redhologerbera.hatenablog.com

 〇Unityでのマテリアル

 第5回ではBlenderからエクスポートしてUnityでマテリアルを作成しました。

 Blenderでマテリアルを作成していればUnityでもそのマテリアルが適応されますが、ここでは最初からUnityで使用することを前提に作成していたためUnityでマテリアルを作成しています。

redhologerbera.hatenablog.com

 E.F.S.FUIパネルには主に3種類のマテリアルを作成しました。

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

 サイドパネルはシリーズ第一回から作成したボタンで使用したハニカム構造のテクスチャを適応してアクセントとして一部に同じマテリアルの[Albedo]のみを変えて青色にしたマテリアルを使用しています。

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

 [コの字型ボタン]部分はこちらもシリーズ一回目のボタンで使用したノイズのテクスチャを使用しています。

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

 バックパネル部にはSF感を持ちつつコの字型ボタン、サイドパネルのように派手ではなくあくまで背景であることを意識して、メモリが入ったテクスチャをマテリアルとして使用しました。

 f:id:Holomoto-Sumire:20200227105020p:plain

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

〇機能の作成

 第6回ではUIとして必須なテキストを配置しました。

redhologerbera.hatenablog.com

 第7回ではボタンとしての機能を作成しました。

 MixedRealityToolkitの[Interactable.cs]を使用しています。

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

[ Interactable.cs]の[General]の[SectionMode]を[Toggle]にすることでラジオボタンとしての機能を作成しました。

  redhologerbera.hatenablog.com

[Profile]の[Theme]で選択状態、非選択状態のアクションを作成しました。

 非選択状態ではコの字型ボタンは緑、テキストはグレーですが、選択状態ではコの字型ボタンは赤、テキストは少しスケールが大きくなりはっきりとした白と変化するようにしました。

f:id:Holomoto-Sumire:20200229102334g:plain   redhologerbera.hatenablog.com

以上でE.F.S.FUIパネルの完成です。

作品は次のGitHubで公開しています。MITライセンスなのでぜひ使ってみてください。

github.com