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

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

手順２８　ーステージ作成ー

４９．ステージを作成する　－スタート地点を設定して、道中に花輪を設置するー
５０．キャラの移動範囲の制限制御を追加する

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

　・ステージ作り
　・Mathf.Clampメソッド

４９．ステージを作成する　－スタート地点を設定して、道中に花輪を設置するー

１．設計

　キャラのスタート地点を決定します。その後、花輪の FlowerCircle ゲームオブジェクトのプレファブを適宜な位置に配置して、ステージを作成します。

　花輪のゲームオブジェクトは等間隔の高さに並ぶように始めはゲーム画面内に配置していきましょう。
その後、それを移動したり、他の花輪を追加して落下する際のダイブの目標地点としての役割を持たせることが出来ます。
１つの高さに２つ、あるいは近い距離に２つなど、ステージ作りは調整が大切ですので、実際に何回も遊んでみて設定を繰り返し行います。

　あっちもくぐりたいけど間に合わない、姿勢を変更すれば２つまとめてくぐれるかも、といった、
ゲーム内にユーザーが遊び方を考える部分、駆け引きやジレンマが生まれるように配置してステージを作成します。

２．キャラとカメラの位置を設定し、スタート地点を決定する

　Penguin ゲームオブジェクトの Position の Y を 100に、Main Camera ゲームオブジェクトの Position の Y を 104 に変更してください。

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

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

Gameビュー画像

　この位置を仮のスタート地点とします。これ以外にも変更できますので、その場合、カメラの位置は常にキャラの位置 + 4 で設定してください。

３．フォルダ役の Ways ゲームオブジェクトを作成する

　ヒエラルキー上の何もない部分で右クリックをしてメニューを開き、Create Empty を選択します。
新しい空のゲームオブジェクトが作成されますので、名前を Ways に変更します。

　このゲームオブジェクトを、ゲームの落下の道中用に適宜配置する FlowerCircle ゲームオブジェクトを入れるためのフォルダとして利用し、管理を行います。

ヒエラルキー画像

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

４．FlowerCircle ゲームオブジェクトをゲーム画面に配置する

　好きな数の FlowerCircle ゲームオブジェクトのプレファブを Ways ゲームオブジェクト内に配置して自由に配置しましょう。

　まずは Position の Y 軸を 20 ずつ増やして等間隔で並べて、それから、X 軸と Z 軸は自由に移動させてください。
これを横方向から見た場合、このようなイメージで上下に並べる形です。

Position Y 　　オブジェクト
104            Main Camera
100            Penguin
 80            FlowerCircle
 60            FlowerCircle
 40            FlowerCircle
 20            FlowerCircle
  5            ゴール地点用のFlowerCircleたち

イメージ

ヒエラルキー画像

Sceneビュー画像①　最初は等間隔に並べてみる

　上下の同じ位置に花輪があると、下の位置にある花輪には、上の花輪のゲームオブジェクトの影が映りこんで黒くなります。
回避するには、位置をずらすか、あるいは上のゲームオブジェクトの影の設定を切っておくかです。影の切り方は調べてみてください。

Sceneビュー画像②　同じ位置にあると下のゲームオブジェクトには影が映りこんで黒くなる

　その後も花輪のゲームオブジェクトを配置しながら、ステージに工夫を凝らしましょう。
１ステージ辺り、15個～20個位の花輪を用意して、色々なルートを通りながらゴールを目指してもらうようにします。

　・空中にも移動する花輪を設置する（移動速度も変更する。早い方がくぐりにくいので、点数は高い）
　・花輪の大きさを変更する。得点も変える(小さい方がくぐりにくいので、点数は高い)
　・伏せの姿勢を利用しないとくぐれない位置に花輪を設置する(この花輪の点数は高い)
　・高さの短い距離で複数個の花輪を設置して、一気に続けてくぐる楽しみを作る
　・ゴール地点の花輪の点数を変える。移動しているものは点数を高くする、など

