Oculus Go 開発メモ - uGUI編


# はじめに

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


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

まずはじめに、[Oculus Integration](https://assetstore.unity.com/packages/tools/integration/oculus-integration-82022?aid=1011lGbg&utm_source=aff)をAsset Storeからダウンロードしてインポートします。

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


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

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

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

![スクリーンショット 2018-06-01 17.35.03.png](https://qiita-image-store.s3.amazonaws.com/0/20722/6bf00f7c-66b4-7984-7464-949dc7cf857e.png "スクリーンショット 2018-06-01 17.35.03.png")


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

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

![スクリーンショット 2018-06-01 17.21.11.png](https://qiita-image-store.s3.amazonaws.com/0/20722/cac7c013-f0cc-bd2e-e6b9-7bf8bb0dc682.png "スクリーンショット 2018-06-01 17.21.11.png")


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

ここからが本番。

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

## 4. OVRCameraRigを準備する

![スクリーンショット 2018-06-01 17.34.19.png](https://qiita-image-store.s3.amazonaws.com/0/20722/8c8541e2-89ee-0b87-09c7-fca2224760ef.png "スクリーンショット 2018-06-01 17.34.19.png")


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

![スクリーンショット 2018-06-01 17.33.31.png](https://qiita-image-store.s3.amazonaws.com/0/20722/fd7cb718-be11-a89d-332d-494b8f4a687e.png "スクリーンショット 2018-06-01 17.33.31.png")


## 5. uGUIの構成 - Canvas

### 5-1. Canvasを作成する

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

![スクリーンショット 2018-06-01 17.36.22.png](https://qiita-image-store.s3.amazonaws.com/0/20722/74c158b2-c313-1292-07f2-a356cc830dd2.png "スクリーンショット 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](https://qiita-image-store.s3.amazonaws.com/0/20722/acd60fa8-ec89-b9a1-04b4-db9846d9c79b.png "スクリーンショット 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−２の時と同じOVRCameraRig/TrackingSpace/CenterEyeAnchorを設定します。


![スクリーンショット 2018-06-01 17.51.47.png](https://qiita-image-store.s3.amazonaws.com/0/20722/3c51810b-2835-f123-5cfb-20862620886a.png "スクリーンショット 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](https://qiita-image-store.s3.amazonaws.com/0/20722/c94a5bf1-bb20-6e94-b762-9c17d2680bd3.png "スクリーンショット 2018-06-01 17.56.57.png")

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

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

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

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

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

Canvas:

![スクリーンショット 2018-06-01 19.09.55.png](https://qiita-image-store.s3.amazonaws.com/0/20722/9e8676da-19a1-e5af-9617-7853a661bf70.png "スクリーンショット 2018-06-01 19.09.55.png")


Button:

![スクリーンショット 2018-06-01 19.10.05.png](https://qiita-image-store.s3.amazonaws.com/0/20722/f70ea673-9e3f-fb76-55d5-5fee271f4f53.png "スクリーンショット 2018-06-01 19.10.05.png")


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

```csharp: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](https://assetstore.unity.com/packages/essentials/tutorial-projects/vr-samples-51519?aid=1011lGbg&utm_source=aff)の中に含まれるVRSampleScenes/Shaders/UIOverlayシェーダーを適用したマテリアルをすべてのUIコンポーネント（Button等）に適用すると良い。

シェーダーの場所：
![スクリーンショット 2018-06-02 9.22.25.png](https://qiita-image-store.s3.amazonaws.com/0/20722/9fef5f4c-40e7-8035-280e-ac3ee5b2c818.png "スクリーンショット 2018-06-02 9.22.25.png")

ボタンにシェーダーを適用した例：
![スクリーンショット 2018-06-02 9.29.46.png](https://qiita-image-store.s3.amazonaws.com/0/20722/609437c1-40bb-10b7-95b5-ecfea1ac2a79.png "スクリーンショット 2018-06-02 9.29.46.png")

参考：[VRでのインタラクション](https://unity3d.com/jp/learn/tutorials/topics/virtual-reality/interaction-vr?playlist=47286) 「レティクルをその他のゲームオブジェクトの上に描画する」