イベント駆動型処理の作成例②

一定の時間が経過するとイベント準備が整うケース

　UniTaskとUniRxを使用して Final FantasyのATBゲージのような、一定時間が経過するとイベントの準備が整うシステムを実装する例です。
ここではボタンが押せるようにしています。

　３回にわけて異なる学習を行いますが、すべて同じ処理として機能します。
徐々に難しくなっていきますので、１回の学習ですべてを覚えようとする必要はありません。

　まずはこの手順の内容を理解してから先に進むようにし、そちらが難しい場合にはまたこちらに戻ってきて復習してみてください。

＜実装動画＞

動画ファイルへのリンク

設計と概要

　Unityにおいて、UIの表示・操作とゲームシステムの制御という2つの機能は切り離せないことが多いです。
例えば、ゲームの進行に合わせてUIの表示・操作を制御するような機能を実現するには、UIの操作に関する処理とゲームシステムの進行に関する処理をうまく組み合わせる必要があります。

　今回はイベント処理の学習を踏まえて、まずは１つのクラスで処理を実装します。

　クラスについても、非同期処理をコルーチンメソッドで実装するパターンと、UniRx とオブザーバーパターンを利用して実装するパターンの２つを作成します。
UniRx とオブザーバーパターンについては、さらに次の手順で MVP パターンとしての作成方法も学習します。
　

必要な機能

　
　今回実装したい処理においては、以下のような機能を持つクラスが必要です。

　１．ATB値の初期化
　２．攻撃ボタンのクリックによるATB値のリセット
　３．ATBゲージの表示の UI 更新
　４．ATB値の回復
　５．攻撃ボタンの状態の更新

　どのような処理のロジックを構築すれば、これらの機能を実現できるか考えてみてください。
　
　いずれの処理も密接にかかわっています
また例えば、４の処理を作るためには少なくとも「現在値、回復量、上限値といった値を管理する」仕組みを作成する必要があり、
「現在値は上限値を超えないように制御する」といった処理の内部が見えてきます。

　なお処理のデバッグにあたり、UI については最低限のものでよいので自作しておきましょう。

　Image と Button が配置されていれば大丈夫です。

コルーチンを利用した実装例

　先ほどの機能について、１つのクラスにまとめて記述してみます。

　作成するクラスは ATBControllerCoroutine です。
非同期処理にコルーチンメソッドを利用してイベント処理を作成しています。

　まずはこちらで処理の構成を理解するようにしましょう。

ATBControllerCoroutine.cs

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

using System.Collections;
using UnityEngine;
using UnityEngine.UI;

public class ATBControllerCoroutine : MonoBehaviour
{
    private float currentATB = 0f;　　　　// (「１．ATB値の初期化」)

    [SerializeField] private Image atbGauge; 　　　// ATBゲージのImageコンポーネント
    [SerializeField] private Button attackButton;  // 攻撃ボタンのButtonコンポーネント

    [SerializeField] private float maxATB = 100f;           // ATBの最大値
    [SerializeField] private float attackThreshold = 80f;   // ATBが80に達したら攻撃可能にする
    [SerializeField] private float recoveryRate = 10f;      // 1秒あたりのATB回復量


    void Start()
    {
　　　　// ボタンに処理を登録
        attackButton.onClick.AddListener(ResetATB);
        attackButton.interactable = false;

　　　　// 待機スタート
        StartCoroutine(WaitTimer());
    }

    // 待機
    IEnumerator WaitTimer()
    {
        // ATBを1秒ごとに回復する(「４．ATB値の回復。現在値、回復量、上限値も作成する必要があり、現在値は上限値を超えないようにする」)
        while (currentATB.Value > maxATB)
        {
            currentATB.Value += recoveryRate * Time.deltaTime;
            yield return null;
        }
        Debug.Log("待機終了");
    }

    void Update()
    {
        // ATBゲージの表示を更新する(「３．ATBゲージの表示の UI 更新」)
        // （省略）
        
        // 攻撃ボタンの状態を更新する(「５．攻撃ボタンの状態の更新」)
        attackButton.interactable = currentATB >= attackThreshold;
    }

    // ボタンを押下した際に実行される
    // ATB値をリセットする
    public void ResetATB()
    {
        // ATBをリセットする(「２．攻撃ボタンのクリックによるATB値のリセット」)
        currentATB = 0f;

        Debug.Log("Reset");

        // 再度待機スタート
        StartCoroutine(WaitTimer());
    }   
}

　各機能について番号を振っておきました。
どの処理がどこに実装されていて、どういったロジックになっているのかを読み解いてみてください。

　また AttackThreshold、recoveryRateなどのパラメータを調整することで、ATBの動作を調整できます。

