uGUIをVRで使おう。 UI – Builder #アセットアドカレ

この記事は Unity Assets Advent Calendar 2015 19日目の記事になります。

VRでクールなUIを構築したい。

けど、uGUIをそのまま使っているとそこはかとないUnity臭がツラい。
それを何とかするアセットを紹介します。

また、uGUIをVRで使う手順についても紹介。

UI – Builder

https://www.assetstore.unity3d.com/jp/#!/content/29757

Unity界のBootstrap的なデザインフレームワークの様相を呈するアセット。
これがあればUIのデザインもドンと来い!(かもしれない)

ドキュメント
https://dl.dropboxusercontent.com/u/16485972/AssetStore/UI%20-%20Builder/UI%20Builder%20Documentation.pdf

VRUIのつくりかた

UnityのVR Samplesは、uGUIではなくゴリゴリ書いて作られています。
カーソル選択時のアニメーション表現やサウンドなどなど凝った表現がされており、さらにシンプルな実装で実現。そちらもとても参考になるサンプルです。

ただ、今回はデザインのセンスがBootstrapに任せたいような人向けなので、uGUIを使う方針をとります。
また、uGUIのVR化は既に様々な方が、様々な方法で対応されているので、そちらを参考にします。

ちなみにuGUIのVR化に際して、EventSystemをカスタマイズしていく流れとなります。詳細な技術的な話については凹みさんのTipsを参照ください。

Unity 4.6 から利用できる UI での EventSystem をカスタムする方法について調べてみた – 凹みTips
http://tips.hecomi.com/entry/2014/09/25/233823

Oculus Rift で頭の動き + タップで簡単に Unity 4.6 UI を選択できるやつを作ってみた – 凹みTips
http://tips.hecomi.com/entry/2014/10/02/005313

 

手順その1。UI – Builderで適当なUIを組み立てる

組み立て方は同封のUI-Builder_1.2_Documentation.pdfなどを参照。

今回はサンプルのEmptyStartScene.sceneを利用します。
適当なフォルダを作ってAlt+左ドラッグでコピーしてから開きましょう。

 

手順その2。UIを3D空間に配置する

カメラの配置

このサンプルはScreen Space – Overlayに設定されていたため、カメラ自体がシーンに配置されていなかったため、まずはカメラをシーンに配置します。

CanvasのRender Modeを変更

次にCanvasのRender ModeをWorld Spaceへ変更。変更後に表示されるEvent Cameraの設定項目に、先ほどシーンに追加したCameraをセットします。

>> Unity – マニュアル: Canvas
http://docs.unity3d.com/ja/current/Manual/UICanvas.html

VRUIの位置合わせ

Gameビューで確認しながらCameraの前に来るようにCanvasの位置を調整します。

 

手順その3。ボタンの選択を実装

これがuGUIのVR化のキモ。

対応前。EventSystemでボタン選択などの入力を担当するStandalone Input ModuleやTouch Input ModuleはWorld SpaceのUIに対しては正確に入力することができません。

 

なので、注視カーソル、目線で入力するように対応を行っていきます。

サンプルのプロジェクトからLookInputModule.csを入手

>> New Unity UI + OVR Look-Based Input HOWTO | Unity | Oculus VR Forums
https://forums.oculus.com/viewtopic.php?f=37&t=16710

LookInputSampleV5.zipを入手。解凍して中にあるLookInputModule.csを自分のプロジェクトにもっていきましょう。

 

EventSystemの入力を担当するInput ModuleをLookInputModuleに差し替える

元からあるStandalone Input ModuleやTouch Input Moduleは外し、LookInputModule.csをアタッチします。

これで注視しているボタンを選択状態に、更にFire1ボタン(デフォルト左クリック)でクリックすることが出来るようになりました。

ここまでの図

 

手順その4。注視カーソルの表示

手順3まででとりあえず操作はできるようになりましたが、実際に被って覗いてみると、だだっ広いVR空間でどこを見ているのか分かりにくいものです。(常にリアルでCrosshairが見えるFPSゲーマーは除く)

Cursor用のUI追加

UIのImageで注視カーソルを作成します。

UI→CanvasでCursorとなるキャンバスを作成。名前をCursorに変更します。
(そのままUI→Imageと選んでしまうとStartCanvasの下に作られてしまうため)

Cursorを選び、UI→Imageで追加

カーソルのImage設定

追加したImageのSource Imageに適当な画像を設定。
(カーソル画像もUI – Builderに含まれてます。)

カーソルのColorもお好みで変更可能です。

Cursorキャンバスの設定

EventSystemのLookInputModuleのCursor項目にCursorキャンバスを設定します。

Cursor用に追加したCanvasについては表示だけのため、CursorキャンバスのGraphic Raycasterは外します。

RenderModeをWorld Spaceへ変更します。
カーソルがUIの後ろに隠れないようにするため、CursorのCanvasのOrder in Layerに大きめの数字を設定しましょう。

 

完成の図

これにてuGUIのVR対応が完了。UIを空間に浮かべて表示できるようになりました。
ボタンについては見ている方向に注視カーソルを表示。ボタンの上に移動すると選択。さらに左クリックに指定されているFire1イベントでクリックが出来るようになりました。

 

さらに

ここまでで、実用最小限の実装が完了しました。

あとは注視カーソルがボタンやイベントの実行が可能なものに被ったとき、外れたときに音を鳴らしたり、カーソルの表示にアニメーションを付与したり、ボタンも長押しで選択するようにしたり、それともボタンを使わず注視している時間でイベントが実行されるようにカスタマイズしたり。

このあたりの実装については凹みTipsを参照してください:)

Oculus Rift で頭の動き + タップで簡単に Unity 4.6 UI を選択できるやつを作ってみた – 凹みTips
http://tips.hecomi.com/entry/2014/10/02/005313

 

Unity Assets Advent Calendar 2015 記事一覧へ