アイテムを設置しよう のバックアップ(No.6)


はじめに

ステージにアイテム・ギミック・ゴールを設置していきます。
今回は

・拾うと移動スピードが変化するりんご
・エレベーター
・ゴール

の3つを実装します。

 

りんごの実装

まずアイテム用の画像を Assets に追加します。

 

#download(apple_red.png)

#download(apple_blue.png)

 

追加できたら Assets > それぞれの画像を選択し、inspector から Pixels Per Unit を 32 にそれぞれ変更に変更しておきます。

 

実装したいリンゴの仕様

・ステージの各所に同じ機能のりんごを複数設置する
・赤いリンゴを拾うと一定時間速度が上がる
・青いリンゴを拾うと一定時間速度が落ちる
・速度変化の効果は重ね掛けできる
・それぞれの色の速度変化と継続時間は inspector から調整できるようにする
 

「拾う」という動作は、ひつじに当たったときに効果を発動してりんごを消す
という処理で表現しようと思います。

プレハブについて

調べてみるとUnityで同じものを複製して使用するときはプレハブ(Prefab)が便利なようです。
プレハブはゲームオブジェクトから生成するので、まずはりんごのゲームオブジェクトを完成させます。
Assets から apple_red.png を Scene にドラッグ・ドロップし、ゲームオブジェクトを作ります。

 

コンポーネントの追加

作ったゲームオブジェクトにコンポーネントを追加します。
必要になりそうなコンポーネントは
・当たり判定用のCollider
です。
りんごの画像がほぼ円に近いので、今回は Circle Collider 2D でよさそうです。
inspector > Add Component から追加します。

 

追加できたらinspectorからコンポーネントの設定を少し変更します。
まず、りんごにひつじが反発するなどの物理演算は不要なので、isTrigger にチェックを入れて物理演算を無効にします。
次に、Radius の数値を調整し、当たり判定の大きさをりんごの画像に合わせます。0.4 くらいがちょうどよさそうです。

 

スクリプトを追加

Assets > Add Component > New Script から新しいスクリプトをりんごに追加します。
スクリプト名は Apple としておきます。
毎フレーム行いたい処理はないので Update メソッドは削除して大丈夫です。
まずは必要な変数を作っておきます。
速度の変化率 を float型で rate
継続時間を float型で duration としておきます。

  1. using System.Collections;
  2. using UnityEngine;
  3.  
  4. public class Apple : MonoBehaviour
  5. {
  6.     public float duration;
  7.     public float rate;
  8. }

rate と duration は public にしておけば inspector から編集できます。
テスト用に rate は 1.5, duration は 3.0 にしておきます。

 

速度変化の実装

次に速度変化を作ります。
当たり判定のイベントを受け取り、当たったオブジェクトがひつじだった場合にひつじの速度を変化させる処理で表現できそうです。
調べてみると isTrriger が入った Collider の当たり判定を受け取るイベントには OnTriggerEnter, OnTriggerStay, OnTriggerExit などがありましたが、今回は当たった時に一度だけ呼ばれればよいので OnTriggerEnter を選択しました。

  1. using System.Collections;
  2. using UnityEngine;
  3.  
  4. public class Apple : MonoBehaviour
  5. {
  6.     // 省略
  7.  
  8.     void OnTriggerEnter2D(Collider2D col)
  9.     {
  10.         if (col.name == "hitsuji_dot") {
  11.             MoveSheep moveSheep = col.GetComponent<MoveSheep>();
  12.             moveSheep.speed *= rate;
  13.         }
  14.     }
  15. }
 

OnTriggerEnterの引数 Collider2D 型の中にはnameという名前で当たったオブジェクトの名前が入っているので、それを使って当たったオブジェクトがひつじかどうかを判定しています。
当たったオブジェクトがひつじだった場合には、そのオブジェクトから GetComponent で MoveSheepコンポーネント を取得し、
speed にりんごの速度変化率 rate でかけて代入します。

 

継続時間の実装