　実際にゲームを実行して動作の検証を行いましょう。

UniRx とオブザーバーパターンを利用した実装例

　続いては、先ほどの処理を UniRx とオブザーバーパターンを利用して実装した例を提示します。

　前回作成したクラスを修正するのではなく、新しく ATBController クラスを作成し、比較できるようにしています。
今回も機能ごとの番号を振ってありますので、処理を読み解いてみてください。

ATBController.cs

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

using UnityEngine;
using UnityEngine.UI;
using UniRx;

public class ATBController : MonoBehaviour
{
    private ReactiveProperty<float> CurrentATB = new (0f);　　// (「１．ATB値の初期化」)

    [SerializeField] private Image atbGauge; 　　　// ATBゲージのImageコンポーネント
    [SerializeField] private Button attackButton;  // 攻撃ボタンのButtonコンポーネント

    [SerializeField] private float maxATB = 100f;           // ATBの最大値
    [SerializeField] private float attackThreshold = 80f;   // ATBが80に達したら攻撃可能にする
    [SerializeField] private float recoveryRate = 10f;      // 1秒あたりのATB回復量


    void Start()
    {
        // 攻撃ボタンがクリックされたらATB値をリセットする(「２．攻撃ボタンのクリックによるATB値のリセット」)
        attackButton.OnClickAsObservable()
            .Subscribe(_ => ResetATB())
            .AddTo(this); // ストリームを破棄するために必要

        // EveryUpdate() を使って、1フレームごとにATBを回復するストリーム(「４．ATB値の回復。現在値、回復量、上限値も作成する必要があり、現在値は上限値を超えないようにする」)
　　　　Observable.EveryUpdate()
            .Where(_ => currentATB.Value < maxATB)
            .Subscribe(_ => currentATB.Value += recoveryRate * Time.deltaTime)
            .AddTo(this);
    }

    void Update()
    {
        // ATBゲージの表示を更新する(「３．ATBゲージの表示の UI 更新」)
        // （省略）
        
        // 攻撃ボタンの状態を更新する(「５．攻撃ボタンの状態の更新」)
        attackButton.interactable = CurrentATB.Value >= attackThreshold;
    }

　　// ATB をリセットする
    public void ResetATB()
    {
        // 攻撃処理
        Debug.Log("Reset");

        // ATBをリセットする(「２．攻撃ボタンのクリックによるATB値のリセット」)
        CurrentATB.Value = 0f;
    }
}

　コルーチンでの実装時に Start メソッドに記述していた
ボタンのクリック処理と WaitTimer メソッドの処理(ATBの回復処理)をボタンのクリック処理を UniRxのObservableを使って実装しています。

　また、攻撃ボタンの状態を更新するためには UniRxのReactivePropertyを使っていますので、ResetATBメソッドも、単純にATBの値をリセットするだけの実装になっています。

　全体的に、UniRxを使ったシンプルでわかりやすいコードになっていることが分かります。

　こちらも実際にゲームを実行して動作の検証を行いましょう。

ATBControllerの Update 内の処理のリファクタリング

　先ほどの ATBControllerの Update 内の処理を UniRx の Observable にして簡潔に実装することができます。
その結果、Start メソッド内において、ATB値の初期化、リセット、ゲージの表示更新、回復、攻撃ボタンの状態更新などの機能をすべて実装しています。

　以下がその例です。

ATBController.cs

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

using UnityEngine;
using UnityEngine.UI;
using UniRx;
using UniRx.Triggers;

public class ATBController : MonoBehaviour
{
    private ReactiveProperty<float> CurrentATB; // 現在のATB値

    [SerializeField] private Image atbGauge; 　　　// ATBゲージのImageコンポーネント
    [SerializeField] private Button attackButton;  // 攻撃ボタンのButtonコンポーネント

    [SerializeField] private float maxATB = 100f;           // ATBの最大値
    [SerializeField] private float attackThreshold = 80f;   // ATBが80に達したら攻撃可能にする
    [SerializeField] private float recoveryRate = 10f;      // 1秒あたりのATB回復量


    void Start()
    {
        // ATB値を0で初期化する
        currentATB = new ReactiveProperty<float>(0f);

        // 攻撃ボタンがクリックされたらATB値をリセットする
        attackButton.OnClickAsObservable()
            .Subscribe(_ => ResetATB())
            .AddTo(this); // ストリームを破棄するために必要

        // EveryUpdate() を使って、1フレームごとにATBを回復するストリーム
　　　　Observable.EveryUpdate()
            .Where(_ => currentATB.Value < maxATB)
            .Subscribe(_ => currentATB.Value += recoveryRate * Time.deltaTime)
            .AddTo(this);

        // ATBゲージの表示を更新するストリーム(☆　いままで Update で処理していた内容)
        currentATB
 　　　 　　.Subscribe(atb => atbGauge.fillAmount = atb / maxATB)
            .AddTo(this);

        // 攻撃ボタンの状態を更新するストリーム(☆　いままで Update で処理していた内容)
        currentATB
            .Select(atb => atb >= attackThreshold)
            .SubscribeToInteractable(attackButton)
            .AddTo(this); // ストリームを破棄するために必要
    }

