初めてのVRアプリのビルド

このチュートリアルでは、Unityで初めてのVRアプリをビルドします。作成するのは基本的なアプリであり、3Dオブジェクト、コンポーネント、ビルドの設定など、Unityのさまざまな基本概念について説明します。Oculus統合パッケージは使用しません。このチュートリアルの目的は、Unityの基本的な概念やインターフェイスにまず慣れることにあるからです。終了すると、自分のコンピューターで実行できるVRアプリが完成します。

どんなアプリでしょうか?

シンプルなゲームアプリです!シーンには、4つの壁に囲まれたプレイエリアと、プレイヤーとなる1個のボールがあります。ゲームの目的は、壁にぶつからないようにしながらボールを転がし続けることです。ボールがいずれかの壁にぶつかると、壁の色が変わり、ぶつかったことを示すテキストが画面に表示されます。入力として、キーボードかUnity互換ジョイスティックを使用する必要があります。

これがこれからビルドするものです:

前提条件

このチュートリアルを始める前に、開発環境をセットアップし、必要な設定を実行してあることを確認してください。

  1. Oculusデバイスを開発用に設定し、テストを有効にします
  2. Unity Editorをインストールします
  3. 新しいプロジェクトを作成します
  4. ビルド設定を構成します
  5. VRサポートを有効にします

基本概念

このセクションでは、アプリの作成やゲームプレイのメカニクスの基本を説明します。ここでは、ワークフローの中心概念の中でも、このVRアプリをビルドする上で役立つものに絞って説明します。Unityのさまざまな概念やワークフローの詳細については、Unityのユーザーマニュアルをご覧ください。

  • シーンは、さまざまなゲームオブジェクトを保持するコンテナです。
  • ゲームオブジェクトは、キャラクター、小道具、照明、カメラ、または特殊効果を表す基本的なオブジェクトです。このアプリでは、平面、立方体、球面といった基本的な図形で構成される3Dオブジェクトを使用します。
  • コンポーネントは、ゲームオブジェクトの動作を定義します。主に、変換コンポーネントにより、各ゲームオブジェクトの位置、回転、スケールが決まります。値は、プロパティごとにX、Y、Z座標の形で表記されます。位置は、デフォルトで(0,0,0)に設定されます。これは原点とも呼ばれ、シーンのすべての座標計算はそこを基点として実行されます。
  • マテリアルは、オブジェクトにテクスチャーと色を追加します。このアプリでは、マテリアルの使用をオブジェクトの色だけに限定し、他の技術的詳細には立ち入らないことにします。

アプリの作成

ステップ1.ゲームオブジェクトに色を追加するためのマテリアルを作成します。

どんなアプリでも、その設計で基本的に必要になることの1つは、色とテクスチャーを追加することです。マテリアルにより、色、シェーダー、テクスチャーなどのさまざまな外観上の効果を定義できます。このアプリでは、マテリアルの使用をオブジェクトの色の追加のみに限ることにします。

  1. プロジェクトビューのアセットフォルダーの中に、アプリのさまざまなゲームオブジェクトのマテリアルをいれるための新しいフォルダーを作成し、その名前をMaterialsに変更した後、そのフォルダーをダブルクリックして開きます。
  2. メニューで[アセット] > [作成] > [マテリアル]を選び、そのマテリアルの名前をfloor-colorに変更します。
  3. インスペクタービューのメイン地図の下で、Albedo色フィールドをクリックして色選択ツールを開き、選択する色を変更します。このアプリではRGB値として(3,32,70)を使用します。

  4. ステップ2からステップ4までを反復して、壁、プレイヤーボール、および衝突時の壁の色の変更のためのマテリアルを作成します。それらの名前をそれぞれwall-colorball-colorafter-collisionに変更し、RGB値をそれぞれ(255,255,255)、(240,240,0)、(241,107,8)に設定します。

ステップ2.フロア、プレイヤーボール、4つの壁を作成します。

このアプリのゲームオブジェクトは、フロア、ボール、4つの壁であり、ストックUnity平面、球面、および立方体を使用してそれらを作成します。