参考用①　８個並べてみた際

参考用②　空中にも移動する花輪を設定してもよい
https://gyazo.com/918a6ecac21aa71e2980e1996268d200

参考用③　つづけてくぐると楽しい(少しずつ位置をずらしても面白い)
https://gyazo.com/c760d7aa93f9cabfa2bec6e8aff09e7f

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

　ゲームを遊んでみましょう。何回も遊んでみながら、どうすれば面白くなるのかを考えてみてください。
それを追加要素として実装のための設計を考えてみましょう。

　以上でこの手順は完成です。

５０．キャラの移動範囲の制限制御を追加する

１．設計

　キャラが落下している最中に、ステージ外に出てしまって着水できそうにない場合に備えて
キャラの移動できる範囲を水面内に収まるように制限を付けておきます。

　ステージの外側に見えないゲームオブジェクトを４枚おいて、外壁のようにする方法もありますが
その場合、コライダー同士の接触状況によってはコライダーを突き破ってステージ外に出てしまう恐れがあります。
また、ステージの大きさを変えるたびに壁の大きさも変えなければなりませんので、今回のゲームには適していません。

　ゲーム内に処理を実装する方法はいくつかあり、その中で最適と思われるものを実装するように考えてみましょう。

　今回は、PlayerController スクリプトからキャラの移動範囲を制限するようにします。
事前に移動できる範囲を上下左右に設定しておいて、その範囲外への移動については制限をかけて移動できないように制御します。

　制限するための設定値ですが、実数をそのままスクリプトに記述してもよいのですが、
ステージの大きさが変わるたびにスクリプトを変更しないとならなくなりますので、ステージ内に範囲を設定するためのゲームオブジェクトを配置し、
そのゲームオブジェクトの位置情報を参照して、移動する範囲を制限するようにします。
　
　これであれば、このゲームオブジェクトを移動するだけで、スクリプトは変更せずに、移動範囲の制限量を変更できます。
　
　最初にゲームオブジェクトを２つ配置して、移動範囲の制限を決定し、それからスクリプトを修正します。

２．移動できる範囲を制限するためのゲームオブジェクトを配置する

　移動範囲を制限するために、空のゲームオブジェクトを２つ作成します。

　まず１つ目は、水面の左下に配置するために作成します。

　ヒエラルキーの何もない場所で右クリックをしてメニューを表示し、Create Empty を選択します。
新しい空のゲームオブジェクトが作成されますので、名前を LimitLeftBottom に変更します。

　
ヒエラルキー画像

　このゲームオブジェクトは、水面からみて左下に配置し、キャラの移動範囲のうち、左端と下端(手前側)の値を制限させる役割を持ちます。
位置情報を利用するだけですので、Transform コンポーネント以外のコンポーネントは不要です。

　自分のステージの水面を見ながら、左端と下端として適当な位置にこのゲームオブジェクトを配置してください。
利用するのは X軸(左端)と Z軸(下端)だけですので、Y軸はどの高さでも問題ありませんが、水面近くで作業した方がやりやすいでしょう。

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

LimitLeftBottom ゲームオブジェクト　Sceneビュー画像(参考。自分の水面の状態に合わせる)

　続いても同じように、空のゲームオブジェクトを作成して、今度は右上に配置するようにします。

　ヒエラルキーの何もない場所で右クリックをしてメニューを表示し、Create Empty を選択します。
新しい空のゲームオブジェクトが作成されますので、名前を LimitRightTop に変更します。

ヒエラルキー画像

　このゲームオブジェクトは、水面からみて右上に配置し、キャラの移動範囲のうち、右端と上端(奥側)の値を制限させる役割を持ちます。
位置情報を利用するだけですので、Transform コンポーネント以外のコンポーネントは不要です。

　自分のステージの水面を見ながら、右端と上端として適当な位置にこのゲームオブジェクトを配置してください。
こちらも利用するのは X軸(左端)と Z軸(下端)だけですので、Y軸はどの高さでも問題ありません。

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

