OculusGoをuGUIに対応させる #OculusGoDev


ストアのレビューから、OculusGoでGUIを使う必要ができてきました。
<img width="1042" alt="ビルドのテスト結果_-_Oculus.png" src="https://qiita-image-store.s3.amazonaws.com/0/3844/9e9be803-1e93-dcdb-e4b2-e285fe656e2e.png">

 以下翻訳内容

ユーザーが戻るボタンを押すと、アプリはUIの1つのレベルに戻るか、アプリを終了するオプション付きのメニューを表示する必要があります。


ということでGUIの設定の仕方を学びつつGoにて対応するようにします。

# TLDR

以下にGaerVRにおける選択操作の方法が記載されています。
[Easy Controller Selection](https://developer.oculus.com/blog/easy-controller-selection/) [\[翻訳版\]](https://taiyaq.com/contents/AmP92QBlZpGxxH6xGWM254p438)

ぶっちゃけ上記の抜粋になります。が上記の場合はGUI以外の対応も入っているのでこちらのほうがシンプルな作業となります。




# UnityでのGUIについて
UnityにおけるGUI(uGUI)はゲーム世界でGUIアプリが使えるかのようです。
それにはいくつかのコンポーネントが組み合わさっているようです。
その中で中心となるのがEventSystemです（UIからCanvasを設定すると自動的に入るコンポーネント）。

今回は上述した``Easy Controller Selection`` から必要なコンポーネントを拾いEventSystem等を調整することでGoコントローラーからGUIを操作できるようにします。

# 全手順まとめ

## 事前に必要なアセットを組み込んでおく

通常どおりプロジェクトを作成し必要なアセットを組み込みます。

* [Oculus Integration](https://assetstore.unity.com/packages/tools/integration/oculus-integration-82022)
* [Easy Controller Selection](https://developer.oculus.com/blog/easy-controller-selection/)のPart1パッケージ

## まずは必要なUIを組み立てる

まずは通常通りGUIを組み合わせて見ます。

![Unity_2018_1_0f2_Personal__64bit__-_SampleScene_unity_-_OculusGoWithUGUI_-_PC__Mac___Linux_Standalone__Personal___Metal_.png](https://qiita-image-store.s3.amazonaws.com/0/3844/7068a513-f511-662b-77cf-479de5809319.png)

上記のように設定します。
階層はこんな感じです
![Unity_2018_1_0f2_Personal__64bit__-_SampleScene_unity_-_OculusGoWithUGUI_-_PC__Mac___Linux_Standalone__Personal___Metal_.png](https://qiita-image-store.s3.amazonaws.com/0/3844/f17b2b7c-81d9-3c87-4147-907c7a5ff3bd.png)

ロジックは以下のように組んでPanelに登録することにしました。本来はどこに登録しておくべきなのでしょうか？

```csharp:script/UICOntroler.cs

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

public class UIController : MonoBehaviour {

    [SerializeField] private UnityEngine.UI.Text LogLabel;

    public void OnClick() {
        LogLabel.text = "onClick!";
    }

    public void OnCheckd(bool checkd) {
        LogLabel.text = "chekd = " + checkd;
    }
    public void OnValueChenged(float value) {
        LogLabel.text = "value = " + value.ToString();
    }
}

```

それぞれを設定します。

![2](https://qiita-image-store.s3.amazonaws.com/0/3844/a18d8153-8716-35f4-11b8-fd770260ab1a.png)

![3](https://qiita-image-store.s3.amazonaws.com/0/3844/40cc84dd-1b94-82e1-e5b5-65b1983b9907.png)


![4](https://qiita-image-store.s3.amazonaws.com/0/3844/ab94f080-a269-e942-8f66-85e24b311b9e.png)

Panelに登録したスクリプトのコンポーネントにラベルを設定しておきます。
![5](https://qiita-image-store.s3.amazonaws.com/0/3844/1b2ac4df-3b7d-4e2f-97d8-d434f0b306e2.png)

上記時点で動くかどうか確認しておいてください。

## Goの初期設定

まず普通にコントローラー等を含めて動くようにしておくには以下のようにします。
この辺はGoでアプリを作るには必須の作業なのでここで細かく言及する必要はないでしょう。

1. MainCameraの削除
2. OVRCameraRigの設置
3. RightHandAnchorとLeftHandAnchorにTrackedRemoteを設置
4. Build用の各種設定を行う[(参考)](https://qiita.com/m0a/items/98cdc1e03cf067769578)

## 今回のメイン作業

では実際にメニューが動くようにしていきます。

### uGUIの設定を変更する

Canvasの設定を以下のように変更します。

![Unity_2018_1_0f2_Personal__64bit__-_SampleScene_unity_-_OculusGoWithUGUI_-_PC__Mac___Linux_Standalone__Personal___Metal_.png](https://qiita-image-store.s3.amazonaws.com/0/3844/28885ed1-33e6-4aa4-6914-65dbbf3b3d01.png)

カメラの正面に来るように調整します。
![Unity_2018_1_0f2_Personal__64bit__-_SampleScene_unity_-_OculusGoWithUGUI_-_PC__Mac___Linux_Standalone__Personal___Metal_.png](https://qiita-image-store.s3.amazonaws.com/0/3844/a8022716-b65b-c4e8-5cd1-fcd6e13d036f.png)

配置も調整しました。
これは何をやっているかというと初期状態ではスクリーンに配置している感じでしたが
Goでは上記設定を行うことで実態として空間に配置するイメージとなりZ方向の座標の設定等も必要になります。

![Unity_2018_1_0f2_Personal__64bit__-_SampleScene_unity_-_OculusGoWithUGUI_-_PC__Mac___Linux_Standalone__Personal___Metal_.png](https://qiita-image-store.s3.amazonaws.com/0/3844/51f8c159-cf4f-5890-1629-94f358bc7818.png)


### レーザーポインターの設定

コントローラーから光線が出るようにして、いまカーソルを合わせているのがどこかわかるようにします。

空のGameObjectを作成し名前をLaserPointerとします。
LineRendererコンポーネントを追加してレーザポインターのようなものを作ります。
マテリアルはimportしたサンプルに入っていたSelectionRayを使っています。

更にアセット内のOVRInputSelection/InputSystem内のOVRPointerVisualizerを追加することでポインターが使えるようになります。

![Unity_2018_1_0f2_Personal__64bit__-_SampleScene_unity_-_OculusGoWithUGUI_-_Android__Personal___Metal_.png](https://qiita-image-store.s3.amazonaws.com/0/3844/a5c6e032-9eca-551c-d9d9-a35bb568cb4d.png)


ここまでいれた状態で動かすとレーザポインターが出るようになりました。がGUIの操作はできないです。引き続き作業を行います。

## コンポーネントの入れ替え作業と設定作業

ではコンポーネントを順次入れ替えていきます。複数箇所あるのでご注意ください。
必要なコンポーネントはすべて
`Assets/OVRInputSelection/InputSystem`にあります。名前がかぶっているコンポーネントがあるので気をつけてください。

## EventSystemの変更
![Unity_2018_1_0f2_Personal__64bit__-_SampleScene_unity_-_OculusGoWithUGUI_-_Android__Personal___Metal_.png](https://qiita-image-store.s3.amazonaws.com/0/3844/c37251a8-c408-af01-14a5-847dafca8ad7.png)

`StandaloneInputModule`を削除して、`OVRInputModule`を追加します。
TrackingSpaceにOVRCameraRig内のTrackingSpaceを設定します。
以降何箇所かに登場しますがこれを設定せよという意味になります。

## Canvasの変更

![Unity_2018_1_0f2_Personal__64bit__-_SampleScene_unity_-_OculusGoWithUGUI_-_Android__Personal___Metal_.png](https://qiita-image-store.s3.amazonaws.com/0/3844/dcaf6662-f5a6-1176-7142-4b8791b691e1.png)



EventCameraにOVRCameraRig内のCenterCameraを設定し、
GraphicRaycasterを削除し代わりにOVRRaycasterを追加します。

# 最終結果

以下のようになれば成功です。
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">OculusGoでuGUIが使えるようになりました。後で記事にまとめます。 <a href="https://t.co/RMKD5mtKhQ">pic.twitter.com/RMKD5mtKhQ</a></p>&mdash; m0a (@abe00makoto) <a href="https://twitter.com/abe00makoto/status/1005700641065332736?ref_src=twsrc%5Etfw">2018年6月10日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>



参考資料:
https://docs.unity3d.com/ja/current/ScriptReference/EventSystems.BaseInputModule.html

http://tips.hecomi.com/entry/2014/10/02/005313
https://developer.oculus.com/blog/easy-controller-selection/
https://unity3d.com/jp/learn/tutorials/topics/user-interface-ui/ui-button?playlist=17111