UnityでGear VR用アプリを作る(3) 注視カーソルの実装

【連載】

VRコンテンツの作り方

【第11回】UnityでGear VR用アプリを作る(3) 注視カーソルの実装

[2016/11/25 09:00] ブックマーク ブックマーク

開発ソフトウェア

前回一区切りとした本連載ですが、第8回で実装したGear VR用アプリの注視カーソルが、その後にリリースされたUnity 5.4以降で動作しないことがわかりました。

そこで今回は、”延長戦”というかたちで、Unityが出している「VR Samples」というアセットから必要最低限のスクリプトを取り込み、uGUI (UnityのデフォルトのGUI)のボタン入力を実装する流れを紹介したいと思います。

実装の対象は、「ボタンを見ている状態でタッチパッドをタッチしているとドーナツ型のプログレスバーが進み、最後までタッチしていると、ボタンを決定した状態になりアクションする」というものです。

VRアプリ内でボタンに視点を合わせた状態でタッチボタンを押し続けると……

ドーナツ型のプログレスバーが進み、完了状態になると選択アクションになる

今回の作業バージョンは、下記の通りです。

※ 本文内のスクリーンショットはmacOS Sierra 10.12.1で取得したものですが、Windows 10でも同様に動作します。

アセットのダウンロードと取り込み

Unityで新規プロジェクトを作成します。今回は「GazeVR」という名前で作成しました。Asset Storeから「VR Samples」をダウンロードし、インポートボタンを押します。

すると「現在のプロジェクト設定が上書きされます」と警告が出ます。

ここで「インポート」を押すと、ファイル選択ダイアログが表示されます。

必要なアセットのみを取り込む

全てを取り込んでも良いのですが、このアセットにはサンプルなどさまざまなデータが含まれており、既存のプロジェクト等で利用する場合に不要な物も多いので、最低限のアセットのみを指定して取り込みます。

まず、全てを非選択状態にするために、下部にある「None」ボタンを押します。

下記のリストを参考に丁寧に選んでいきます(■を付けた14個のファイル、フォルダをチェックします)。

|-- VRSampleScenes/ 
|   |-- Materials/ 
|   |   |-- GUI/ 
|   |   |   |-- ■GUIOverlay 
|   |   |-- Utils/ 
|   |       |-- ■VRCameraFade 
|   |-- Prefabs/ 
|   |   |-- Utils/ 
|   |       |-- ■MainCamera 
|   |-- Scripts/ 
|   |   |-- Menu/ 
|   |   |   |-- ■MenuButton.cs 
|   |   |-- Utils/ 
|   |       |-- ■Reticle.cs 
|   |       |-- ■ReturnToMainMenu.cs 
|   |       |-- ■SelectRadial.cs 
|   |       |-- ■VRCameraFade.cs 
|   |       |-- ■VRCameraUI.cs 
|   |-- Shaders/ 
|   |   |-- ■UIOverlay 
|   |-- Textures/ 
|       |-- GUI/ 
|           |-- ■GUIReticle 
|           |-- ■GUITargetReticle 
|-- ■VRStandardAssets/ 
|-- ■ProjectSettings/

(編集部注) テキストはalt属性に設定してあるので、画像を選択した状態でコピーすると取り出せます

合計14個のファイルを選択したら、「Import」ボタンを押します。

新規シーンの作成

作業用に、新規シーンを2つ作成します。

ProjectパネルのAssetsフォルダ内で右クリックして、Scenesフォルダを作成します。Scenesフォルダ内で右クリックして、「Cubes」、「Spheres」という2つのシーンを作成します。

まず、Cubesシーンをダブルクリックして開きます。

適当に色を付けたり、床を配置したりしておきます。

Spheresシーンでは、同様に、Sphereを作成し配置します。

これらのシーンは違いがわかれば良いので、特に内容にこだわりはありません。

まず、Cubesシーンで作業を進めます。

Main Cameraの入れ替え

Hierarchy内にデフォルトで用意されている「Main Camera」を削除し、その代わりに、「VRSampleScenes/Prefabs/Utils/MainCamera」をシーンにドラッグして配置します。

このMain Cameraにはカーソルオブジェクトを子オブジェクトとして持っていたり、必要なスクリプトがアタッチされたりしています。

「Position X:0, Y:1, Z:0」に配置します。

Spheresシーンでも同様に設定します。

ボタンの配置

次に、シーンを切り替えるボタンに相当するオブジェクトを配置します。

特にオブジェクトの種類は問わないのですが、今回は「Quad」を使います。

シーンに配置したオブジェクトを「QuadButton」とリネームして、「Position X:0, Y:1, Z:1」に配置します。

「QuadButton」の子オブジェクトになるように「3D Text」を作成して、表示テキストを「Go to Spheres」とし、以下のようなパラメータで配置します。

Transform: Position X:0, Y:0, Z:0
Transform: Scale X:0.1, Y:0.1, Z:0.1
Text Mesh: Anchor:Middle center
Text Mesh: Alignment:Center
Text Mesh: Font Size:16

「QuadButton」に2つのスクリプトを適用します。

VRStandardAssets/Scripts/VRInteractiveItem
VRSampleScenes/Scripts/Menu/MenuButton

「QuadButton」のMenuButtonコンポーネントに以下のような設定を行います。

