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

　この手順ではキャラの姿勢を変更するための条件としてチャージ時間を設定して、ボタンと連動させる処理を実装します。
これは２回に分けて順番に実装を行います。

＜完成画像　ゲージが溜まっている間は、ボタンの色を変えて押せないことをアピール＞

＜完成画像　ゲージが溜まったらボタンの色を戻して押せることをアピール＞

＜完成動画＞
https://gyazo.com/3ac0d206e162c4d41964be9434f66370

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

手順１８　ー姿勢変更ボタンと姿勢変更ゲージを同期ー

２９．スクリプトを使って、姿勢変更ゲージが満タンになったときだけ姿勢変更ボタンを押せるように制御する

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

　・ボタンとゲージを連動させるためのロジックを考える
　・Selectable.interactable プロパティ

２９．スクリプトを使って、姿勢変更ゲージが満タンになったときだけ姿勢変更ボタンを押せるように制御する

１．設計

　まずは最初に、姿勢変更ゲージが満タンになったときだけ姿勢変更ボタンを押せるように制御する処理について考えます。
ゲームの開始と同時にゲージは自動的に溜まり始めるように実装できていますので、必要なのはボタンの制御です。

　・チャージ中(ゲージが溜まっている間)は、ボタンを押せない状態にする
　・チャージが完了(ゲージが満タンになったとき)は、ボタンを押せる状態にする

　ボタンの状態は、Button コンポーネントが持っている interactable プロパティを利用して制御します。
このスイッチがオンの間はボタンが押せる状態、オフの間はボタンが押せない状態を切り替えることができる機能です。

　大切なのは、このボタンの切り替え制御処理をどの部分に組み込んだらいいのか、そのロジックを考えることです。
どういう状態になったら、この処理を行えばいいのか、上記の日本語をプログラムに置き換えて考えてみてください。

＜実行動画　ゲージが溜まっている間はボタンが押せない。満タンになると押せる＞
https://gyazo.com/3ac0d206e162c4d41964be9434f66370

　
　この処理が無事に実装できたら、あと２つ、制御が必要な処理があります。

　１つは、ボタンを押せるようになったとき、ボタンを押したら、ゲージが減少している間は、ボタンを押せる状態のままにしておくことです。
つまり、チャージのゲージが減少している間は、もう一度だけボタンを押せるようにすることで直滑降の状態に戻すことができるようにします。
当然、その場合にはゲージが満タンではありませんから、またボタンは押せない状態に戻す必要があります。

＜実装動画　伏せ状態でゲージが減少している間は、１度だけボタンを押せる。押したら、チャージが終わっていないので、またボタンを押せない状態に戻す＞
https://gyazo.com/1b567d8079c76e63e10c1bea2da10c7f
　

　もう１つは、ボタンを押してゲージが減少している間にボタンを押さなかった場合、ゲージが 0 になったら
強制的にキャラの姿勢を戻して、ボタンを押せない状態に戻すように制御します。

＜実装動画　伏せの状態のままゲージがなくなったら強制的に直滑降の状態とボタンを押せない状態に戻す＞
https://gyazo.com/d38da6c1d06b92c6f6734bd703000f57

　これがすべて備わって、ボタンとゲージの連動処理が完成します。
　
　このロジックを、順番に１つずつ考えてみて、ロジックを実装してください。

　ヒントとしましては、チャージが完了しているか、していないかを管理するための変数を１つ用意し、そちらを活用するといいと思います。
ゲージが満タンになったら、この変数を操作し、ゲージが満タンではなくなった場合にも、この変数を操作します。
そうやって「現在のチャージの状態」という情報を新しく設定することによって、実装しやすくなります。

２．＜Selectable.interactable プロパティ＞

　Button コンポーネントは、bool 型の interactable プロパティを持っています。

　こちらのスイッチがオン(true)の場合、ボタンは有効な状態です。これを活性状態といいます。

　こちらのスイッチがオフ(false)の場合、ボタンは無効な状態です。
ボタンの色が Disabled Color で設定されている色に変わります(デフォルトは半透明な灰色)。これを非活性状態といいます。

　この情報はプロパティですので、スクリプトから操作をすることが出来ます。
今回はこちらの機能を利用して、ゲージが満タンになったら true にしてボタンを押せるようにし、
ゲージが溜まっている間は false にしてボタンを押せないように制御しつつ、視覚的にもわかるようにしています。

　実際にインスペクターで操作をしてみて、どのように変化するかを確認しておきましょう。

＜ボタンを押せない状態にする処理＞

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

＜ボタンを押せる状態にする処理＞

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

参考サイト

Unity公式スクリプティングAPI
Selectable.interactable
https://docs.unity3d.com/2019.1/Documentation/Scri...

すくまりのメモ帳様
【Unity】Buttonをinteractableで無効化したり、動的にイベントを追加する方法
https://squmarigames.com/2018/12/10/unity-beginner...

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

　このコードにはすべての必要な処理が記述されています。
自分で考えた制御処理を実装してから、こちらを確認してみてください。
こちらの通りでなくても、正常に処理が制御されているのであれば問題はありません。

PlayerController.cs

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

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

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 はチャージ完了


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


    [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;


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

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

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

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


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


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


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


    }

    void FixedUpdate() {

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

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

        // linearVelocity(速度)に新しい値を代入して移動
        rb.linearVelocity = 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 (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;


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

            }
        }

        // 姿勢が伏せの状態
        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.linearDamping = 25.0f;

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

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

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

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

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

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

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

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

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

　処理が完成したら、順番に実装できているかを確認します。

＜完成画像　ゲージが溜まっている間は、ボタンの色が押せない＞

＜完成画像　ゲージが溜まったらボタンの色が押せる＞

＜実行動画　ゲージが溜まっている間はボタンが押せない。満タンになると押せる＞
https://gyazo.com/3ac0d206e162c4d41964be9434f66370

＜実行動画　伏せ状態でゲージが減少している間は、１度だけボタンを押せる。押したら、チャージが終わっていないので、またボタンを押せない状態に戻す＞
https://gyazo.com/1b567d8079c76e63e10c1bea2da10c7f

＜実行動画　伏せの状態のままゲージがなくなったら強制的に直滑降の状態とボタンを押せない状態に戻す＞
https://gyazo.com/d38da6c1d06b92c6f6734bd703000f57

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

　=>　次は　手順１９　－花輪をくぐった際の演出を追加－　です。

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

印刷する

コメント（0）

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

コメントをかく

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

i-school