３Ｄダイビングゲーム　手順１１

　以下の内容で順番に実装を進めていきます。

手順１１　－キャラと花輪の接触判定を実装－

１７．スクリプトを使って、キャラが花輪を通過した際の判定を実装する
１８．スクリプトを使って、花輪を通過した際に得点を加算する処理を実装する

　新しい学習内容は、以下の通りです。

　・ゲームオブジェクトの形状と異なる角度を持つコライダーの作成方法
　・Transform.parent変数

１７．スクリプトを使って、キャラが花輪を通過した際の判定を実装する

１．設計

　どのように設計ロジックを考えていけばよいか、前回学習した、水面との着水判定を元に考えてみましょう。

　花輪をくぐる　=>　花輪に侵入可能なコライダー（IsTrigger）を設置する。そこをキャラが通過すれば、「くぐった」判定を行える

　こちらの制御を実装するためには、花輪側のゲームオブジェクトの設定と、キャラ側のスクリプトの設定が必要になります。

　・花輪のゲームオブジェクトの中央部（くぐれる空間）にコライダーを設置して、キャラが侵入した場合にOnTriggerEnterメソッドを使って侵入判定を行えるようにする
　・キャラの PlayerController スクリプトを修正して、OnTriggerEnter メソッド内に Tag による分岐を作成し、花輪用の Tag を持つコライダーに侵入したら「通過」と判定できるように処理を追加する

　この２点です。

　PlayerController スクリプトに実装済の OnTriggerEnter メソッドを利用できるように、FlowerCircle ゲームオブジェクトにもコライダーを設置します。
水面のゲームオブジェクトのときと同じ手法です。

　そちらにコライダーを設定したら、PlayerController スクリプトの OnTriggerEnter メソッドを修正します。
水面のコライダーに侵入して「着水」と判定した際と同じように、ゲームオブジェクトの持つ Tag を利用して、
どのゲームオブジェクトのコライダーに侵入したかを分岐を作成して判定できるようにします。

　まずは、花輪用のゲームオブジェクトの設定から始めます。
　

２．FlowerCircle ゲームオブジェクトに Rigidbody コンポーネントを追加する

　ヒエラルキーにある FlowerCircle ゲームオブジェクトを選択してインスペクターから、一番下にある Add Component ボタンをクリックしてください。
Rigidbody コンポーネントを追加します。

　Rigidbody コンポーネントを追加したら、Use Gravity のチェックを外してオフにしておいてください。
オフになっていると重力の影響を受けなくなります。

FlowerCircle ゲームオブジェクト　インスペクター画像

３．FlowerCircle ゲームオブジェクトにコライダーを追加する

　続いて、キャラと花輪との接触判定を行えるようにするために、コライダーを追加していきます。
このとき、ただ FlowerCircle ゲームオブジェクトにコライダーをアタッチしただけでは、形状が上手く設定できません。

　今回はまず、この上手く設定できないパターンを学習してから、上手く設定する方法を学習します。

４．上手くいかない場合のコライダー

　FlowerCircle ゲームオブジェクトのインスペクターから、一番下にある Add Component ボタンをクリックして
Box Collider コンポーネントを追加してください。

FlowerCircle ゲームオブジェクト　インスペクター画像

　Box Collider コンポーネントの Edit Collider ボタンを押したり、Size を変更したりして、コライダーの形状を変更してみてください。

＜検証動画　コライダーの形状を変えてみるが…＞
https://gyazo.com/ccd4cb4eacdc2ba23b174da0b392edc0

FlowerCircle ゲームオブジェクトのコライダーの Size (5, 1, 5)インスペクター画像

Sceneビュー画像①

Sceneビュー画像②

　どのように形状を操作していても、角度が45度分ずれてしまいます。これは、コライダーの形状の角度は
親オブジェクトである FlowerCircle ゲームオブジェクトの回転角度（Rotation）の値に依存するためです。