Scene To Load: Spheres
Camera Fade: (Main Cameraを適用)
Selection Radial: (Main Cameraを適用)
Interactive Item: (QuadButtonを適用)

「QuadButton」をコピーし、Spheresシーンを開いてペーストし、MenuButtonコンポーネントも再設定しておきます。

Scene To Load: Cubes
Camera Fade: (Main Cameraを適用)
Selection Radial: (Main Cameraを適用)

このボタンのラベルは「Go to Cubes」としておきます。

osigファイルの追加

第7回と同様に、osigファイルをプロジェクトに追加しておきます。

Gear VRプロジェクトの設定

これでCubesシーンからSpheresシーンに移動する仕組みが完成したので、試してみます。

Cubesシーンを開いている状態で、「File」メニューから「Build Settings…」でパネルを開きます。

左下の「Android」を選び、「Switch Platform」ボタンを押します。

「Add Open Scenes」ボタンを押すと、ビルドに含まれるシーンとして「Cubes」が追加されます。

そのまま「Spheres」シーンを開き、「Add Open Scenes」ボタンを押すと、「Spheres」が追加されます。

上図のようになっていることを確認してください。

「Player Settings」ボタンを押し、「Build Identifier」、「Minimum API Level」を設定します。筆者の場合は以下のように設定しました。

Build Identifier: jp.torques.GazeVR
Minimum API Level: Android 5.0

「Vitual Reality Supported」のチェックボックスにチェックを入れます。

この時エラーが出てチェックできないことがあるのですが、一度Unityを閉じてプロジェクトを開き直すとチェックできることがあります。

これでビルドすると、Gear VRで動作するアプリをビルドすることができます。

補足機能1 : シーン移動以外の機能の実装

ここまでの仕組みでシーン遷移の仕組みはできました。しかし、ボタンでシーン遷移以外のアクションを行いたい場合はソースを書いて処理する必要があります。

「Assets/VRSampleScenes/Scripts/Menu/MenuButton.cs」内にあるHandleSelectionComplete()メソッドを書き換え、ActivateButton()メソッドを削除することで処理を書き換えることができます。

例えば、doSomething()というメソッドを呼び出したい場合には、以下のようなコードに書き換えます。

private void HandleSelectionComplete()
{
    doSomething(); // ここに処理を書く.

    // 連続して処理するための処理.
    HandleOut ();
    HandleOver ();
}

HandleOut()とHandleOver()をここに書いている理由は、「処理を行った後、一度視線をボタンから外さないと、もう一度ボタンを押すことができない」問題への対応です。

補足機能2:タッチダウン判定までの時間調整

現在は、2秒タッチしたあとに上述のActivateButton処理が呼ばれるようになっています。この間隔をもう少し短くしたい、という場合の対応もご紹介しておきましょう。

当該の時間は、「Assets/VRStandardAssets/Utils/SelectionRadial」のソースコード内に定義されているm_SelectionDurationで設定されています。

ここの数値を書き換えてもよいのですが、ボタン毎に時間を変えたい場合もあると思います。そこで、外部から設定できるようにこの変数がprivateから、publicに書き換えます。

[SerializeField] public float m_SelectionDuration = 2f;

こうしておくことで、例えば、MenuButtonやActionButtonのOnEnable ()内で、以下のように設定できるようになります。

// タッチダウン時間の設定.
m_SelectionRadial.m_SelectionDuration = 0.2f;

事例紹介

北海道北広島市が「北海道北広島市に行った気になれるVRコンテンツ」というタイトルで、多くの360度動画を公開しています。

今後はさまざまな360度動画等による撮影技術が発展し、ビューアもコモディティ化していく流れになるのは間違いないと思われます。

そのようなときにどのように風景を撮影して、どのように見せるか、というノウハウもこれから溜まっていくのではないでしょうか。

著者紹介


山田宏道 (YAMADA Hiromichi) - 株式会社トルクス 代表取締役

千葉大学工学部卒業。ゲームプログラマーを経て、2005年よりフリーランス、2012年 株式会社トルクスを設立し、コンシューマ向け、ビジネス用途等、様々なiOSアプリ、ARアプリ等を受託開発。

現在、VR関連技術に注力中。2016年4月より島根県奥出雲町在住。2016年10月に「地域おこしVR研究会」を立ち上げ、観光向けVRコンテンツなどを企画、開発。

※ 本記事は掲載時点の情報であり、最新のものとは異なる場合がございます。予めご了承ください。

関連リンク

2122
2
【連載】VRコンテンツの作り方 [11] UnityでGear VR用アプリを作る(3) 注視カーソルの実装
今回は、"延長戦"というかたちで、Unityが出している「VR Samples」というアセットから必要最低限のスクリプトを取り込み、uGUI(UnityのデフォルトのGUI)のボタン入力を実装する流れを紹介したいと思います。
https://news.mynavi.jp/itsearch/2016/11/24/vr11/rec_vr.jpg
今回は、"延長戦"というかたちで、Unityが出している「VR Samples」というアセットから必要最低限のスクリプトを取り込み、uGUI(UnityのデフォルトのGUI)のボタン入力を実装する流れを紹介したいと思います。

会員登録(無料)

一覧はこちら

今注目のIT用語の意味を事典でチェック!

一覧はこちら

ページの先頭に戻る