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


設計

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


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


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



実装の手順


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

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


新しく学習する内容


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

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


3.UIManager スクリプトを作成して設定を行う

1.設定


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

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

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


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

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


2.UIManager スクリプトを作成する


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

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

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


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


UIManager.cs

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



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


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


UIManager インスペクター画像



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


<手順動画 アサイン>
https://gyazo.com/d81aca17e8376a834bc669b76d4c039c

UIManager インスペクター画像



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

1.設計

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

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


2.PlayerController スクリプトを修正する


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

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

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


PlayerController.cs



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


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


PlayerController インスペクター画像



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

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


<手順動画 アサイン>
https://gyazo.com/ba25346a6545a811ab8f0dcfc14143a9

PlayerController インスペクター画像



4.<Update メソッドの処理のメソッド化 ー処理のブロック化によるメリットー>


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


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メソッドがすっきりとスマートになったことがわかると思います。


5.ゲームを実行して動作を確認する


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

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

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


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


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


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


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