VR Samplesからソースを拝借して視線選択UIを作ってみる

先日の続き。

VRのサンプルプロジェクトとして、Unityが公開してくれているこんなものがある。
https://www.assetstore.unity3d.com/jp/#!/content/51519

また、こんな解説を用意してくれている。
Unity - VRでのインタラクション

視線をあわせて選択できるUIが欲しかったので、上記をぱｋ・・参考・・ぱくらせて頂いた話。

とりあえず新しいプロジェクトを作ってCanvasを置いた。

見やすいようにPanelも追加してある。

視界の中心に点を表示する

まずは自分が向いている方向の中心がわかるようにするための点を準備する。

Camera(eye)の下にCanvasを追加し、Render Modeを「World Space」にする。

Event CameraにはCamera(eye)を指定。（上の画像では忘れてたのでNoneになっている）

位置は親と同じ、大きさとScaleは適当に2、0.5を指定。

さらにCanvasの下にImageを追加し、適当に大きさを2、Scaleを0.02あたりにする。

表示する点はVR Samplesからありがたく拝借。

Source Imageに「GUITargetReticle」、Materialに「GUIOverlay」を指定する。

色は自分がわかりやすいもので。上の画像では#FF2266FFを指定。

この時点でビルドしてHMDを覗いてみても点は見えないので悪しからず。

次にVR Samplesから下記のスクリプトを拝借してカメラに追加する。

・Reticle

・VREyeRaycaster

・VRInput

これらのスクリプトの必要な項目を埋めていく。

埋めた結果は下記の通り。

具体的には・・・

・Reticle

　Imageに先ほど作ったCanvas下のImageを指定

　Reticle Transformに上記ImageのRect Transformを指定（Imageを直接D&Dでいい）

　CameraにCamera(eye)を指定

・VREyeRaycaster

　CameraにCamera(eye)を指定

　ReticleにCamera(eye)に追加しているReticleスクリプトを指定

　Vr InputにCamera(eye)に追加しているVRInputスクリプトを指定

ビルドしてHMDを覗いてみると、中心に指定した色で点が表示されているのが見えるはず。

視点をあわせて選択できるボタンを追加する

PanelにButtonを追加する。

ButtonにはBox ColliderとVR Samplesから拝借したVRInteractiveItemスクリプトを追加する。

Box ColliderのSizeはButtonの大きさに合わせた。Z軸は適度な薄さということで10を指定。

新しくスクリプトを作成して、下記のようなコードを記述する。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using VRStandardAssets.Utils;
using UnityEngine.EventSystems;

public class VRButton : MonoBehaviour {

    Button button;
    VRInteractiveItem vrIntrItem;

    // Use this for initialization
    void Start () {

    button = GetComponent<Button>();
    button.onClick.AddListener(PushedButton);

    vrIntrItem = GetComponent<VRInteractiveItem>();
    vrIntrItem.OnOver += OnOver;
    vrIntrItem.OnOut += OnOut;

    }

    // Update is called once per frame
    void Update () {
        
    }

    // ボタンが押されたときの挙動
    void PushedButton()
    {
        Debug.Log("Button Pushed.");
    }

    void OnOver()
    {
        // ボタンを選択状態にする
        button.Select();
    }

    void OnOut()
    {
        // 選択状態を解除する
        EventSystem.current.SetSelectedGameObject(null);
    }
}

ここまでできたらビルドしてみよう。
視線をボタンに向けるとHighlighted Colorに変わり、Fire1にあたる右側のViveコントローラのメニューボタンを押すとボタンを押すことができるはず。
下記はわかりやすいようにHighlighted Colorを変更している。