フロア:

  1. メニューで[ゲームオブジェクト] > [3Dオブジェクト] > [平面]に移動します。
  2. 階層ビューで、その名前をfloorに変更します。
  3. インスペクタービューの変換の下で、その位置が原点、つまり(0,0,0)であることを確認します。そうでない場合は、(0,0,0)にリセットしてください。
  4. 変換の下で、スケールを(2,1,2)に設定し、フロアを大きくします。平面オブジェクトは平らであり、体積はありません。したがって、デフォルトでY値は1に設定されます。
  5. floor-colorマテリアルを平面上にドラッグ&ドロップし、色を追加します。

プレイヤーボール:

  1. メニューで[ゲームオブジェクト] > [3Dオブジェクト] > [球面]に移動します。
  2. 階層ビューで、その名前をplayer-ballに変更します。
  3. Materialsフォルダーから球面にball-colorをドラッグ&ドロップします。
  4. インスペクタービューの変換の下で、位置が(0,0,0)に設定されていることを確認した後、Y値を0.5に設定して(0,0.5,0)とし、ボールをフロアの上に置きます。

4つの壁:

  1. メニューで[ゲームオブジェクト] > [3Dオブジェクト] > [立方体]に移動します。
  2. Materialsフォルダーから立方体にwall-colorをドラッグ&ドロップします。
  3. インスペクタービューの変換で、位置を(0,0,0)にリセットした後、スケールを(0.5,2,20.5)に設定して、壁がちょうどフロアの境界に合うように引き伸ばします。
  4. 階層ビューで、立方体を右クリックして、次の手順を実行します:

    a.立方体の名前をfirst-wallに変更します。

    b.立方体を3回複製してさらに3つの壁を追加し、その名前をそれぞれsecond-wallthird-wall、およびfourth-wallに変更します。

  5. 階層ビューでthird-wallを選択し、インスペクタービューの変換で、回転を(0,90,0)に設定します。この手順をfourth-wallについても反復します。
  6. 階層ビューでfirst-wallを選択し、インスペクタービューの変換で、壁の位置として以下に示す値を入力して、壁がフロアの四方を囲むようにします。このステップを残りの壁についても反復します。

    first-wallは(-10,0,0)

    second-wallは(10,0,0)

    third-wallは(0,0,10)

    fourth-wallは(0,0,-10)

ステップ3:カメラとライティングを調整します。

メインのカメラとライティングを調整して、シーンの見え方を改善します。

  1. 階層ビューで[メインカメラ]を選択します。
  2. インスペクタービューの変換で、位置を(0,10,-20)に、また回転を(20,0,0)に設定します。
  3. 階層ビューで[平行光源]を選択します。
  4. インスペクタービューの変換で、回転を(50,60,0)に設定します。

ステップ4:プレイヤーボールに動きを追加します。

  1. 階層ビューでplayer-ballを選択します。
  2. インスペクタービューで、次の手順を実行します:

    a.[Add Component (コンポーネントの追加)] > [Physics (物理)] > [Rigidbody]をクリックします。

    b.[Add Component (コンポーネントの追加)] > [New Script (新しいスクリプト)]をクリックし、名前をPlayerControllerに設定してから、[Create and Add (作成して追加)]をクリックします。

    c.PlayerControllerスクリプトの横にある歯車アイコンをクリックし、[Edit Script (スクリプトを編集)]をクリックして、コードエディターでそれを開きます。

    d.サンプルコードを次の内容に置き換えることにより、キーボードからの入力を取得し、ボールを動かすための力を追加します。

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

public class PlayerController : MonoBehaviour
{
    // Appears in the Inspector view from where you can set the speed
    public float speed;

    // Rigidbody variable to hold the player ball's rigidbody instance
    private Rigidbody rb;

    // Called before the first frame update
    void Start()
    {
        // Assigns the player ball's rigidbody instance to the variable
        rb = GetComponent<Rigidbody>();
    }

    // Called once per frame
    private void Update()
    {
        // The float variables, moveHorizontal and moveVertical, holds the value of the virtual axes, X and Z.

        // It records input from the keyboard.
        float moveHorizontal = Input.GetAxis("Horizontal");
        float moveVertical = Input.GetAxis("Vertical");

        // Vector3 variable, movement, holds 3D positions of the player ball in form of X, Y, and Z axes in the space.
        Vector3 movement = new Vector3(moveHorizontal, 0.0f, moveVertical);

        // Adds force to the player ball to move around.
        rb.AddForce(movement * speed * Time.deltaTime);
    }
}
  1. インスペクタービューのPlayerControllerスクリプトの[Speed (速度)]に、速度の値を入力します。たとえば、500とします。この変数は、ステップ4.2.dのPlayerControllerスクリプトで宣言したのと同じspeed変数です。

  2. 上にあるプレイボタンをクリックして、アプリをプレビューします。キーボードの矢印キーを押して、ボールを転がします。