　FlowerCircle ゲームオブジェクトは親オブジェクトであり、実際には花輪を形どっているのは子オブジェクトの Flower ゲームオブジェクトです。
この子オブジェクトの配置が花輪になるように設置されているため、親オブジェクトである FlowerCircle ゲームオブジェクトの角度を利用した場合
並べている角度とズレが生じてしまい、結果的にコライダーの形状がオブジェクトの形状と一致しないことになります。

５．＜ゲームオブジェクトの形状と異なる角度を持つコライダーの作成方法＞

　実際に確認していただいたように、コライダーの形状を変えても回転角度を変更することはできません。
そのため、残念ながらこのままではオブジェクトの形状とコライダーの形状が一致しません。

　これはゲームによりますが、オブジェクトの形状 = コライダーの形状は常に一致している必要はありません。（臨機応変に、柔軟に対応をしましょう）
ですが、今回のゲームでは、花輪の形状に見合ったコライダーの形状を持たせたいので、オブジェクトの花輪の形状 = コライダーの形状を一致させたいです。

　このようなときは、親子関係を上手く利用します。

　まずは FlowerCircle ゲームオブジェクトに追加した Box Collider コンポーネントを Remove Component を実行して削除してください。
Rigidbody コンポーネントはそのままアタッチしておきます。
　

FlowerCircle ゲームオブジェクト　インスペクター画像

　次に、FlowerCircle ゲームオブジェクトの上で右クリックをしてメニューを開き、Create => Empty で新規のゲームオブジェクトを子オブジェクトとして作成します。
名前を Collider に変更してください。

ヒエラルキー画像

Collider ゲームオブジェクト　インスペクター画像

　こちらの Collider ゲームオブジェクトのインスペクターから Add Component ボタンをクリックして、Box Collider コンポーネントを追加します。
IsTrigger のスイッチにチェックを入れておいてください。

　続いて、 Collider ゲームオブジェクトのTransform コンポーネントの Rotation の Y 軸を 0 から 45 に変更します。
これで Box Collider コンポーネントの Edit Collider ボタンを押して Size を変更してください。

＜手順動画　コライダーの形状を変更する＞
https://gyazo.com/76d34ff366170786fdd9d43645fe92d7

　ちゃんと花輪と同じ形状でコライダーの形状が変化するようになりました。
Size については以下のインスペクター画像の値も参考にしてください。

Collider ゲームオブジェクト　コライダーの Size 変更後のインスペクター画像

Sceneビュー画像①

Sceneビュー画像②

Sceneビュー画像③

　

　これでコライダーの設定が完了しました。

６．Collider ゲームオブジェクトに Tag を設定する

　PlayerController スクリプトの OnTriggerEnter メソッド内に Tag を利用した分岐制御を作成し、それによって
花輪のコライダーに侵入したかどうかを判定するようにする設計です。

　新しく FlowerCircle という名前の Tag を作成して、Collider ゲームオブジェクトに設定してください。
Tag の作成方法については、以前の学習を振り返って確認してみましょう。

　Tag を設定するのは、FlowerCircle ゲームオブジェクトではなく、Box Collider コンポーネントのアタッチされている
Collider ゲームオブジェクトに設定しますので、間違えないようにしてください。

Collider ゲームオブジェクト　インスペクター画像

　以上で、花輪側のゲームオブジェクトの設定は完了です。

７．PlayerController スクリプトを修正する

　宣言フィールドには、変数の追加はありません。

　OnTriggerEnter メソッド内に処理を追加して、着水の判定と同じように、Tag による条件を設定した if 文による判定処理を実装します。
FlowerCircle の Tag を持つゲームオブジェクトにキャラが侵入したら、Debug.Logメソッドを利用して "花輪ゲット" の文字列を Console ビューに表示して処理の制御を確認します。

PlayerController.cs

　<=　クリックすると開きます

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using DG.Tweening;

public class PlayerController : MonoBehaviour
{
    [Header("移動速度")]
    public float moveSpeed;

    [Header("落下速度")]
    public float fallSpeed;

    [Header("着水判定用。trueなら着水済")]
    public bool inWater;

    private Rigidbody rb;

    private float x;
    private float z;