LimitRightTop ゲームオブジェクト　Sceneビュー画像

　以上で移動範囲を制限するためのゲームオブジェクトの設置は完了です。
この情報を利用できるように PlayerController スクリプトを修正して、移動範囲の制御を行います。

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

　宣言フィールドには、先ほど作成したゲームオブジェクトの位置情報を参照できるように
SerializeField属性で Transform 型の変数を２つ用意します。すでにお気づきかと思いますが、変数名とオブジェクト名とを大体合わせてあるのは
アサイン時にどのゲームオブジェクトをアサインするべきか、わかりやすくし、また万が一間違えていた場合に気づきやすくするためです。
これもスクリプトの可読性に関わる部分ですので、変数名にもわかりやすく、推察しやすい名前を付けるように心がけてください。

　Update メソッドに、新しく作成する LimitMoveArea メソッドの呼び出すを追加します。
Update メソッド内に記述された処理は毎フレーム呼び出される処理になりますので、メソッドも同様に、毎フレーム呼び出されることになります。

　LimitMoveArea メソッド内において、現在のキャラのX軸とZ軸を確認し、先ほど設定した上下左右の移動範囲の中に収まっているかを
Mathf.Clamp メソッドを利用して判定を行います。もしも、いずれかの方向で移動の範囲外になっている場合には、その範囲内になるように位置を調整した上で
現在のキャラの位置を更新し、制限した範囲内でのみ移動を行うように制御を行っています。

PlayerController.cs

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

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using DG.Tweening;
using UnityEngine.UI;
using Coffee.UIExtensions;

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

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

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

    // キャラの状態の種類
    public enum AttitudeType {
        Straight,        // 直滑降(通常時)
        Prone,           // 伏せ
    }

    [Header("現在のキャラの姿勢")]
    public AttitudeType attitudeType;


    private Rigidbody rb;

    private float x;
    private float z;

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

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

    private Vector3 proneRotation = new Vector3(-90, 0, 0);        // 伏せの姿勢の回転角度の値

    private float attitudeTimer;                                   // 姿勢変更が可能になるまでの計測用タイマー
    private float chargeTime = 2.0f;                               // 姿勢変更が可能になるまでのチャージ(待機)時間

    private bool isCharge;                                         // チャージ完了判定用。false は未完了(チャージ中)、true はチャージ完了

    private Animator anim;

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

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

    [SerializeField]
    private Text txtScore;

    [SerializeField]
    private Button btnChangeAttitude;

    [SerializeField]
    private Image imgGauge;

    [SerializeField]
    private ShinyEffectForUGUI shinyEffect;


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


    [SerializeField]
    private Transform limitLeftBottom;　　　　// 画面左下のゲームオブジェクトの位置情報

    [SerializeField]
    private Transform limitRightTop;          // 画面右上のゲームオブジェクトの位置情報


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


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

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

　　　　// 現在の姿勢を「直滑降」に変更(いままでの姿勢)
        attitudeType = AttitudeType.Straight;

　　　　// ボタンのOnClickイベントに ChangeAttitude メソッドを追加する
　　　　btnChangeAttitude.onClick.AddListener(ChangeAttitude);