ステップ5.テキストを追加します。

  1. メニューで[ゲームオブジェクト] > [UI] > [テキスト]に移動します。
  2. 階層ビューで、Textを選択し、その名前をmessageに変更します。
  3. インスペクタービューの[Rect Transform (長方形変換)]で、テキストの位置を指定します。必要なら、フォントの色やフォントサイズを変更することもできます。

ステップ6.ボールが衝突状態に入った時、または衝突状態から出た時の壁と表示テキストの色を変更します。

衝突は、ボールが壁に当たった時点で発生します。衝突をハイライトするための効果を追加することができます。たとえば、ボールが壁に衝突した時点で、画面上で壁の色が変わり、「Ouch! (おっと!)」というテキストが表示されるという具合です。一方、ボールが再び転がる状態になったなら、壁の色が元の色に戻り、「Keep Rolling...(うまく転がしてね...)」というテキストが画面に表示されます。

  1. 階層ビューでfirst-wallを選択します。
  2. インスペクタービューで、[Add Component (コンポーネントの追加)] > [New Script (新しいスクリプト)]をクリックし、名前をColorControllerに設定した後、[Create and Add (作成して追加)]をクリックします。
  3. ColorControllerスクリプトの横にある歯車アイコンをクリックし、[Edit Script (スクリプトを編集)]をクリックして、コードエディターでそれを開きます。
  4. サンプルコードを次のコードに置き換えます。

    using System.Collections;
    using System.Collections.Generic;
    using UnityEngine;
    using UnityEngine.UI;
    public class ColorController : MonoBehaviour
    {
     public Material[] wallMaterial;
     Renderer rend;
    
     // Appears in the Inspector view from where you can assign the textbox
     public Text displayText;
     // Start is called before the first frame update
     void Start()
     {
         // Assigns the component's renderer instance
         rend = GetComponent<Renderer>();
         rend.enabled = true;
         displayText.text = "";
     }
     // Called when the ball collides with the wall
     private void OnCollisionEnter(Collision col)
     {
         // Checks if the player ball has collided with the wall.
         if (col.gameObject.name == "player-ball")
         {
             displayText.text = "Ouch!";
             rend.sharedMaterial = wallMaterial[0];
         }
     }
     // It is called when the ball moves away from the wall
     private void OnCollisionExit(Collision col)
     {
         if (col.gameObject.name == "player-ball")
         {
             rend.sharedMaterial = wallMaterial[1];
             displayText.text = "Keep Rolling...";
         }
     }
    }
    
  5. 階層ビューでfirst-wallを選択します。
  6. インスペクタービューのColorControllerスクリプトで、次の手順を実行します:

    a.[Wall Material (壁のマテリアル)]を展開し、[サイズ]に2を入力し、[Element 0 (エレメント0)][Element 1 (エレメント1)]にそれぞれafter-collisionおよびwall-colorをドラッグ&ドロップをします。

    b.[Display Text (表示テキスト)]の横にある歯車アイコンをクリックし、[メッセージ]を選択します。[Display Text (表示テキスト)]は、ステップ6.4のColorController.csスクリプトで宣言したのと同じフィールドです。

  7. 階層ビューでsecond-wallを選択します。
  8. インスペクタービューで[Add Components (コンポーネントの追加)] > [スクリプト]をクリックし、リストからColorControllerを選択した後、ステップ6を繰り返します。
  9. 残りの壁についてステップ7とステップ8を反復します。
  10. 上にあるプレイボタンをクリックして、アプリをプレビューします。キーボードの矢印キーを押して、ボールを転がします。

ステップ7.アプリをビルドして実行します。

ビルド設定で選択したターゲットプラットフォームに応じて、Androidの場合は.apkファイル、Windowsの場合は.exeファイルがUnityによってビルドされます。ここではOculus統合パッケージを使用しなかったため、このアプリをOculus Touchコントローラーで実行することはできません。

  1. シーンを保存します。
  2. [File (ファイル)] > [Build and Run (ビルドして実行)]に移動します。
  3. ファイルをダブルクリックすると、アプリがコンピューター上で実行されます。入力として、キーボードまたはUnity互換ジョイスティックを使用します。