    private Vector3 straightRotation = new Vector3(180, 0, 0);     // 頭を下(水面方向)に向ける際の回転角度の値

    [SerializeField, Header("水しぶきのエフェクト")]
    private GameObject waterEffectPrefab = null;

    [SerializeField, Header("水しぶきのSE")]
    private AudioClip splashSE = null;


    void Start() {
        rb = GetComponent<Rigidbody>();

        // 初期の姿勢を設定(頭を水面方向に向ける)
        transform.eulerAngles = straightRotation;
    }

    void FixedUpdate() {

        // キー入力の受付
        x = Input.GetAxis("Horizontal");
        z = Input.GetAxis("Vertical");

        // velocity(速度)に新しい値を代入して移動
        rb.velocity = new Vector3(x * moveSpeed, -fallSpeed, z * moveSpeed);
    }

　　// IsTriggerがオンのコライダーを持つゲームオブジェクトを通過した場合に呼び出されるメソッド
    private void OnTriggerEnter(Collider col) {

        // 通過したゲームオブジェクトのTagが Water であり、かつ、isWater が false(未着水)であるなら
        if (col.gameObject.tag == "Water" && inWater == false) {

            // 着水状態に変更する
            inWater = true;

            // 水しぶきのエフェクトを生成
            GameObject effect = Instantiate(waterEffectPrefab, transform.position, Quaternion.identity);
            effect.transform.position = new Vector3(effect.transform.position.x, effect.transform.position.y, effect.transform.position.z - 0.5f);

            // エフェクトを２秒後に破壊
            Destroy(effect, 2.0f);

　　　　　　// 水しぶきのSEを再生
　　　　　　AudioSource.PlayClipAtPoint(splashSE, transform.position);

　　　　　　// コルーチンメソッドである OutOfWater メソッドを呼び出す
            StartCoroutine(OutOfWater());        
        }


////* ここから追加 *////

        // 侵入したゲームオブジェクトの Tag が FlowerCircle なら
        if (col.gameObject.tag == "FlowerCircle") {

　　　　　　Debug.Log("花輪ゲット");


            // TODO 得点加算を追加する


            // TODO 画面に表示されている得点表示を更新する処理を追加する

            
        }


////* ここまで *////

    }

    /// <summary>
    /// 水面に顔を出す
    /// </summary>
    /// <returns></returns>
    private IEnumerator OutOfWater()
    {
        // １秒待つ
        yield return new WaitForSeconds(1.0f);   //  <= yield による処理。yield return new WaitForSecondsメソッドは、引数で指定した秒数だけ次の処理へ移らずに処理を一時停止する処理 

        // Rigidbody コンポーネントの IsKinematic にスイッチを入れてキャラの操作を停止する
        rb.isKinematic = true;

        // キャラの姿勢（回転）を変更する
        transform.eulerAngles = new Vector3(-30, 180, 0);

        // DOTweenを利用して、１秒かけて水中から水面へとキャラを移動させる
        transform.DOMoveY(4.7f, 1.0f);
    }
}

８．子オブジェクトのコライダーについて

　親オブジェクトではなく、子オブジェクトにコライダーの設定がある場合、親オブジェクトに Rigidbody コンポーネントを追加しておくことによって
OnTriggerEnter メソッドが反応するようになります。

　今回は親オブジェクトである FlowerCircle ゲームオブジェクトに Rigidbody コンポーネントがアタッチされていますので
そのおかげで、子オブジェクトの Box Collider が侵入判定を行うことが出来ています。

　コライダーの回転角度の設定と合わせて今後も活用できるテクニックですので、この機会に覚えておきましょう。

９．ゲームを実行して動作を確認する

　スクリプトの修正が終了したら、ゲームを実行して制御が正常に行われるようになっているかを確認していきます。
花輪の中をくぐった際に、Console ビューに "花輪ゲット" と表示されれば成功です。

　もしも表示されない場合には、Tagの設定、Rigidbodyのアタッチを確認してください。

＜実行動画＞
https://gyazo.com/7eebaa0541fa24974d712522f30487b1

