ベルトスクロールアクション　UI演出(ヒット数表示)　２

設計

　
　前の手順の続きからになります。プレファブにしたコンボ数表示用ゲームオブジェクトを生成する処理を実装します。

＜実装動画　設定した時間以内だとコンボ数が加算される。時間を超えると１に戻る。徐々に消える(消えるまでだと加算される)＞
https://gyazo.com/d4439eba4b64bb0abe9460acedc37917

＜実装動画　コンボ数が増えるほど表示がだんだん大きくなる＞
https://gyazo.com/961f12003b2e6c9ac48f2b383827ec93

実装の手順

　設計に基づき、以下の手順で実装を行います。前回の残りである【３】～【５】の実装を行います。

　１．コンボ数表示用のオブジェクト(ComboDetail)を作成してプレファブにする
　２．ComboDetail スクリプトを作成して、ComboDetail ゲームオブジェクトにアタッチして設定する
---- ここから ----
　３．UIManager スクリプトを作成して設定を行う
　４．PlayerController スクリプトを作成を修正して、コンボの発生処理を追加する
　５．ゲームを実行して動作を確認する

新しく学習する内容

　新しく学習する内容です。

　・Update メソッドの処理のメソッド化　ー処理のブロック化によるメリットー

３．UIManager スクリプトを作成して設定を行う

１．設定

　UI表示を制御するための管理用の UIManager クラスを作成し、そのクラスにおいてコンボ数表示用のゲームオブジェクトの生成処理を行います。

　CreateComboDetail メソッドを作成しておき、このメソッドを外部のクラスより呼び出すことで、コンボ数表示用のゲームオブジェクトを生成し、
現在のコンボ数を表示するようにします。

　生成されたオブジェクトにもスクリプトがアタッチされていますので、あとはこのクラスに用意してあるメソッドで処理を行い、
コンボ数を表示したり、アニメ演出をさせたりします。

処理の流れ

　１．攻撃がヒットした際に、UIManager クラスの CreateComboDetail メソッドが実行されて、コンボ数表示用のゲームオブジェクトが生成される
　２．生成されたゲームオブジェクトにアタッチされている ComboDetail クラスの SetUpComboDetail メソッドを実行し、
　　　現在のコンボ数の表示、アニメ演出を行い削除する一連の処理が実行される

　UIManager クラスでは、生成とメソッドの呼び出しを行うだけです。
　このように役割を分けてスクリプトを作成しておくことで、処理が分かりやすくなります。

２．UIManager スクリプトを作成する

　コンボ数表示用のゲームオブジェクトの情報を登録出来るように、変数を２つ宣言します。

　comboObjTran 変数は、コンボ数表示用のゲームオブジェクトの生成される位置の情報を登録します。
先ほどの手順で Canvas 内に作成してある ComboObjTran ゲームオブジェクトの RectTransfrom の情報をアサインします。

　comboDetailPrefab 変数にはプレファブしてあるコンボ数表示用のゲームオブジェクトの情報をアサインします。

　CreateComboDetail メソッドを呼び出すと、コンボ数表示用のゲームオブジェクトを生成を行います。
その際、引数として渡された値が画面に表示されるコンボ数になります。

UIManager.cs

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

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

public class UIManager : MonoBehaviour
{
    [SerializeField]
    private Transform comboObjTran;            // Canvasの子である ComboObjTran ゲームオブジェクトをドラッグアンドドロップして、Transform の情報をアサインする

    [SerializeField]
    private ComboDetail comboDetailPrefab;     // プレファブになっている ComboDetail ゲームオブジェクトをドラッグアンドドロップして、ComboDetail クラスの情報をアサインする


    /// <summary>
    /// コンボ数表示を生成
    /// </summary>
    public void CreateComboDetail(int comboCount) {

        // コンボ数表示を生成(ComboDetail クラスの持つメソッドを実行したいので、ComboDetail クラスで生成しておくことで GetComponent を実行しなくて済むようにする)
        ComboDetail comboDetail = Instantiate(comboDetailPrefab, comboObjTran, false);

        // コンボ数表示を設定したり、アニメ演出したりする処理を実行(先ほどの手順で作成済のメソッド)
        comboDetail.SetUpComboDetail(comboCount);
    }
}

３．UIManager ゲームオブジェクトを作成し、UIManager スクリプトをアタッチして設定する

　ヒエラルキーの空いている場所で右クリックをしてメニューを開き、Create Empty を選択して、空のゲームオブジェクトを作成します。
名前を UIManager に変更します。作成した UIManager スクリプトをドラッグアンドドロップしてアタッチします。

