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

17998 ワード

せっかく手元に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"を選択する。

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

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

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

プロジェクトの開始

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

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

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

プロジェクトが開始したら先ほど飛ばした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!"を選択。

Android playerの構成

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

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

サンプルゲームの実行

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

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

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

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

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

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

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

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

UIをworld spaceに変更する

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

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

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

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

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

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

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

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

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のボタンクリックをハンドリングするため入力モジュールを追加する

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

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

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

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

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

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

Main Menuの動作確認

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

Game SceneにCardboardを追加

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

Game SceneにCardboard Viewを追加

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

GazeInputModuleをEvent Systemに追加

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

一旦動作確認

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

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

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

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

プロジェクトエクスプローラでAssets/Scripts/MouseLookingを開く
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のボタンで玉を撃てるようになっています。

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

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

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

おわり

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

Author And Source

この問題について(Unity未経験者がCodelabのCardboardチュートリアルをやってみた), 我々は、より多くの情報をここで見つけました https://qiita.com/chibatching/items/c2a929d1d009199e2396

著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。

Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .

#44 YouTubeページの練習(2)

forサイクルの簡略化について