　無事に侵入時に花輪の通過判定が確認できました。次は、侵入した際に、花輪に設定した得点をキャラが獲得できるように処理を追加していきます。

１８．スクリプトを使って、花輪を通過した際に得点を加算する処理を実装する

１．設計

　花輪のゲームオブジェクトのコライダーに侵入時に通過の判定を制御することが出来るようになりましたので
この手順では、さらにその通過の判定に合わせて、花輪に得点を持たせて、その花輪の持つ得点を、キャラが獲得できるように制御を追加していきます。

　・花輪に得点を持たせる　　=>　花輪にアタッチされている FlowerCircle スクリプトに得点用の変数を追加で宣言し、それを「花輪の持つ得点」として振る舞わせる
　・キャラが得点を獲得する　=>　PlayerController スクリプトに得点管理用の変数を追加で宣言し、花輪に侵入したら、花輪の持つ得点の情報を取得して、この変数に加算していく

　このような設計になります。

　大切なのは、どのような情報を追加すれば、それがゲーム内にどのような役割として振る舞うことができるようになるかをイメージして、変数を用意していくことです。

　「花輪を通過したら得点が入るようにしたい」　たったこれだけの日本語ですが、これをロジカルに考えて、上記で設計したような制御を組み立てていく必要があります。

２．FlowerCircle スクリプトを修正する

　宣言フィールドには、花輪に得点を持たせるための、public 修飾子で、int 型の point 変数を宣言します。
この値が、この花輪の持つ得点の値になります。初期値で 10 を設定していますが、public 修飾子を持つ変数ですので
インスペクターから変更することが可能です。

　public 修飾子で宣言した変数は、この FlowerCircle スクリプトだけではなく、他のスクリプトからの要請に対して、値を提示(参照)・変更することが可能になります。
この機能を利用して、PlayerController スクリプトから、この point 変数を参照できる状態にしておきます。
そうすることによって、花輪の持つ得点という情報を、PlayerController 側が取得して利用できる状態になります。

FlowerCircle.cs

　<=　クリックすると開きます

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using DG.Tweening;

public class FlowerCircle : MonoBehaviour
{

////* ここから追加 *////

    [Header("花輪通過時の得点")]
    public int point;


////* ここまで *////


    void Start() {

        // アタッチしたゲームオブジェクト(花輪)を回転させる
        transform.DORotate(new Vector3(0, 360, 0), 5.0f, RotateMode.FastBeyond360).SetEase(Ease.Linear).SetLoops(-1, LoopType.Restart).SetLink(gameObject);
    }
}

３．PlayerController スクリプトを修正する

　宣言フィールドに得点管理用の変数を追加します。
FlowerCircle スクリプトの point 変数の値を加算して管理しますので、こちらも int 型で宣言し、名前を score 変数にします。
private 修飾子で宣言していますので、ゲーム実行中やインスペクターからはこの値を見ることが出来ません。
そのような場合には Debug.Logメソッドを利用して、Console ビューに値の情報を表示するように制御を加えます。

　プログラムがどのように動いているかを把握するには、その挙動を随時、このような Debug.Logメソッドを利用して確認を行う必要があります。
どういった処理の前後に Debug.Logメソッドを追加すればいいのかをだんだんと学習していくためにも、今まで Debug.Logメソッドを利用してきた場所を振り返っておきましょう。

　OnTriggerEnter メソッド内に先ほど追加した Tag による if 分の制御処理内に、侵入したゲームオブジェクトの持つ FlowerCircle スクリプトを取得して point 変数を取得し
score 変数に加算していく処理を実装します。

PlayerController.cs

　<=　クリックすると開きます

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using DG.Tweening;

public class PlayerController : MonoBehaviour
{
    [Header("移動速度")]
    public float moveSpeed;

    [Header("落下速度")]
    public float fallSpeed;

    [Header("着水判定用。trueなら着水済")]
    public bool inWater;

    private Rigidbody rb;

    private float x;
    private float z;

    private Vector3 straightRotation = new Vector3(180, 0, 0);     // 頭を下(水面方向)に向ける際の回転角度の値


////* ここから追加 *////


