Mawa Town

Mawaという人が作る小さな町でMawaTownです。技術と音楽が好き。

開発日誌::HoloLensアプリ開発にチャレンジvol3. UIの配備

f:id:k_mawa:20180323181005j:plain

コメント

HoloLensいじりが今週また復活させられたので、ちょこちょこ忘れては困るノウハウを書いておきます。

UIはUnityで3Dゲームを作る要領とはけっこう違ったので忘れると大変だと思いメモ。

環境情報

  • Unity 2017.2.1f1
  • HoloToolkit-Unity-2017.2.1.1.unitypackage

参考になった記事

kzonag.hatenablog.com

bluebirdofoz.hatenablog.com

torikasyu.com

おおまかな手順

1:Canvasヒエラルキーに投入
2:CanvasのRendermodeを"WorldSpace"に設定、CameraはRayCastCameraを使うように設定
3:RayCastCameraの"Field of View"をHoloLensCameraとほぼ同期する位置になるように調整
4:Canvas全体の配置、HoloLens向けに大きさを調整
5:InputManager/EventSystemにHoloLensInputModuleを追加
6:Canvas/HomeScreenにTagaLongを設置

手順1:Canvasヒエラルキーに投入

これはいつものようにヒエラルキードラッグアンドドロップするだけです。

手順2:CanvasのRendermodeを"WorldSpace"に設定、CameraはRayCastCameraを使うように設定

CanvasのRendermodeを"WorldSpace"に設定、CameraはRayCastCameraを使うように設定 f:id:k_mawa:20180323182221j:plain ウインドウがなにかでてくるけどもOKで(よかった気が。RayCastCamera使おうみたいなアラートっぽいメッセージだったと思う。(たぶん下記参考記事と同じアラートだったと思います))で、CameraはRayCastCameraを使うように設定

参考記事によると、ざっくりとした理解は、UIの当たり判定機能付きカメラという感じですかね。 torikasyu.com

手順3:RayCastCameraの"Field of View"をHoloLensCameraとほぼ同期する位置になるように調整

RayCastCameraの Field of View を調整 f:id:k_mawa:20180323181451j:plain この値はHoloLensCameraと同じ視野になるように調整しているのだと思われます。

手順4:Canvas全体の配置、HoloLens向けに大きさを調整

f:id:k_mawa:20180323181505j:plain 通常のUnity3DゲームよりUIは小さめになることが多そうな印象です。初期の配置位置は、(x,y,z)=(0,0,1)~(0,0,2)あたりですかね、HoloLensCameraのちょっと前という感じです。

ボタンもスケール調整 f:id:k_mawa:20180323181533j:plain (これも小さめに調整することが多そう)

手順5:InputManager/EventSystemにHoloLensInputModuleを追加

HoloLensInputModuleを追加します。 f:id:k_mawa:20180323181525j:plain 特に数値は初期値からいじってない(はず)

手順6:Canvas/HomeScreenにTagaLongを設置

TagaLongを設置、数値調整の必要がありました。下記のようにしました。 f:id:k_mawa:20180323182904j:plain

手順7:機能しました

追従型のUIが出力され、ボタンも反応します f:id:k_mawa:20180323185109j:plain