【HoloLens】Unityでスタートメニューみたいな追従するUIを作る
HoloLensの機能を確認するためのUnityプロジェクトを作り始めました。
いろいろな機能を確認できるように、
- Launcherシーンを用意して確認できる項目をリスト表示
- リストから項目を選択して各機能のシーンに遷移
という構成にしました。
こんなかんじです。
エミュレーターなので分かりにくいですが、HoloLensのスタートメニューのような自分に追従するUI表示にしています。
UnityのUIシステムとHoloToolkitの機能を利用してこの追従UIを作ったので、その実装方法を書きます。
通常のHoloLens開発で必要な項目については書いてないところもあるので、そのあたりはHoloLensのドキュメントなどご覧いただければと思います。
まだいろいろ試行錯誤している段階なので最適な方法ではないかもしれませんが、とりあえず今のところこんなかんじという内容です。
カメラ設定
エディタ上のシーンビュー・ゲームビューでレイアウトを調整すると、ビルドして実行した際にUIのサイズが全然違うように表示されることがあります。
これは、実行時にUnityが自動でCameraのField of Viewの値を更新しているのが原因のようです。
エディタ上とビルド後との見た目を合わせるために、Field of VIewの値をビルド後と同様の値に設定します。
ここでは17.9898にしていますが、もしかしたらエミュレーターや実機の設定によって値は異なるかもしれません。実際の値をテスト表示してみるのが確実だと思います。
キャンバス設定
UIをワールド空間上に配置するため、CanvasのRender ModeをWorld Spaceに設定し、Event CameraにMain Cameraを設定します。
Rect TransformのScaleを0.001にしているのは、後述するUIオブジェクトのレイアウトを組みやすくするためです。
Unityの座標の単位はメートルなので、キャンバスのスケールを1000分の1にしておくことで、UIオブジェクトをミリメートル単位で設定するようにしています。
テキストがボケて表示される場合はDynamic Pixels Per Unitの値を調整することで改善するようです。ここでは10に設定しています。
EventSystem設定
EventSystemオブジェクトに HoloLens Input Moduleを追加します。
これでAirTap等のジェスチャーでUIオブジェクトを操作できるようになります。
UIオブジェクト配置
キャンバスの子としてUIオブジェクトを配置していきます。
キャンバスのスケールを0.001に設定したので、UIオブジェクトのRecTransform設定の単位はミリメートルになります。
ここでは追従するウィンドウとしてLauncherWindowオブジェクトを作成しています。
Pos Z=1000, Width=200, Height=250となっているので、1m先に幅20cm高さ25cmの板が浮いているようなイメージです。
あとは通常のUIのようにテキストやボタンなどで好きなレイアウトを組んでいきます。
Tagalongコンポーネント
ウィンドウとなるオブジェクトにTagalongを追加します。
Tagalongを追加すると自動でBox ColliderとInterpolatorも追加されます。
TagalongはHoloToolkitに含まれるコンポーネントで、画面内にBoxColliderが収まっているかどうかを監視して、画面内に留まるよう位置を更新します。
いろいろ設定項目がありますが、ここでは画像のように設定しています。
Mimimum Horizontal/Vertical Overlapは、追従動作開始のための画面とコライダーとが重なり割合の閾値です。0.5に設定されている場合、コライダーが半分以上画面外に出たときに追従動作が始まります。
Target Horizon/Vertical Overlapは、追従動作の目標となる画面とコライダーとの重なり割合の値です。1に設定されている場合、コライダー全体が画面内に収まるように追従動作が発生します。
Billboardコンポーネント
ウィンドウとなるオブジェクトにBillboardを追加します。
これもHoloToolkitに含まれるコンポーネントです。
Pivot Axisで指定した軸について、常にカメラの方向を向くようにRotationが更新されます。
今回はX軸もY軸も常にこちらに向いてほしいので、Freeに設定しています。
できあがり
ビルドして実行してみて、うまく追従されていればOKです。
追従動作が気に入らない場合は、Tagalongの設定をいろいろいじってみると気持ち良くなるかもしれません。
なんとなくレイアウトが初期のFFみたいになって、なかなか気に入っています。
これでようやく機能確認の準備ができたので、次からは機能の実装について書いていこうと思います。
