VRコンテンツの作り方(13) Unityで汎用スマホ向けVRアプリを作る(2) 視線入力を実現する

前回に引き続き、Google VR SDKを利用したVRアプリの実装を進めていきます。今回は入力部分を実装します。

視線ターゲットを表示

まず、視点となる位置に点(Reticle)を描画します。

Assets内にある「GoogleVR/Prefabs/UI/GvrReticle」をシーンにある「Main Camera」の直下にドロップして追加します。

これだけで、視線ターゲット(点)が表示されるようになります。

UGUIのボタンを配置

以下の手順でUGUIのボタンを含むUIを設定します。

Hierarchyの「Create > UI > Button」を選択します。シーン内に、ボタンを含むCanvas、UGUIの管理のためのEventSystemも自動的に作成されます。

＜Canvasの設定＞

名前 : UICanvas
Canvas - Render Mode:Word Space
「Pos X:0, Pos Y:2, Pos Z:3」
「Width:10, Height:4」

＜Buttonの設定＞

「Pos X:0, Pos Y:0, Pos Z:0」
「Width:100, Height:30」
「Scale X:0.01, Y:0.01, Z:1」

これで下図のようなボタンが配置されます。

UGUIのボタンに反応させる

前もって作成した視線ターゲット(点)を、このUGUIのボタンに反応させるのはGoogle VR SDKに含まれる機能で簡単に実現できます。

UGUIを作成したときに作られたEventSystemに、Assets内にある「GoogleVR/Scripts/GazeInputModule」をアタッチします。

次に、上記EventSystemにアタッチされているStandard Input Moduleのチェックを外して無効化します。

これだけで、視線がボタンに重なったときに丸くなり、画面タッチをすることで、ボタン押下イベントが発生します。

ボタン押下イベントの処理内容も、通常のUGUIのボタン用のOnClickイベントが発動しますので、既にUGUIを使っていた方には問題なく使えるはずです。

OnClickイベントの使い方が分からない方は、本連載の第8回内の「ボタン押下時の処理と数字の処理」という項目を参照して下さい。

特定のキューブに反応させる

次に、シーン内に配置してある特定GameObjectに視線が反応するようにさせます。

シーン内のオブジェクトを直接選択できるようになるので、各種コンテンツで使える技術です。

これから作業するにあたって、シーン内にあるGameObject(キューブ)のうち対象としたいGameObjectを選び、名前を「ReactiveCube」としておきます。

このReactiveCubeに、EventTriggerコンポーネントを追加します。

これだけで、視線がそのキューブにヒットしたときに拡大されるようになります。

次にReactiveCubeにスクリプトを追加し、視線がヒットしているとき、視線がヒットした状態でクリック(タッチ)されたときの処理を実装していきます。

Assets内に「Scripts」というフォルダを作成し、その中に「ReactiveCube」というスクリプトを作成します。内容は次のようにします。

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

public class ReactiveCube : MonoBehaviour {

  // ----- Gaze Input

  public void pointerEnter(){
    Debug.Log ("pointer Enter");
    GetComponent ().material.color = Color.red;
  }

  public void pointerExit(){
    Debug.Log ("pointer Exit");
    GetComponent ().material.color = Color.white;
  }

  public void pointerClick(){
    Debug.Log ("pointer Click");
    GetComponent ().material.color = Color.yellow;
  }
}

ReactiveCubeのEventTriggerコンポーネントに各イベントの対応を設定していきます。「Pointer Enter」について具体的な手順を説明します。

まず、「Add New Event Type」ボタンを押して「PointerEnter」を選びます。

続いて、「List is Empty」と表示されていますので、右下の「+」ボタンを押し、イベントに対応する項目を一つ追加します。

次に、「None(Object)」とある項目の右側の◎をクリックして、Scene内にあるReactiveCubeオブジェクトを選択します。

その後、「No Function」のプルダウンを選び、「ReactiveCube」内の「pointerEnter ()」を選びます。

この手順を、「Pointer Exit」、「Pointer Click」についても同様に繰り返します。

設定完了後、実行すると、指定したキューブに視線がヒットしたとき、タッチしたときにキューブの色が変わるようになります。

Google VR SDKの機能テスト : 1眼表示とのトグル

Google VR SDKの基本的な機能をいくつか試すために、最初に表示させたUGUIボタンのアクションを実装します。

Assets内の「Scripts」フォルダ内に「TestSystem」というスクリプトを作成します。内容は次のようにします。

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

public class TestSystem : MonoBehaviour {

  public void testButtonPressed(){
    toggleVRMode ();
  }

  public void toggleVRMode() {
    GvrViewer.Instance.VRModeEnabled = !GvrViewer.Instance.VRModeEnabled;
  }
}

Buttonの機能のOnClickにこのtestButtonPressed() を呼び出すように、下図のように設定します。

これでボタンを押す度に、VRModeをトグルさせることができます。

VRModeがtrueになっていると2眼タイプ、falseでは1眼タイプですので、それを切り替える事ができます。

Google VR SDKの機能テスト : 歪み補正の設定

レンズ補正のための樽型の設定は、下記のようにして変更できます。

public void toggleVRDistortion() {
  // GVR 1.0.3
  GvrViewer.Instance.DistortionCorrectionEnabled = !GvrViewer.Instance.DistortionCorrectionEnabled;
}

このソースは、今回使用しているGoogle VR SDK 1.0.3用のものですが、1.10.0になると変わるので利用には注意して下さい。