Unity
VR
OculusGo

Oculus Go 開発メモ - uGUI編

はじめに

UnityのuGUIをOculus Goで使うためのメモです。
今回は、uGUIのButtonを1つ用意して、VR画面上で視線を向けてトリガーを引くことでButtonをクリックできるようにします。

1. Oculus Integration をインポートする

まずはじめに、Oculus IntegrationをAsset Storeからダウンロードしてインポートします。

インポートすると、「新しいバージョンがあります」などと言われることがあるので、素直にアップデートして、Unityを再起動する。

2. UIシーンにあるOVRGazePointerをPrefabにしておく。

後で必要になるので、OVRGazePointerのプレハブを作成しておきます。

2-1. Oculus/VR/ScenesにあるサンプルシーンUIを開きます。

スクリーンショット 2018-06-01 17.35.03.png

2-2. OVRGazePointerをプレハブ化する

UIシーンに含まれるOVRGazePointerを適当なフォルダにドラッグ&ドロップしてプレハブにしておきます。

スクリーンショット 2018-06-01 17.21.11.png

3. 新しいSceneを作成する。

ここからが本番。

新しいSceneを作成します。今後の作業はこのScene上で行います。

4. OVRCameraRigを準備する

スクリーンショット 2018-06-01 17.34.19.png

Oculus/VR/PrefabsにあるOVRCameraRigをScene上にドラッグ&ドロップします。
また、最初からあるMain Cameraは削除します。

スクリーンショット 2018-06-01 17.33.31.png

5. uGUIの構成 - Canvas

5-1. Canvasを作成する

Hierarchy内で右クリック>UI>CanvasでCanvasを作成します。

スクリーンショット 2018-06-01 17.36.22.png

5-2. CanvasのRender ModeをWorld Spaceにする。

CanvasのRender Mode欄を"World Space"に変更します。

また、Event Camera欄を、Hierarchyの中から、OVRCameraRig/TrackingSpace/CenterEyeAnchorに設定します。

5-3. CanvasからGraphic Raycasterを削除する。

5-4. Canvasに新たにOVR Raycasterを追加する。

CanvasにOculus/VR/Scripts/UtilにあるOVRRaycasterを追加します。
OVRRaycasterのBlocking Objects欄を"All"に変更します。

Canvasの設定は以上です。
ここまでやると以下の画像のようになっているはずです。

スクリーンショット 2018-06-01 17.46.43.png

6. EventSystem

Canvasを作成したときに、自動でEventSystemが作成されますが、このEventSystemからStandalone Input Moduleを削除して、新たにOculus/VR/Scripts/UtilにあるOVRInputModuleを追加します。

OVR Input ModuleのRay Transform欄に5−2の時と同じOVRCameraRig/TrackingSpace/CenterEyeAnchorを設定します。

スクリーンショット 2018-06-01 17.51.47.png

7. OVRGazePointer

2-2で作成しておいたOVRGazePointerのプレハブを、Scene上にドラッグ&ドロップして実体化します。

作成したOVRGazePointerのRay Transform欄は、またしても5-2と同じOVRCameraRig/TrackingSpace/CenterEyeAnchorを設定します。

スクリーンショット 2018-06-01 17.56.57.png

なお、OVRGazePointerが無いとGUIの操作が出来ません。

8. 好きにUI部品をCanvasに並べる

7までで、基本的な仕組みは出来上がっていますので、あとはCanvasにボタンやスライダーなどを好きに並べれば、Oculus GoのVR画面上で視線とトリガーに反応するようになっているはずです。

ここでは、試しにButtonを1つ置いてみます。

CanvasとButtonの位置やScaleをいろいろ調整した結果の画像を載せておきます。あくまでサンプルですので、このとおりである必要はありません。

Canvas:

スクリーンショット 2018-06-01 19.09.55.png

Button:

スクリーンショット 2018-06-01 19.10.05.png

Buttonには、下記のButtonAction.csを貼り付けて、Button ActionのImage欄にはButton自身を設定しています。
また、ButtonのOn Click()で、ButtonActionのOnClickメソッドを呼び出すようにしています。

ButtonAction.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class ButtonAction : MonoBehaviour {
    [SerializeField] Image image;

    public void OnClick(){
        image.color = Color.red;
    }
}

8. Build

一応、ビルド時の注意事項。

・Build SettingsでAndroidにSwitch Platformしておく。
・Player Settingsで
  - Package Nameを適当につけておく。
  - Minimum API Levelをそれなりにする(ここではAndroid7.0)
  - XR SettingsのVirtual Reality SDKsにOculusを追加しておく。

あとは、Oculus Go を開発者モードにしておけば、Build & Run で転送されて動くはず。

9. 補記:UIを他のゲームオブジェクトの上に描画するメモ

今のままでは、UIを画面上で自由に動くようにしたりすると(RPGで自キャラのステータスを表示したりする場合など)、他のゲームオブジェクトがあった時に、UIがそのオブジェクトにめり込んで表示されないことがある。
これを回避するには、別のアセットVR Samplesの中に含まれるVRSampleScenes/Shaders/UIOverlayシェーダーを適用したマテリアルをすべてのUIコンポーネント(Button等)に適用すると良い。

シェーダーの場所:
スクリーンショット 2018-06-02 9.22.25.png

ボタンにシェーダーを適用した例:
スクリーンショット 2018-06-02 9.29.46.png

参考:VRでのインタラクション 「レティクルをその他のゲームオブジェクトの上に描画する」