    private int score;      // 花輪を通過した際の得点の合計値管理用


////* ここまで *////


    [SerializeField, Header("水しぶきのエフェクト")]
    private GameObject waterEffectPrefab = null;

    [SerializeField, Header("水しぶきのSE")]
    private AudioClip splashSE = null;


    void Start() {
        rb = GetComponent<Rigidbody>();

        // 初期の姿勢を設定(頭を水面方向に向ける)
        transform.eulerAngles = straightRotation;。
    }

    void FixedUpdate() {

        // キー入力の受付
        x = Input.GetAxis("Horizontal");
        z = Input.GetAxis("Vertical");

        // velocity(速度)に新しい値を代入して移動
        rb.velocity = new Vector3(x * moveSpeed, -fallSpeed, z * moveSpeed);
    }

　　// IsTriggerがオンのコライダーを持つゲームオブジェクトを通過した場合に呼び出されるメソッド
    private void OnTriggerEnter(Collider col) {

        // 通過したゲームオブジェクトのTagが Water であり、かつ、isWater が false(未着水)であるなら
        if (col.gameObject.tag == "Water" && inWater == false) {

            // 着水状態に変更する
            inWater = true;

            // 水しぶきのエフェクトを生成
            GameObject effect = Instantiate(waterEffectPrefab, transform.position, Quaternion.identity);
            effect.transform.position = new Vector3(effect.transform.position.x, effect.transform.position.y, effect.transform.position.z - 0.5f);

            // エフェクトを２秒後に破壊
            Destroy(effect, 2.0f);

　　　　　　// 水しぶきのSEを再生
　　　　　　AudioSource.PlayClipAtPoint(splashSE, transform.position);

　　　　　　// コルーチンメソッドである OutOfWater メソッドを呼び出す
            StartCoroutine(OutOfWater());        
        }

　　　　// 侵入したゲームオブジェクトの Tag が FlowerCircle なら
        if (col.gameObject.tag == "FlowerCircle") {


////* ここから追加 *////


　　　　　　//Debug.Log("花輪ゲット");        //  <=  確認が済みましたのでコメントアウトするか削除してください

            // 侵入した FlowerCircle Tag を持つゲームオブジェクト(Collider)の親オブジェクト(FlowerCircle)にアタッチされている FlowerCircle スクリプトを取得して、point 変数を参照し、得点を加算する
            score += col.transform.parent.GetComponent<FlowerCircle>().point;

            Debug.Log("現在の得点 : " + score);　　　//　<=　文字列に追加して int 型や float 型の情報を表示する場合には、ToString()メソッドを省略できます


////* ここまで *////


            // TODO 画面に表示されている得点表示を更新

        }
    }

    /// <summary>
    /// 水面に顔を出す
    /// </summary>
    /// <returns></returns>
    private IEnumerator OutOfWater()
    {
        // １秒待つ
        yield return new WaitForSeconds(1.0f);   //  <= yield による処理。yield return new WaitForSecondsメソッドは、引数で指定した秒数だけ次の処理へ移らずに処理を一時停止する処理 

        // Rigidbody コンポーネントの IsKinematic にスイッチを入れてキャラの操作を停止する
        rb.isKinematic = true;

        // キャラの姿勢（回転）を変更する
        transform.eulerAngles = new Vector3(-30, 180, 0);

        // DOTweenを利用して、１秒かけて水中から水面へとキャラを移動させる
        transform.DOMoveY(4.7f, 1.0f);
    }
}

４．＜Transform.parent変数＞

　Transform クラスには、parent(ペアレント)という変数があり、この変数を利用すると、そのゲームオブジェクトの親オブジェクトを参照することが出来ます。

  // 侵入した FlowerCircle Tag を持つゲームオブジェクト(Collider)の親オブジェクト(FlowerCircle)にアタッチされている FlowerCircle スクリプトを取得して、point 変数を参照し、得点を加算する
  score += col.transform.parent.GetComponent<FlowerCircle>().point;