　　　　// ボタンを非活性化(半透明で押せない状態)
        btnChangeAttitude.interactable = false;

        anim = GetComponent<Animator>();
    }

    void FixedUpdate() {

        // 着水したら、移動させない
        if (inWater) {
            return;
        }

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

        // 斜め移動の距離が増えないように正規化処理を行い、単位ベクトルとする(方向の情報は持ちつつ、距離による速度差をなくして一定値にする)
        Vector3 direction = new Vector3(x, 0, z).normalized;

        // velocity(速度)に新しい値を代入して移動
        rb.velocity = new Vector3(direction.x * moveSpeed, -fallSpeed, direction.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") {

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

            // 画面に表示されている得点表示を更新
　　　　　　txtScore.text = score.ToString();
        }
    }

    /// <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);
    }

    void Update() {

        if (inWater) {

            // ボタンを非活性化して押せない状態にする
            btnChangeAttitude.interactable = false;
            return;
        }


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


        // 移動範囲内か確認
        LimitMoveArea();


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


        // スペースキーを押したら
        if (Input.GetKeyDown(KeyCode.Space)) {

            // 姿勢の変更
            ChangeAttitude();
        }

　　　　// チャージ完了状態ではなく、姿勢が普通の状態
        if (isCharge == false && attitudeType == AttitudeType.Straight) {

            // タイマーを加算する = チャージを行う
            attitudeTimer += Time.deltaTime;

            // ゲージ表示を更新
            imgGauge.DOFillAmount(attitudeTimer / chargeTime, 0.1f);

            // ボタンを非活性化(半透明で押せない状態)
            btnChangeAttitude.interactable = false;

            // タイマーがチャージ時間(満タン)になったら
            if (attitudeTimer >= chargeTime) {

                // タイマーの値をチャージの時間で止めるようにする
                attitudeTimer = chargeTime;

                // チャージ状態にする
                isCharge = true;

                // ボタンを活性化(押せる状態)
                btnChangeAttitude.interactable = true;

                // 満タン時のエフェクト
                shinyEffect.Play(0.5f);
            }
        }

        // 姿勢が伏せの状態
        if (attitudeType == AttitudeType.Prone) {

            // タイマーを減算する = チャージを減らす
            attitudeTimer -= Time.deltaTime;

            // ゲージ表示を更新
            imgGauge.DOFillAmount(attitudeTimer / chargeTime, 0.1f);

            // タイマー(チャージ)が 0 以下になったら
            if (attitudeTimer <= 0) {

                // タイマーをリセットして、再度計測できる状態にする
                attitudeTimer = 0;

                // ボタンを非活性化(半透明で押せない状態)
                btnChangeAttitude.interactable = false;

                // 強制的に姿勢を直滑降に戻す
                ChangeAttitude();
            }
        }
    }

    /// <summary>
    /// 姿勢の変更
    /// </summary>
    private void ChangeAttitude() {

        // 現在の姿勢に応じて姿勢を変更する
        switch (attitudeType) {

　　　　　　// 現在の姿勢が「直滑降」だったら
            case AttitudeType.Straight:

                // 未チャージ状態(チャージ中)なら
                if(isCharge == false) {
   
                    // 以降の処理を行わない = 未チャージ状態なので、チャージ時の処理を行えないようにする
                    return;
                }

                // チャージ状態を未チャージ状態にする
                isCharge = false;

                // 現在の姿勢を「伏せ」に変更
                attitudeType = AttitudeType.Prone;

                // キャラを回転させて「伏せ」にする
                transform.DORotate(proneRotation, 0.25f, RotateMode.WorldAxisAdd);

                // 空気抵抗の値を上げて落下速度を遅くする
                rb.drag = 25.0f;

　　　　　　　　// ボタンの子オブジェクトの画像を回転させる
                btnChangeAttitude.transform.GetChild(0).DORotate(new Vector3(0, 0, 180), 0.25f);

                // 伏せの状態に遷移するための条件を指定する  => idle から stan のアニメーションに遷移する
                anim.SetBool("Prone", true);

                // 処理を抜ける(次の case には処理が入らない)
                break;

            // 現在の姿勢が「伏せ」だったら
            case AttitudeType.Prone:

　　　　　　　　// 現在の姿勢を「直滑降」に変更
                attitudeType = AttitudeType.Straight;

                // キャラを回転させて「直滑降」にする
                transform.DORotate(straightRotation, 0.25f);

                // 空気抵抗の値を元に戻して落下速度を戻す
                rb.drag = 0f;

　　　　　　　　// ボタンの子オブジェクトの画像を回転させる
                btnChangeAttitude.transform.GetChild(0).DORotate(new Vector3(0, 0, 90), 0.25f);

                // 伏せの状態を止めるための遷移の条件を指定する => stan から idle に遷移する
                anim.SetBool("Prone", false);

                // 処理を抜ける
                break;
        }
    }


