LoginSignup
22
22

More than 5 years have passed since last update.

@chibatching

Unity未経験者がCodelabのCardboardチュートリアルをやってみた

Last updated at Posted at 2015-06-06

せっかく手元にGoogle I/Oで貰ったCardboardがあるので、Unity触ったこと無いけどCodelabの"Cardboard Unity Codelab"をやってみた。
Unityは未経験なので用語その他間違っているところはあると思います。

一部、Unity4系の前提で書かれているためか手順通りにできない場所があったけど基本的には元ページの内容通りにやっていくだけ。
かんたんかんたん。

Unity インストール

なにはともあれとりあえず最新のUnityをダウンロード＆インストール。
http://unity3d.com/jp/get-unity/update

自分はUnity 5.0.2をインストールしました。

サンプルコードの入手

Cardboard SDKのダウンロード

適当なディレクトリにクローンする。

git clone https://github.com/googlesamples/cardboard-unity.git

サンプルゲームのダウンロード

アセットパッケージを含んだサンプルゲームをダウンロードする。
https://github.com/googlesamples/io2015-codelabs/blob/master/cardboard-unity/assets/lollygagger_step0.unitypackage?raw=true

サンプルゲームの実行

Unity起動

インストールしたUnityを起動する。
初めて起動するとライセンスの選択画面が出るので"Personal Edition"を選択する。
1_License.png

アカウントは持っていないので"Create Account"を選択。
2_Login.png

アカウント情報を入力して"OK"を押下。
3_CreateAccount.png

これでUnityを使いはじめる準備が完了！
4_Gone.png

プロジェクトの開始

Unityを起動すると下の画面が表示されます。
5_start.png

Codelabの手順では起動したらAndroid SDK Locationを設定しろとなっていますが、メニューのPreferenceがグレーアウトされているので先にプロジェクトを作ってしまいます。

プロジェクト名は"Lollygagger_cardboard"、3Dを選択しておきます。
6_project.png

プロジェクトが開始したら先ほど飛ばしたAndroid SDK Locationの設定を行います。
Preferences > External Tools > Android SDK Locationと選択し、Android SDKがインストールされている場所を指定します。

サンプルゲームのassetsインポート

Assets > Import Package > Custom Packageでダウンロードしてきたlollygagger_step0.unitypackageをインポートする。

インポート後、"API Update Required"というダイアログが出るので"I Made a Backup. Go Ahead!"を選択。
7_apiUpdate.png

Android playerの構成

Androidで実行できるように構成を行う。
わかりやすいGif動画がCodelabに掲載されているのでそちらも参照。

  1. File > Build Settings...を選択
  2. リストからAndroidを選択
  3. Switch Platformを選択
  4. AssetsのMainMenuを"Scenes In Build"にドラッグ&ドロップ
  5. 同じくAssetsのGameSceneを"Scenes In Build"にドラッグ&ドロップしてMainMenuの下に配置
  6. "Player settings..."をクリック
  7. "Resolution and Presentation"をクリックして展開、Default OrientationをLandscape Leftに変更
  8. "Other Settings"をクリックして展開、Bundle Identifierにパッケージ名を設定
  9. プロジェクトを保存する

サンプルゲームの実行

同じBuild Settingsの画面で"Build And Run"をクリック。
ファイル名を聞かれるのでLollygagger.apkで保存、しばらく待って繋いでいる実機でゲームが起動すれば成功。
2015-06-06 10.10.23.png 2015-06-06 10.10.35.png

メインメニューシーンにCardboardを追加する

Cardboard SDKをプロジェクトに追加

Assets > Import Package > Custom PackageでCardboardSDKForUnity.unitypackageを選択してインポートする。
このとき、すべてのファイルをインポートするのではなくDemo Scene フォルダと Legacy/Demo Scene の選択を解除してからインポートする。
import.png

最初のインポートの時と同様にAPI Update Requiredのダイアログが表示されるので同じく"I Made a Backup. Go Ahead!"を選択。

メインメニューにcardboardモードを追加する

Cardboardでメニューを表示するためにステレオカメラと関係するスクリプトを追加する。

  1. プロジェクトエクスプローラからAssetsフォルダのMainMenuをダブルクリック
  2. Scene HierarchyからMain Cameraを選択
  3. メニューから Component > Cardboard > Update Stereo Cameras を選択

UIをworld spaceに変更する

Screen SpaceからWorld Spaceに変換する。

  1. HierarchyウインドウからCanvasを選択して、Inspectorパネルで以下の変更を行う
    • Render ModeをWorld Spaceに変更
    • Rect Transformで位置を(0, 0, 750)に変更
    • 幅640、高さ480に変更
    • Pivotを(0.5, 0.5)に変更
    • Scaleを(1, 1, 1)に変更
  2. 以下の手順でMain CameraをCanvasに関連付ける
    • HierarchyウインドウでCanvasを選択
    • InspectorパネルでEvent Cameraの右にある小さい丸をクリック。出てきたウインドウのSceneタブでMain Cameraを選択