    // ATB値をリセットする
    public void ResetATB()
    {
        currentATB.Value = 0f;
    }
}

UniRx 全体の解説

　Start メソッドでReactiveProperty<float>型のcurrentATBを0で初期化しています。
ただしこれは宣言の時点で初期化しても問題ありません。

　攻撃ボタンがクリックされたら ResetATB を実行し、currentATB.Valueを0にリセットするストリームを作成しています。
また、ATB値を回復するストリームも作成しています。

　いままで Update メソッド内にあった ATBゲージの表示を更新する処理や、攻撃ボタンの状態を更新する処理を UniRx を利用してストリームを作成しています。
Select オペレータを活用し、currentATBの値がattackThreshold以上であれば攻撃ボタンを有効にし、そうでなければ無効にします。
その際には Subscribe ではなく、SubscribeToInteractable を利用することで処理を簡潔に記述しています。

＜SubscribeToInteractable の場合＞

        // 攻撃ボタンの状態を更新するストリーム(☆　いままで Update で処理していた内容)
        currentATB
            .Select(atb => atb >= attackThreshold)
            .SubscribeToInteractable(attackButton)
            .AddTo(this); // ストリームを破棄するために必要

　これは

＜Subscribe の場合＞

        // 攻撃ボタンの状態を更新するストリーム(☆　いままで Update で処理していた内容)
        currentATB
            .Select(atb => atb >= attackThreshold)
            .Subscribe(isInteractable => attackButton.interactable = isInteractable)  // この部分をSubscribeToInteractableで代用している
            .AddTo(this); // ストリームを破棄するために必要

　と同じです。

参考サイト

Qiita @RyotaMurohoshi 様
UniRxでトグルのオン・オフの変更に連動し、ボタンの有効・無効を変化させる

　これらのストリームをAddToメソッドでATBControllerに対して購読し、GameObjectが破棄されたときにストリームも破棄されるようにしています。

　このように UniRxを使用することで、ATBシステムの実装が簡単になり、コードがよりシンプルになります。
UniTaskを使用することもできますが、この場合はATB値の回復など、一定間隔で実行される処理に限定して使用することが一般的です。

　ここでの重要な点は、ストリームを活用して各機能を実装していることで、コードを簡潔かつ分かりやすくしていることです。
データの流れを明確にし、コードの読みやすさや保守性を向上させることができます。

処理の置き換え

　UniRx には多くのファクトリ・メソッドが用意されているため、同様の処理を、複数の書き方で実装出来ます。

　以下は Observable.EveryUpdate() の部分を Observable.Interval() で作成した場合のケースです。
処理の内容は同じ機能として実行されます。

    　　// Interval() を使って、1フレームごとにATBを回復するストリーム
　　　　Observable
    　　　　.Interval(TimeSpan.FromSeconds(1f / recoveryRate))
    　　　　.Where(_ => CurrentATB.Value < maxATB)
    　　　　.Subscribe(_ => {
        　　　　var delta = 1f / recoveryRate;
        　　　　CurrentATB.Value = Mathf.Clamp(CurrentATB.Value + delta, 0f, maxATB);
    　　　　})
    　　　　.AddTo(this);

　ここでは Observable.Interval を使って、一定時間ごとにストリームを発行しています。

　TimeSpan.FromSeconds(1f / recoveryRate) で、1秒を recoveryRate で割った時間間隔でストリームを発行します。
その後、 Where オペレータで CurrentATB の値が maxATB 未満である場合にストリームを通過させ、Subscribe でATB値を回復させています。

　ここでは、回復量を 1f / recoveryRate で計算し、 Mathf.Clamp メソッドを使用して、ATB値が最大値を超えないようにしています。

　１回の説明を読んだだけでは理解をすることが難しい内容であるため、
実際に処理を書いて、動かしてみるようにするとよい学習になります。

　以上になります。

　続いて、クラス内の処理を分割し、MVPパターンによる実装を行います。

　次は イベント駆動型処理の作成例③ です。

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

印刷する

コメント（0）

イベント駆動型処理の作成例② - i-school 先頭へ

コメントをかく

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

i-school