　右辺の処理は、ピリオドの位置で順番に処理を紐解いて読む必要があります。
複数のピリオドが1行内に続いている場合には、左側の処理から読むことを以前学習しました。（DOTweenのメソッド・チェーンの部分です）

　この処理も同じで、左側にある col 変数から順番に処理を読んでいきます。

　col 変数には OnTriggerEnter メソッドで侵入したゲームオブジェクトの情報が代入されています。
こちらは Collider 型の変数ですが、Collider 型には Transform コンポーネントへの参照が用意されています。

　つまり、col.transform とは、キャラが侵入したゲームオブジェクトの Transform コンポーネントを指していますので
Collider ゲームオブジェクトのことを指定しています。

　parent 変数は、その Collider ゲームオブジェクトに対して処理を行いますので、
Collider ゲームオブジェクトの親オブジェクト、のことを指しています。FlowerCircle ゲームオブジェクトです。

　ここまでの処理によって、処理の対象が、Collider ゲームオブジェクトの Collider コンポーネントから
親オブジェクトである FlowerCircle ゲームオブジェクトのTransform コンポーネントに変更になりました。

　続いての処理は、GetComponentメソッドです。これは今現在の対象となっているゲームオブジェクトの Transform コンポーネントに対して行われます。
GetComponentメソッドは、ゲームオブジェクト型だけでなく、Transform 型に対しても同じ処理を命令できます。処理結果は同じです。
そのため、この処理は、FlowerCircle ゲームオブジェクトにアタッチされている FlowerCircle コンポーネント(スクリプト)を取得する、という命令になります。

　ここでまた、処理の対象が FlowerCircle ゲームオブジェクトではなくて、FlowerCircle スクリプトに変更なりました。

　最後は point ですので、こちらは FlowerCircle スクリプトに用意した point 変数の値を取得するという処理になります。
point 変数が public 修飾子によって宣言されていますので、そちらを参照します、という命令になります。

　このとき重要なのが、値の代入処理の原則です。左辺 = 右辺という処理を記述した場合
必ず双方の値の型が同じである必要があります。

　今回の場合、左辺には int 型の score 変数を用意しています。つまり、右辺にも int 型の値を用意しなければ、代入処理が成立しません。

　では最後に、型を見ながら今回の処理を書いてみましょう、

  score = col.transform.parent.GetComponent<FlowerCircle>().point;
  int = Collider.Transform(Collider).Transform(FlowerCircle).FlowerCircle.int;

　いかがでしょうか。ちゃんと最後に int 型の処理につながっていることがわかったと思います。
複数の処理を一緒に行う場合、必ず、その型を念頭において処理を制御していくことが重要になっています。

５．FlowerCircle スクリプトを設定を行う

　スクリプトを修正しましたので、FlowerCircle ゲームオブジェクトのインスペクターを確認します。
FlowerCircle スクリプトに point 変数が追加されて、初期値としてスクリプトで定義した 10 が設定されています。この値は自由に変更してください。

FlowerCircle ゲームオブジェクト　インスペクター画像

　以上で処理の流れは完成です。

６．ゲームを実行して動作を確認する

　ゲームを実行して、花輪のゲームオブジェクトを通過した際に、Console ビューに " 得点 : 10 " と表示されるか確認をしましょう。
侵入判定が成功し、花輪のゲームオブジェクトにアタッチされている FlowerCircle スクリプトの情報を取得できていれば、正常に制御が行われて
Console ビューに表示されます。

＜実行動画＞
https://gyazo.com/04944f2d381f282938e283e93139e853

　以上でこの手順は終了です。

　=>　次は　手順１２　－スコアの表示制御－　です。

このページを編集するこのページを元に新規ページを作成

印刷する

コメント（0）

３Ｄダイビングゲーム　手順１１ - i-school 先頭へ

コメントをかく

名前	ユーザIDを使用しないで書き込む	ユーザーIDを使う	ログインする
画像コード	画像に記載されている文字を下のフォームに入力してください。
備考	「http://」を含む投稿は禁止されています。
本文
利用規約をご確認のうえご記入下さい

i-school