////* ここからメソッドを１つ追加 *////


    /// <summary>
    /// 移動範囲の確認と制限
    /// </summary>
    private void LimitMoveArea() {

        // 現在のXの位置が移動範囲内に収まっているか確認し、超えていた場合には下限(左端)か上限(右端)に合わせる
        float limitX = Mathf.Clamp(transform.position.x, limitLeftBottom.position.x, limitRightTop.position.x);

        // 現在のZの位置が移動範囲内に収まっているか確認し、超えていた場合には下限(手前側)か上限(奥側)に合わせる
        float limitZ = Mathf.Clamp(transform.position.z, limitLeftBottom.position.z, limitRightTop.position.z);

        // 制限値内になるように位置情報を更新
        transform.position = new Vector3(limitX, transform.position.y, limitZ);
    }


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


}

　スクリプトの修正が完成したら、Penguin ゲームオブジェクトのインスペクターから PlayerController スクリプトを確認します。
SerializeField属性で宣言している変数が２つ追加されて表示されていれば問題ありません。

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

４．＜Mathf.Clampメソッド＞

　Mathf.Clampメソッドの機能ですが「制御したい指定値を、指定した範囲内の最小値、最大値に収めてくれる」処理になります。

使用例としましては、

制御したい指定値 = Mathf.Clamp(制御したい指定値, 最小値, 最大値);

　今回の場合であれば、以下のようにキャラの現在位置の制御を行っています。

　// 現在のXの位置が移動範囲内に収まっているか確認し、超えていた場合には下限(左端)か上限(右端)に合わせる
  float limitX = Mathf.Clamp(transform.position.x, limitLeftBottom.position.x, limitRightTop.position.x);

  // 現在のZの位置が移動範囲内に収まっているか確認し、超えていた場合には下限(手前側)か上限(奥側)に合わせる
  float limitZ = Mathf.Clamp(transform.position.z, limitLeftBottom.position.z, limitRightTop.position.z);

　つまり、transform.position.z の値であれば、最小値が limitLeftBottom.position.z 以下になった場合には limitLeftBottom.position.z の値に、
最大値が limitRightTop.position.z 以上になった場合には limitRightTop.position.z の値に制限をしてくれます。

　なおMathf.Clampメソッドにはオーバーロードがあり、引数の型は、float型とint型でそれぞれ利用が出来るようになっています。
今回は float 型を利用しています。

Unity公式スクリプトリファレンス
Mathf - Clamp
https://docs.unity3d.com/jp/540/ScriptReference/Ma...

５．Penguin ゲームオブジェクトの PlayerController スクリプトのアサイン情報に、必要なコンポーネントがアタッチされているゲームオブジェクトをドラッグアンドドロップして登録する

　ヒエラルキーにある、対象のゲームオブジェクトをドラッグアンドドロップしてアサインしましょう。

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

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

　Penguin ゲームオブジェクトを移動させて、画面の上下左右にずっと移動させてみます。
Position の X と Z を確認して、値が制限されている値以内に収まっていれば制御成功です。

　ゲーム画面とキャラの Position を確認してみてください。
　

＜実行動画　左と上を確認＞
https://gyazo.com/a3486625f5c6f8acbe4daf676b664679

＜実行動画　下と右を確認＞
https://gyazo.com/1c6050a8d46ee49c104a620194397b0a

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

　=>　次は　手順２９　ースマホでの制御ー　です。

　次は基礎編の最後になります。スマホで遊べるようにジョイスティックを追加します。

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

印刷する

コメント（0）

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

コメントをかく

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

i-school