UIManager　インスペクター画像

　UIManager ゲームオブジェクトを選択して、インスペクターを確認して、UIManager スクリプトにて宣言している変数が２つアサインを行います。
アサインする情報についてはスクリプトの記述を参考にしてください。

＜手順動画　アサイン＞
https://gyazo.com/d81aca17e8376a834bc669b76d4c039c

UIManager　インスペクター画像

４．PlayerController スクリプトを修正して、コンボの発生処理を追加する

１．設計

　
　コンボ数表示用のゲームオブジェクトの生成デバッグを行うための処理を作成します。
ご自分で製作している PlayerController スクリプト(あるいは、プレイヤーの管理用スクリプト)に、以下の変数とメソッドを追加してください。

　今回は、デバッグ用に用意したボタンを押すことで、生成処理が行われるかどうかを確認していきます。
問題なく生成処理が行えた場合には、コンボ数表示用のゲームオブジェクトの生成処理を、自分で利用したい処理に追加して実装します。

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

　以下の処理を、ご自分で製作している任意のスクリプト(PlayerControllerなどのプレイヤーの管理用スクリプトを想定)内に追加してください。

　デバッグ用のボタンを押すことにより、TriggerComboCount メソッドが実行されて、UIManager クラスに用意した CreateComboDetail メソッドを実行します。
このときに引数として現在のコンボ数の値(comboCount 変数)を渡すことで、コンボ数として表示する値を指定します。

　Update メソッドでは、UpdateComboLimitTime メソッドが管理され、コンボ攻撃が発生した際に処理が動くように設計されています。
その際には、設定した時間を計測し、次のコンボ攻撃を受け付ける時間を測定します。この継続時間内であれば、次の攻撃はコンボとなり、コンボ状態を継続します。
コンボの回数が加算されて、継続される限り、毎回加算していきます。
　もしも継続時間外になった場合にはコンボ状態を終了し、次の攻撃は再度１回目のヒットとして扱うように制御を行います。

PlayerController.cs

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

public class PlayerController : MonoBehaviour
{

////* 自分の宣言フィールドに以下の変数の宣言を追加する *////

    [Header("コンボの受付時間")]
    public int comboLimit;

    private int comboCount;            // 現在のコンボ数(インスペクターで確認したい場合には[SerializeField]属性をつけてください)
    private float comboLimitTimer;     // コンボの受付時間用のタイマー
    private bool isComboChain;         // コンボ中かどうかの判定用。true はコンボ中。false は非コンボ中(インスペクターで確認したい場合には[SerializeField]属性をつけてください)

    [SerializeField]
    private UIManager uiManager;       // UIManager 代入用。ヒエラルキーにある UIManager ゲームオブジェクトをアサインして UIManager スクリプトを取得

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


////* 自分の Update メソッド内に以下の処理を追加する *////

    void Update() {

        // コンボの時間判定
        UpdateComboLimitTime();

        // デバッグ用
        if (Input.GetKeyDown(KeyCode.Z)) {　　　　// <=　好きなキーを登録する

　　　　　　// TODO 実際にはこのメソッドは攻撃ヒット時に呼び出すようにする
            TriggerComboCount();
        }
    }

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


////* ２つのメソッドを追加 *////

    /// <summary>
    /// コンボ処理の際に呼ばれる
    /// </summary>
    public void TriggerComboCount() {
        // 攻撃時に呼ばれる　コンボ中に設定
        isComboChain = true;

        // コンボのカウントを加算
        comboCount++;

        // タイマーをリセット
        comboLimitTimer = 0;

        // コンボ数表示を生成
        uiManager.CreateComboDetail(comboCount);

        Debug.Log("コンボ中 : " + comboCount + " Hit!");
    }

    /// <summary>
    /// コンボの持続時間を計測(Updateメソッドで常に呼ばれている)
    /// </summary>
    private void UpdateComboLimitTime() {
        
        // コンボ中でなければタイマーは計測しない(Updateメソッド内で呼ばれているため、必要時(コンボ時)以外には処理を行わないようにする制御が必要)
        if (!isComboChain) {
            return;
        }

        // タイマー計測
        comboLimitTimer += Time.deltaTime;

        // タイマーの計測値がコンボ持続時間の規定値を超えたら
        if (comboLimitTimer >= comboLimit) {
            // コンボ終了
            isComboChain = false;

            // 設定を初期化
            comboLimitTimer = 0;
            comboCount = 0;            

            Debug.Log("コンボ終了");
        }
    }

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

}

３．PlayerController スクリプトのアタッチされているゲームオブジェクトの設定を行う

