1. 概要
今回のハンズオンでは、「Cardboard SDK for Unity」を使って、Unity で作成されたサンプルゲ ーム「Lolly Gagger」を、Cardborad に対応したゲームに改良します。
2. ファイルのダウンロード
「Cardboard SDK for Unity」とサンプルゲームをダウンロードします。Unity で複数のファイル をやりとりする場合、拡張子 unitypackage のバッケージというファイル形式を使います。
● Cardboard SDK for Unity
● サンプルゲームのパッケージ
3. サンプルゲームの実行
まずはサンプルゲームを実行してみましょう。
Android 用の設定とプロジェクトの作成
Project を作成し、Android SDK の場所を設定します。iOS の場合は、2 は必要ありません。
1. Unity を起動して、右上の[New]をクリック、[Project name] を「Lollygagger_cardboar d」に変更してプロジェクトを作成します (起動済みの場合は、メニューから [File → N ew Project] を選択します)。
2. メニューから [Edit (OS X の場合は Unity) → Preferences] を選択し、[External Tool s] から Android の [SDK] と [JDK] にそれぞれ SDK、JDK の場所を指定します。
バッケージのインポート
ダウンロードした「lollygagger_step0.unitypackage」をダブルクリックして Unity にインポー トしましょう。インポートするファイルを選択するダイアログが出るのでそのまま [Import] ボ タンをクリックしてインポートします。
スクリプトを Unity 5 用に更新するダイアログが出ますので、[I Made a Backup, Go Ahead!]を クリックしてください。
シーンの再生
Unity では、「シーン」を切り替えることで場面を変更しゲームを進行させていきます。このゲ ームは「MainMenu」、「GameScene」2 つのシーンで構成されていて、シーンはファイルとして [Project] ビューの [Assets] フォルダの中にあります。
シーンファイルをダブルクリックして読み込み、画面中央上の再生ボタンをクリックしてシーン を再生してみましょう。ゲームは、マウスの移動で視点の変更、クリックで弾を発射します。
Android のビルド(書き出し)設定
ゲームを実機で遊ぶためにビルドの設定をします。
1. メニューから [File → Build Settings…] を選択 2. [Platform] のリストから Android を選択
3. [Switch Platform] ボタンをクリック
4. [Project] ビューの [Assets] の中にある「MainMenu」を [Scenes In Build] のエリアま でドラッグして、ビルドの対象に追加
5. 同じように「GameScene」をドラッグして、「MainMenu」の下に追加
1. [Build Settings] ダイアログの [Player Settings] ボタンをクリック
2. [Inspector] ビューから[Resolution and Presentation]のラベルをクリックして展開す る
3. [Default Orientation] を [Landscape Left] に変更
1. [Other Settings] のラベルをクリックして展開
2. [Bundle Identifier] に「com.<yourcompany>.<appname>」形式の ID を入力
1. 念のためメニューの [File → Save Project] でプロジェクトを保存しておく
2. USB で端末をつなぎ、[Build And Run] をクリックし、ダイアログで APK ファイルの名前 を指定してプロジェクトをビルド。
ビルドが無事終わると、その後自動的に APK ファイルが端末に転送されて、ゲームがスタートし ます！
4.メニュー画面の Cardboard 対応
「Cardboard SDK」を使用して、VR に対応したメニュー画面 (MainMenu)を作成します。
Cardboard SDK をインポートする
1. ダウンロードした「cardboard-unity-master.zip」を解凍
2. 解凍した中にある「CardboardSDKForUnity.unitypackage」をダブルクリック 3. [Import] をクリックしてパッケージをインポート
メニュー画面に Cardboard の機能を追加する
Cardboard SDK を利用して、ゲームを立体視に対応させます。
1. [Project] ビューにある「MainMenu」シーンをダブルクリックしてメニュー画面を開く 2. [Hierarchy] ビューの「Main Camera」を選択
3. メニューの [Component → Cardboard → Update Stereo Cameras] を選択 (項目がメニュ ーにない場合は、[Assets → Reimport All] を選択してください)
UI の空間をワールドスペースに変更する
UI の空間、座標系をスクリーンスペースから、3 次元のワールドスペースに変更して、立体視に 対応させます。
[Hierarchy] ビューから「Canvas」を選択して、[Inspector] ビューで [Rect Transform]、[Canv as]コンポーネントの設定を図のように変更します。
1. [Render Mode] を[World space] に変更
2. [Pos X] を「0」、[Pos Y] を「0」、[Pos Z] を「750」に変更 3. [Width] を「640]、[Height] を「480」に変更
4. [pivot] の[X]、[Y] が「0.5」になっているのを確認 5. [scale] の[X]、[Y]、[Z] を「1」に変更
UI のイベント処理に使用するカメラを指定します。
1. [Hierarch] ビューの「Main Camera」を、 [Canvas] コンポーネントの [Event Camera] のフィールドまでドラッグ
[Game] ビューで、メニューの位置と大きさが下記のようになっているか確認しましょう。
VR モードを変更するためのボタンを追加する
VR モードのオン、オフを切り替える「Cardboard Mode」ボタンを追加します。ボタンは設定済み のゲームオブジェクト、「プレハブ(Prefab)」を利用します。
1. [Hierarchy] ビューから「Canvas」の左にある三角をクリックして、「Panel」を表示さ せておく
2. [Project] ビューの [Prefabs] フォルダにある「cardboardButton」を、「Panel」まで ドラッグ
5. スクリプトから VR モードを切り替える
VR モードを切り替えるスクリプトを作成し、ボタンをクリックしたときに実行するように設定 します。
「Canvas」に新しいスクリプトをコンポーネントとして追加します。
1. [Hierarchy] ビューから「Canvas」を選択
2. [Inspector] ビューの最後にある、[Add Component] をクリック 3. リストの最後にある、[New Script] をクリック
4. 名前のフィールドに「CardboardModeMgr」と入力 5. [Create and Add] ボタンをクリック
VR モードの切り替え
スクリプトは、ゲーム起動時に VR モードの設定を読み込むことと、オンオフを切り替えて設定 を保存することをしています。
1. CardboardModeMgr スクリプトをダブルクリックしてファイルを開く 2. 下記のコードに変更
3. 保存して Unity に戻ります
using UnityEngine;
using System.Collections;
using UnityEngine.EventSystems; using System.Collections.Generic; using UnityEngine.UI;
public class CardboardModeMgr : MonoBehaviour {
// We need a reference to camera which
// is how we get to the cardboard components. public GameObject mainCamera;
public void Start() {
// Save a flag in the local player preferences to initialize VR mode
// This way when the app is restarted, it is in the mode that was last used. int doVR = PlayerPrefs.GetInt("VREnabled");
Cardboard.SDK.VRModeEnabled = doVR == 1;
CardboardHead head = mainCamera.GetComponent<CardboardHead>(); head.enabled = Cardboard.SDK.VRModeEnabled;
Cardboard.SDK.TapIsTrigger = true; }
// The event handler to call to toggle Cardboard mode. public void ChangeCardboardMode ()
{
CardboardHead head = mainCamera.GetComponent<CardboardHead>(); if (Cardboard.SDK.VRModeEnabled) {
// disabling. rotate back to the original rotation. head.transform.localRotation = Quaternion.identity; }
Cardboard.SDK.VRModeEnabled = !Cardboard.SDK.VRModeEnabled; head.enabled = Cardboard.SDK.VRModeEnabled;
PlayerPrefs.SetInt("VREnabled", Cardboard.SDK.VRModeEnabled?1:0); PlayerPrefs.Save();
} }
ヘッドトラッキングを使って操作できるようにする
VR モードのときに視線でボタンを選択できるように、SDK に入っている「Gaze Input Module」 を追加します。
1. [Hierarchy] ビューから「EventSystem」を選択
2. メニューから [Component → Scripts → Gaze Input Module]を選択
3. [Inspector] ビューの [Gaze Input Module] コンポーネント右側にある歯車アイコンか ら Move Up を 2 回選択して、コンポーネントの順番を図のようにする
4. [Gaze Input Module] コンポーネントの [Vr Mode Only] をオンに変更
他のゲームオブジェクトからカメラを取得する
スクリプトから Cardboard の状態にアクセスするため、Cardboard 用のコンポーネントが追加さ れている「Main Camera」を取得します。
1. [Hierarchy] ビューから「Canvas」を選択
2. [Cardboard Mode Mgr] コンポーネントの [Main Camera] に「Main Camera」を指定
ボタンからスクリプトを呼び出す
1. [Hierarchy] ビューから [CardboardButton] を選択
2. [inspector] ビューの[Button] コンポーネントの[ On Click ()] にある「+ 」をクリッ ク
3. 図のように、左下のフィールドに「Canvas」を指定
4. [No Function] と表示されているリストから [CardboardModeMgr → ChangeCardboardMode ()] を選択
6. メニュー画面の完成です！
「Cardboard Mode」ボタンをクリックして、VR モードに切り替わることを確認しましょう。Unit y 上で再生している時は、[Alt]キーとマウスの移動でヘッドトラッキングの動きをシミュレー トできます。
7. ゲームシーンの Cardboard 対応
ゲームシーンも Cardboard に対応させましょう。基本的にメニュー画面と同じ流れです。
ゲームシーンに Cardboard 機能を追加する
1. 「GameScene」シーンを開く
2. 「Player」の子ゲームオブジェクト「Main Camera」を選択
3. メニューから [Component → Cardboard → Update Stereo Cameras] を選択
CardboardModeMgr スクリプトを追加する
1. 「Canvas 」を選択
2. メニューから [Component → Scripts → Cardboard Mode Mgr] を選択
3. [Cardboard Mode Mgr] コンポーネントの [Main Camera] に「Main Camera」を指定
GazeInputModule を追加する
1. 「EventSystem」を選択
2. メニューから [Component → Scripts → Gaze Input Module] を選択
3. [Gaze Input Module] コンポーネントの歯車アイコンでコンポーネントの位置を変更 4. [Vr Mode Only] をオンに変更
VR モードに不要な機能を無効する
ポインターでの視点の移動など VR モードに不要な機能を無効にします (バッテリーの節約にもな ります)。
1. [Assets/Scripts] フォルダにある「MouseLooking」スクリプトを開く 2. Update() メソッドの一番始めに下記のスクリプトを追加
3. 保存して Unity に戻ります
if (Cardboard.SDK.VRModeEnabled) { return;
}
Cardboard のトリガーで弾を発射する
1. [Scripts] フォルダにある「Shooting」スクリプトを開く 2. Update() メソッドの中にある下記を変更
3. 保存して Unity に戻ります
// Replace this...
if(Input.GetButtonUp("Fire1") && ! GameManager.Instance.IsMenuShowing)
↓
// Cardboard-enabled
if((Cardboard.SDK.Triggered || Input.GetButtonUp("Fire1")) && !GameManager.Instance.IsMenuShowing)
エンディングのメニューを VR 対応する
ゲームが最後まで進んだときのメニューも、メニュー画面と同じようにワールドスペースに変更 します。
1. 「Canvas 」を選択し、数値を下記のように変更する
2. [Event Camera]に「Main Camera」を指定
● [Render Mode] を[World space]に変更
● [Pos X, Y, Z] を「25, 0, 135」に変更
● [Width]と[Height]を「240 」と「180」に変更
● [Pivot]の[X, Y]を「0.5, 0.5」に変更
● [Scale」の[X, Y, Z]を「0.04, 0.04, 0.04」に変更
完成です！ビルドして端末で遊んでみましょう。
8. 資料
● Cardboard Unity Codelab
● Cardboard Design Lab
● Overview of Cardboard
● Android Launch Checklist
● Performance Optimizations