eventcamera.png

Cardboardモードボタンをメニューに追加する

Cardboardモードをオンオフするためのボタンを追加する。

  1. プロジェクトエクスプローラでAssets/Prefabs/cardboardButtonを見つける
  2. HierarchyウインドウでCanvasとPanelを展開
  3. cardboardButtonをPanelの直下にドラッグ&ドロップ

Cardboardモードのスクリプトを書く

Canvasに新しいスクリプトを追加する

  1. HierarchyウインドウからCanvasを選択
  2. InspectorパネルでAdd Componentボタンをクリック、一覧の一番下にあるNew Scriptを選択
  3. スクリプト名はCardboardModeMgr、言語はCSharpのままでCreate And Addをクリック
  4. プロジェクトエクスプローラでCardboardModeMgr.csをダブルクリックして開く
  5. 以下のコードをコピペして保存
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;
    }

   // 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の入力ハンドリング

Cardboardのボタンクリックをハンドリングするため入力モジュールを追加する

  1. HierarchyウインドウでEventSystemを選択
  2. メニューからComponent > Scripts > Gaze Input Moduleを選択

カメラとゲームオブジェクトを関連付ける

視線でカメラや操作ができるように設定する

  1. HierarchyウインドウでCanvasを選択
  2. Cardboard Mode MgrのMain Cameraの右にある小さな丸をクリック
  3. シーンタブからMain Cameraを選択

クリックイベントとスクリプトを関連付ける

  1. HierarchyウインドウでCanvas/Panel/buttonCardboardを選択
  2. InspectorパネルのOn Click()セクションになにもなければ"+"をクリック。自分の環境では最初から一つあったのでそれを設定変更
    • 最初の項目をRuntime Onlyにする
    • 下の項目の小さな丸をクリック、出てきたウインドウのシーンタブからCanvasを選択
    • 右の項目でCardboardModeMgr.ChangeCardboardMode()を選択

onclick.png

Main Menuの動作確認

上部にある再生ボタンをクリック、メインメニュー画面でCardboard Buttonをクリックした後、Cardboardモードに切り替われば成功。
test.png

Game SceneにCardboardを追加

手順はMain Menuの時とほぼ同じなので簡単に

Game SceneにCardboard Viewを追加

  1. エクスプローラでGame Sceneをダブルクリック
  2. HierarchyウインドウでPlayer/Main Cameraを選択
  3. メニューからComponent > Cardboard > Update Stereo Camerasを選択

GazeInputModuleをEvent Systemに追加

  1. HierarchyウインドウでEventSystemを選択
  2. メニューからComponent > Scripts > Gaze Input Moduleを選択
  3. Codelabの手順には無いが、EventSystemのInspectorパネルでGaze Input ModuleのVr Mode Onlyにチェックを入れる。これを入れてないとメニューの通常モードでちゃんと操作できなくなる。

一旦動作確認

シーンとプロジェクトを保存して、Build And Run!

起動してCarboad Modeをタップすると下の画面になり、ゲームの画面もちゃんと表示されます。
2015-06-06 13.00.34.png

プレイヤーの視線での操作をベースにする

VRモードでは視線の操作などスマホのタッチパネルで行っていた操作をプレイヤーの視線方向で行えるようCardboard SDKがハンドルしてくれます。
なのでVRモードが有効なとき、タッチ操作での計算を動かないようにしてCPUの負荷を下げることができます。

  1. プロジェクトエクスプローラでAssets/Scripts/MouseLookingを開く
  2. Update()メソッドの一番上に以下のコードを貼り付ける
if (Cardboard.SDK.VRModeEnabled) {
           return;    
}

Cardboardボタンを使った操作を追加する

Cardboardには操作用のボタンがひとつ付いています。このボタンでゲームを操作できるようにします。

Assets/Scripts/Shootingを開き、以下のコードを

if(Input.GetButtonUp("Fire1") && ! GameManager.Instance.IsMenuShowing)

次のように入れ替える

if((Cardboard.SDK.CardboardTriggered || Input.GetButtonUp("Fire1")) && 
     !GameManager.Instance.IsMenuShowing)

ここでもう一度実行してみると、ゲーム画面でCardboardのボタンで玉を撃てるようになっています。
2015-06-06 16.28.38.png

エンディングメニューをVRに対応させる

現状では、ゲーム最後のメニューで操作ができないのでこの画面もVRに対応させる。

  1. Game SceneのHierarchyウインドウでCanvasを選択
  2. Inspectorパネルで以下の設定変更
    • Render ModeをWorld Spaceに変更
    • 位置を(25, 0, 135)に変更
    • 幅240、高さ180に変更
    • Pivotを(0.5, 0.5)
    • Scaleを(0.04, 0.04, 0.04)
  3. Event CameraをMain Cameraに設定する

2015-06-06 16.29.33.png

おわり

これでCodelabのチュートリアルは終わりです！
Unityは使ったこと無いけど、今回のような手順でできるなら既存のものをCardboard化するのはそんなに難しくないのかな？

22
22
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
22
22