　修正したスクリプトのアタッチされているゲームオブジェクトを選択して、スクリプトに追加した変数のアサイン情報の設定を行います。
この例では PlayerController スクリプトがアタッチされているゲームオブジェクトを選択しています。

PlayerController　インスペクター画像

　comboLimit 変数にはコンボ攻撃を受け付ける時間を設定してください。ここでは 2 で設定していますので、
1回の攻撃につき２秒間だけ攻撃のヒットをコンボ数として継続して加算します。

　uiManager 変数にはゲームオブジェクトにアタッチされている UIManager スクリプトを代入します。
ヒエラルキーにある UIManager ゲームオブジェクトを選択して、ドラッグアンドドロップしてアサインしてください。
自動的に UIManager スクリプトが登録されます。

＜手順動画　アサイン＞
https://gyazo.com/ba25346a6545a811ab8f0dcfc14143a9

PlayerController　インスペクター画像

４．＜Update メソッドの処理のメソッド化　ー処理のブロック化によるメリットー＞

　Update 内に記述する処理が長くなってしまったり、他の処理との区別を行いたい場合には、１ブロックの処理につき、１つのメソッドを用意することで
長くなってしまった処理を簡潔に記述し、また、処理単位でまとめることができるため便利です。

Update内に処理を全部書いた場合

　　void Update()
    {
        // 地面の判定
        isGround = Physics.Linecast(transform.position + transform.up * 1, transform.position - transform.up * 0.3f, groundLayer);

　　　　// ジャンプの判定と処理
　　　　if (Input.GetButtonDown(JUMP) && isGround) {
            //  着地していたとき、着地判定をfalse
        　　isGround = false;

       　　 //  Jumpステートへ遷移してジャンプアニメを再生
       　　 anim.Play(AnimatorState.Jump.ToString());

      　　　//  AddForceにて上方向へ力を加える
      　　　rb.AddForce(Vector3.up * jumpPower, ForceMode.Impulse);
        }

　　　　// コンボの受付時間の計測処理
        if (!isComboChain) {
            return;
        }

        // タイマー計測
        comboLimitTimer += Time.deltaTime;

        // タイマーの計測値がコンボ持続時間の規定値を超えたら
        if (comboLimitTimer >= comboLimit) {
            // コンボ終了
            isComboChain = false;

            // 設定を初期化
            comboLimitTimer = 0;
            comboCount = 0;            

            Debug.Log("コンボ終了");
        }

        // デバッグ用
        if (Input.GetKeyDown(KeyCode.Z)) {
            TriggerComboCount();
        }
　  }

処理単位でメソッド化し、Update内に処理を書いた場合

　　void Update()
    {
        // 地面の判定
        CheckGround();

        // ジャンプの判定と処理
        JudgeJump();

        // コンボの時間判定
        UpdateComboLimitTime();

        // デバッグ用
        if (Input.GetKeyDown(KeyCode.Z)) {
            TriggerComboCount();
        }
    }

　各メソッド内には、Updateメソッド内で記述していた処理がそのまま記述されています。
Update内に記述されている処理がどのような処理であるのかが、メソッド名によって明確にわかり、
合わせてUpdateメソッドがすっきりとスマートになったことがわかると思います。

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

　すべての実装が終了しましたので、デバッグを行いましょう。
ゲームを実行して、デバッグの呼び出し用に設定したキーを入力します(例ではZボタン)

　ボタンを押すたびに、コンボ数表示用のゲームオブジェクトが、指定した位置に生成されれば成功です。
comboLimit 変数で設定した秒数(2秒)以内にボタンを押すと、コンボの数が加算されて、コンボ数表示が生成されます。

　2秒を経過してからボタンを押すと、また最初から(1 Hit)からコンボ数表示用のゲームオブジェクトが生成されます。

＜実装動画　設定した時間以内だとコンボ数が加算される。受付の設定時間を超えると１に戻る。徐々に消える(消えるまでだと加算される)＞
https://gyazo.com/d4439eba4b64bb0abe9460acedc37917

＜実装動画　コンボ数が増えるほど表示がだんだん大きくなる＞
https://gyazo.com/961f12003b2e6c9ac48f2b383827ec93

　問題なく動作したら、この処理を実際の攻撃のヒット時の処理に実装してください。
UIの演出の方法に関しては、これらの一連の処理の流れをしっかりと把握していただければ、ほかの処理も同じように実装ができます。

　以上でこの手順は終了です。おつかれさまでした。

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

印刷する

コメント（0）

ベルトスクロールアクション　UI演出(ヒット数表示)　２ - i-school 先頭へ

コメントをかく

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

i-school