次に、継続時間を実装します。
ひつじがりんごに触れて速度を変化させた後、一定時間後に元の速度に戻すことで表現できそうです。
調べてみると、Unity で一連の流れの中で数秒後の処理を行いたいときには コルーチン (coroutine)が便利なようです。
コルーチンはIEnumerator 型を戻り値とする関数として書き、StartCoroutine関数でその関数を呼び出すことができます。
以下はコルーチンの基本的な書き方です。

  1. public class Apple : MonoBehaviour {
  2.     void Start () {
  3.         // コルーチンを呼び出し  
  4.         StartCoroutine ("Test");
  5.     }
  6.  
  7.     // コルーチン  
  8.     private IEnumerator Test() {
  9.         // メッセージをconsoleに出力
  10.         Debug.Log("コルーチンの処理が始まりました");
  11.         // 一秒待つ
  12.         yield return new WaitForSeconds (1.0f);
  13.         // メッセージをconsoleに出力
  14.         Debug.Log("コルーチンの処理が終わりました");
  15.     }

このように書くと、Unityの console では
コルーチンの処理が始まりました
と出力された1秒後に
コルーチンの処理が終わりました
と出力されます。

 

これを使って、
ひつじがリンゴに触れたらコルーチンを呼び、
コルーチンのなかで速度を変化させた後、一定時間後に元の速度に戻す
ようにスクリプトを改良します。
まずは、コルーチンを作ります。コルーチン名は ChangeSpeed としておきます。
コルーチンのなかでひつじの速度を変えたいので、MoveSheep を引数で受け取れるようにしておきます。

  1. public class Apple : MonoBehaviour {
  2.  
  3.     // 省略
  4.  
  5.     // コルーチン  
  6.     private IEnumerator ChangeSpeed(MoveSheep moveSheep) {
  7.         moveSheep.speed *= rate;
  8.         yield return new WaitForSeconds(duration);
  9.         moveSheep.speed /= rate;
  10.     }
  11. }

*= で変化させたので、 /=すればもとの速度に戻ります。
元の速度を変数で保管しておく方法もありそうですが、りんごが複数あった時にスピード変化の効果を重ね掛けできるようにしたいのでこのような処理を考えました。

 

コルーチンができたら、ひつじと接触したときに子のコルーチンを呼び出すようにします。
コルーチンに引数を渡したいときは

  1. StartCoroutine(コルーチン(引数));

のように書くことができます。

  1. public class Apple : MonoBehaviour {
  2.  
  3.     // 省略
  4.  
  5.     void OnTriggerEnter2D(Collider2D col)
  6.     {
  7.         if (col.name == "hitsuji_dot") {
  8.             MoveSheep moveSheep =  col.GetComponent<MoveSheep>();
  9.             StartCoroutine(ChangeSpeed(moveSheep));
  10.         }
  11.     }
  12.  
  13.     // 省略
  14.  
  15. }
 

ひつじを消す

最後にひつじを消す処理を作ります。
オブジェクトの削除は Destory メソッドで実装できます。

  1. Destroy(消したいゲームオブジェクト, 消すまでの時間);

消すまでの時間は省略できます。

  1. public class Apple : MonoBehaviour {
  2.  
  3.     // 省略
  4.  
  5.     void OnTriggerEnter2D(Collider2D col)
  6.     {
  7.         if (col.name == "hitsuji_dot") {
  8.             MoveSheep moveSheep =  col.GetComponent<MoveSheep>();
  9.             StartCoroutine(ChangeSpeed(moveSheep));
  10.             Destroy(this.gameObject);
  11.         }
  12.     }
  13.  
  14.     // 省略
  15.  
  16. }

これで動きそうですが、これを実行してみるとひつじの速度が変わらなくなります。
調べてみると、Destroyは実行中のCoroutineもオブジェクトと一緒に消してしまうようです。
そこで、オブジェクト自体は消さずに、画像を見えなくして当たり判定を無効にする処理にかえようとおもいます。
オブジェクトの画像をUnityで表示している SpriteRenderer と CircleCollider2D をそれぞれ無効にすれば再現できそうです。

  1. public class Apple : MonoBehaviour {
  2.  
  3.     // 省略
  4.  
  5.     void OnTriggerEnter2D(Collider2D col)
  6.     {
  7.         if (col.name == "hitsuji_dot") {
  8.             MoveSheep moveSheep =  col.GetComponent<MoveSheep>();
  9.             spriteRenderer = this.GetComponent<SpriteRenderer>();
  10.             circleCollider2D = this.GetComponent<CircleCollider2D>();
  11.  
  12.             StartCoroutine(ChangeSpeed(moveSheep));
  13.             spriteRenderer.enabled = false;
  14.             circleCollider2D.enabled = false;
  15.         }
  16.     }
  17.  
  18.     // 省略
  19.  
  20. }

enebled を false にすることでコンポーネントを簡単に無効化できます。
これでりんごが消えたように見えます。

 

りんごのプレハブ化

完成したリンゴをプレハブにします。
その前に、プレハブ保管用のフォルダを Assets のなかに作っておきます。
フォルダ名は Prefabs としておきます。
フォルダを作ったら Hierarchy から先ほど作ったりんごをフォルダにドラッグ・ドロップします。
これだけでプレハブの完成です。
プレハブは Hierarchy 上で水色のキューブとして表示されるようになります。

 

りんごをステージの各所に設置

作ったプレハブを Scene にドラッグ・ドロップすると簡単にプレハブのインスタンスを生成できます。
ソフトウェアの分野でインスタンスとは「実体」を指し、設計図をもとにして実際に作った物などとよく表現されています。
ここではプレハブが「設計図」になっているわけです。純粋な「コピー」とは少し異なる概念です。
ステージの適当な位置にりんごのインスタンスを作って設置しておきます。

 

青りんごの実装

青リンゴも赤リンゴと同じように作ります。スクリプトは Apple.cs を流用し、rate を1/1.5にするだけです。
長くなるので省略します。

 
 

エレベーターの実装

エレベーターの画像を Assets に追加します。

#download(elevator.png);
例によって画像の Pixels Per Unit は 32 に変更します。

 

エレベーターの仕様

・一定時間おきに定位置から出現する
・一定距離登ったら消滅する
・地面のように上でジャンプできる
・上昇距離、上昇スピード、エレベーターの生成間隔は inspector から調整できるようにする
 

地面のようにエレベーター上でジャンプできるようにするには、エレベーターにgroundタグをつければ良いかもしれません。
調べてみると、プレハブのインスタンス生成はプログラムから行うことができるようです。
一定時間おきに定位置からインスタンスを生成すれば簡単に実装できそうです。
Assets から elevator.png を Scene にドラッグ・ドロップし、プレハブになるゲームオブジェクトを先に完成させます。

 

コンポーネントの追加

作ったゲームオブジェクトにコンポーネントを追加します。
調べてみると、物理演算が有効な当たり判定を持ったオブジェクトが移動する場合、Colliderに加えRigidbodyが必要になるようです
必要になりそうなコンポーネントは

・物理演算用のRigidBody
・当たり判定用のCollider

になります。

 

Rigidbody は2Dゲーム用の RIgidbody 2D を使います。
Collider はエレベーターの画像に合った形にしたいので、今回は Polygon Collider 2D を使います。
Polygon Collider 2Dは画像に合った形のコライダーを自動で作ってくれます。
inspector > Add Component から追加します。

 

追加できたらinspectorからコンポーネントの設定を少し変更します。
今回は物理演算を使ってひつじと反発してほしいので Collider の isTrigger はいじりません。
Rigidbody はBody TypeをKinematicに変更しておきます。
RigidBody の Kinematicモード は物理演算で摩擦、重力などを無視したい場合に使います。
物理法則に反する動きを作りたいときに便利です。また、Kinematicモード では transform による移動ができます。

 

スクリプトを追加

Assets > Add Component > New Script から新しいスクリプトをりんごに追加します。
スクリプト名は Elevator としておきます。
先に必要な変数を作っておきます。
上昇速度 を float型で speed
上昇距離 を float型で height としておきます。

  1. using UnityEngine;
  2.  
  3. public class Elevator : MonoBehaviour
  4. {
  5.     public float speed;
  6.     public float height;
  7.  
  8.     void Start()
  9.     {
  10.     }
  11.  
  12.     void Update()
  13.     {
  14.     }
  15. }
 

inspector から speed を 2, height を 6 に設定しておきます。

 

上昇の実装

Updateを使って毎フレーム上に移動させます。
ひつじを動かしてみる と同じやり方でできます。

  1. using UnityEngine;
  2.  
  3. public class Elevator : MonoBehaviour
  4. {
  5.  
  6.     // 省略
  7.  
  8.     void Update()
  9.     {
  10.         Vector3 pos = this.transform.position;
  11.         pos.y += speed * Time.deltaTime;
  12.         this.transform.position = pos;
  13.     }
  14. }
 

一定距離上昇して削除する処理の実装

上昇開始位置を変数で保存し、その現在位置 - 位置 が height を超えたときに Destroy すれば再現できそうです。
private な 変数 initPosition を追加し, Start で開始位置を記録するようにします。

  1. public class Elevator : MonoBehaviour
  2. {
  3.     // 省略
  4.  
  5.     private Vector3 initPosition;
  6.  
  7.     void Start()
  8.     {
  9.         initPosition = this.transform.position;
  10.     }
  11.  
  12.     void Update()
  13.     {
  14.         Vector3 pos = this.transform.position;
  15.         pos.y += speed * Time.deltaTime;
  16.         this.transform.position = pos;
  17.         if (this.transform.position.y - initPosition.y > height)
  18.         {
  19.             Destroy(this.gameObject);
  20.         }
  21.     }
  22. }
 

エレベーターのプレハブ化

Hierarchy から完成したエレベーターを Prefabsフォルダにドラッグ・ドロップします。
Hierarchy に残っているインスタンスは右クリック > Delete で削除します。

 

インスタンスの自動生成

りんごはあらかじめステージに設置しましたが、エレベーターはスクリプトで一定時間おきに同じ場所から出現するようにします。

ElevatorGeneratorの作成

まずは、エレベーターを生成するオブジェクトを新しく作ります。
Hierarchy > Create Empty
で空オブジェクトを作り、名前を ElevatorGenerator としておきます。

スクリプトの追加

作成したオブジェクトにスクリプトを追加します。
スクリプト名は ElevatorGenerator としておきます。
プレハブの生成は Instantiate メソッドで書くことができます。

  1. Instantiate(プレハブ);

Instantiate は引数で生成する場所や向きを指定できます。
自分と同じ位置に生成したい場合は、Prefabの座標を(0,0)にして

  1. Instantiate(プレハブ, this.transform);

のようにするだけでOKです
以下細かいこと

Instantiateの引数の挙動に注意
・引数が1つの場合、プレハブのoriginalのtransformで生成
・引数が2つの場合、第二引数で参照するtransformを指定する
・引数が3つの場合は、引数の型に応じて
 第二:参照するtransform(transform)、第三:ワールド座標(false) or 第二引数のtransform基準のローカル座標(true)の切り替え 指定しない場合(引数2つの場合)true
 第二:参照するposition(Vector3)  、第三:参照するrotation(Quaternion)
 を切り替える
よってオブジェクトの位置を初期化する場合、positionに加えrotationまで指定する必要がある
親オブジェクトと同じ位置に生成したい場合、Instantiate(elevator, this.transform.position, this.transform.rotation)
とする方法もあるが, あらかじめPrefabのoriginalの座標を0,0に設定しておくことで、
Instantiate(elevator, this.transform) のように書いて実現できる
そうです笑。
 

プレハブは Assets 内から検索するのが難しそうなので、Publicで代入用の変数を作り、inspector から設定することにします。

  1. using UnityEngine;
  2.  
  3. public class ElevatorGenerator : MonoBehaviour
  4. {
  5.     public Elevator elevator;
  6.  
  7.     void Start()
  8.     {
  9.         Instantiate(elevator, this.transform);
  10.     }
  11. }

Assets/Prefabs/Elevatorを選択し、transform Position のx ,y をそれぞれ0, 0にし、
ElevatorGenerator を inspector で選択し、Elevator 変数に Assets/Prefabs/Elevator をドラッグ・ドロップしておきます。
この状態でゲームを起動すると、ElevatorGeneratorの場所にElevatorが生成されます。

 

次に、エレベーターを一定時間おきに生成するようにスクリプトを改良します。
調べてみると、一定時間おきに同じ処理を行う場合には InvokeRepeating を使うと簡単なようです。

  1. InvokeRepeating("関数名", 開始時間, 繰り返し間隔);

これを使ってElevatorGeneratorを改良します。
InvokeRepeatingに渡す関数にはそのままでは引数を指定できないので、Instantiateをそのまま呼ぶのはあきらめ、Instantiateに引数入れて呼ぶ関数を別で作成します。
関数名は GenerateElevator としておきます。
生成間隔はpublicで変数を作り、inspector から調整できるようにしておきます。

  1. public class ElevatorGenerator : MonoBehaviour
  2. {
  3.     public Elevator elevator;
  4.     public float repeatRate;
  5.  
  6.     void Start()
  7.     {
  8.         InvokeRepeating("GenerateElevator", 3f, repeatRate);
  9.     }
  10.  
  11.     void GenerateElevator()
  12.     {
  13.         Instantiate(elevator, this.transform);
  14.     }
  15. }

これでスクリプトが完成です。
repeatRate は 1 に設定しておきます。
ElevatorGenerator を Scene 上で移動すれば、好きな位置からエレベーターを生やすことができます。

エレベーターを地面判定にする

地面の判定は ground タグで行ったので、エレベーターに groundタグをつければエレベーターを地面扱いにできそうです。
Assets/Prefabs/Elevator を選択し、inspector から Tag を Ground に設定します。
これでひつじがエレベーター上でもジャンプできるようになります。

ゴールの実装

最後にゴールを実装します。
ゴールの仕様は「接触したらクリア(スコア)画面に飛ぶ」というものになります。
よって、実装に必要な機能は

1.ゴールとの当たり判定を見る
2.当たった対象がプレイヤーかどうか判定を取る
3.クリア(スコア)画面に飛ぶ
といった風になります。

ゲームオブジェクトの作成

まず、ゴールの画像を挿入しましょう。

#download(goal.png)
これまでと同様に、上の画像からダウンロードしてアセッツのImagesにいれて
画像のPixePerUnitを32にします。
そうしたら、ヒエラルキーにドラッグ&ドロップし、名前を「Goal」とします。
これで、「Goal」という名前のオブジェクトとして生成されます。

 

次に、ゴールの設置したいところに作った「Goal」オブジェクトを移動させましょう。
(シーンからオブジェクトをドラッグして移動させたり、「Goal」オブジェクトのインスペクターからTransform>positionを変更させたり、お好みの方法で移動・設置してください)

 

新しいシーンの追加

次は「ゴールについたらクリア(スコア)画面に飛ぶ」という機能を追加します。
そのためにはまず、新しいシーンを作らなければなりません。
新しいシーンは、アセッツを右クリックし、Create>Sceneで作ることができます。
とりあえず、名前は「Score」とでもしましょう。
これで、「Score」という名前の新しいシーンができました。
そうしたら次は、「ゴールについたら」つまり「「Goal」オブジェクトに触れたら」今のシーンから「Score」シーンに移動する、
という機能を作ります。

シーンセッティング

次は、ゲームのプロジェクトに作ったシーンを追加します。
右上のFile>BuildSettingから

 

当たり判定の追加

前準備として、「Goal」オブジェクトに当たり判定を作ります。
「Goal」オブジェクトのインスペクター下部のAddComportnemtから、
Physics2D>PolygonCollider2Dをおしてコンポーネントを追加してください。
「Goal」オブジェクトの当たり判定は円や四角形で表現するのは難しいため、
今回は「PolygonCollider2D」という多角形の当たり判定を作れるものを利用しました。
インスペクターのPolygonCollider2D>EditColliderから画像の縁に合うように当たり判定の線を調節してください。
あと、「isTrigger」にチェックを入れるのもお忘れなく。

 

スクリプトの追加

当たり判定ができたら、C#スクリプトを作っていきます。
これまでと同じ要領で、「Goal」オブジェクトのインスペクター下部のAddComportnemtから、
NewScriptをおして、名前をGoalとして新しいスクリプトを「Goal」オブジェクトのコンポーネントととして追加してあげます。
次に、テキストエディターを開いて「Goal」スクリプトを編集していきます。

 
  1. using System.Collections;
  2. using System.Collections.Generic;
  3. using UnityEngine;
  4. using UnityEngine.SceneManagement; //<=新たに追加
  5.  
  6. public class Goal : MonoBehaviour
  7. {
  8.     // 省略
  9.  
  10.         // 当たり判定を貫通したときの命令を記述する
  11.     void OnTriggerEnter2D(Collider2D col)
  12.     {
  13.         // 当たった対象の名前が"hitsuji_dot"だったら、「Score」シーンに移動する
  14.         if (col.name == "hitsuji_dot")
  15.         {
  16.             SceneManager.LoadScene("Score");
  17.         }
  18.     }
  19. }
 

ここで初めて、これまでさんざん無視してきた"using ○○;"に触れようと思います。
ここでの○○は「名前空間(ネームスペース)」と呼ばれるもので、○○の中で定義されるものを、このスクリプトでも扱えるようにしてくれます。
C#では定義されたオブジェクトしか使うことができません。
例えば、"using UnityEngine"がないと、これまで何気なく使ってきた"GameObject"クラスや"Transform"クラス、今回も使っている"Collider2D"クラスなどが使えないわけです。
逆を言えば、"using UnityEngine"をいれることで、"UnityEngine"の名前空間で定義される様々なクラスやメゾットを自分で定義せずに使うことができます。
今回も、シーンに関する設定・動きなどを扱っている"UnityEngine.SceneManagment"という名前空間を使うことで、
"SceneManager"クラスおよび"LoadScene"メゾット(引数に指定した名前のシーンに移動する関数)を自作せずに利用できます。

 

さて、これでスクリプトは完成しました。
動作確認をしてみましょう。
ゴールに触れて真っ青な画面に飛んだら成功です。