PhantomRose　スクリプト⑤

　MVP パターンを採用して、ゲーム内の UI 制御を行います。

　今回はプレイヤーの Hp と対戦相手の Hp について制御します。
これ以外の部分についても UI であれば MVP パターンを活用可能ですので
学習後には自分で設計を考えて実装にチャレンジしてみてください。

MVP パターン

　これは UniRx の ReactiveProperty を利用した、オブザーバーデザインパターンを利用して作成しているパターンです。

　　=>　ReactiveProperty を活用した MVP パターンによる実装例

　他にも MVP パターンについては記事がたくさんありますので、そちらもご確認ください。
Unity の場合には MV(R)P パターンと紹介されることもあり、他の言語では MVC パターンとして紹介されていることもあります。

　主に UI 周りを制御することに適したパターンになっています。

View クラスの作成

BatttleUIView.cs

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

using UnityEngine;
using UnityEngine.UI;
using DG.Tweening;

public class BatttleUIView : MonoBehaviour
{
    [SerializeField] private Text txtUserHp;
    [SerializeField] private Text txtOpponentHp;
    
	[SerializeField] private Slider playerSlider;    // Slider も使う場合
    [SerializeField] private Slider opponentSlider;
    
    [SerializeField] private float duration = 0.5f; // アニメーションのデフォルトの持続時間
    [SerializeField] private Ease animationEase = Ease.InQuart; // アニメーションのデフォルトのイージング


    /// <summary>
    /// プレイヤーのHp設定
    /// </summary>
    /// <param name="maxHp"></param>
    public void SetupPlayerHp(int maxHp) {
        playerSlider.value = maxHp;
        UpdateUserUp(maxHp, maxHp);   // 第1引数を 0 にすると、0 → MaxHp へのアニメが出来る
    }
    
    /// <summary>
    /// 対戦相手のHp設定
    /// </summary>
    /// <param name="maxHp"></param>
    public void SetupOpponentHp(int maxHp) {
        opponentSlider.value = maxHp;
        UpdateOpponentUp(maxHp, maxHp);   // 第1引数を 0 にすると、0 → MaxHp へのアニメが出来る
    }
	
    /// <summary>
    /// DOTween の DoCounter メソッドを使用してユーザーの HP 用 UI を更新
	/// Slider の値も DOTween を使用して更新
    /// </summary>
    /// <param name="prevHp">前回の HP 値</param>
    /// <param name="currentHp">現在の HP 値</param>
    public void UpdatePlayerUp(int prevHp, int currentHp) {
        txtUserHp.DOCounter(prevHp, currentHp, 0.5f).SetEase(Ease.InQuart);
		playerSlider.DOValue(currentHp, duration).SetEase(animationEase);
    }
    
    /// <summary>
    /// DOTween の DoCounter メソッドを使用して対戦相手の HP 用 UI を更新
	/// Slider の値も DOTween を使用して更新
    /// </summary>
    /// <param name="prevHp">前回の HP 値</param>
    /// <param name="currentHp">現在の HP 値</param>
    public void UpdateOpponentUp(int prevHp, int currentHp) {
        txtOpponentHp.DOCounter(prevHp, currentHp, 0.5f).SetEase(Ease.InQuart);
		opponentSlider.DOValue(currentHp, duration).SetEase(animationEase);
    }
}

こちらは View に分類される、画面の表示と更新を行うためのクラスです。
まず、ゲーム画面にプレイヤー用と対戦相手用の UI を用意します。
Text があれば HP の現在値を更新できます。Slider も用意することで、ゲージも更新できます。
Hp の最大値はここでは制御していませんので、必要に応じて、別途 Text を用意するか、１つの Text 内に表示してください。
その後、いずれかのゲームオブジェクトに View クラスをアタッチし、Text などをアサインして利用します。
処理の内容としては、事前に ReactiveProperty で作成する Hp の情報とメソッドを紐づけしておくことで、
Hp の値が変動するたびに自動的に画面の Hp の値を更新させる仕組みです。Slider も同様です。
プレイヤーについては最初に1回セットすれば、同じ Hp を購読(監視)するので問題ありませんが、
対戦相手の場合は、Hp の値をセットし直す必要があります。
値の更新方法としては、DOTween を利用しています。
DOCounter で Hp 値を更新しています。
DOValue で Slider のゲージを更新しています。
DOValue の引数や Ease については変数を用意しました。DOCounter も共用化して変数にしてもよいですし、
別途、DOCounter 用に新しいメンバ変数を用意してもいいと思います。
ソースコード内では基本的にはリテラル表記(直接数字や、文字列を書くこと)は避けて、なるべく、変数で書いておくようにしましょう。

Presenter クラスの作成

　Presenter 役のクラスです。
今回 Model 役は GameData になりますので、それをそのまま利用します。

BatttleUIPresenter.cs

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

using System;
using UniRx;
using UnityEngine;
    
public class BatttleUIPresenter : MonoBehaviour 
{
    [SerializeField] private BatttleUIView batttleUIView;
    private IDisposable subscription;

    /// <summary>
    /// プレイヤーの HP 用 UI を MVP パターンで設定
    /// </summary>
    /// <param name="player">プレイヤー</param>
    public void SubscribePlayerHp() {
	
        batttleUIView.SetupPlayerHp(GameData.instance.GetPlayer().GetHp);

        // プレイヤーのHpの購読処理(ここで1回だけ実行し、AddTo しておくことで、このゲームオブジェクトの破棄に合わせて処理を止める)
        GameData.instance.GetPlayer().Hp
            // Zip オペレータと Skip オペレータを組み合わせて、DOTween の DoCounter メソッドに必要な値を用意しています。
            // Zip オペレータは2つの Observable シーケンスを組み合わせ、Skip オペレータはシーケンスの最初の値を無視します。
            // この組み合わせにより、前回の HP 値（prevValue）と現在の HP 値（currentValue）を提供し、
            // DOTween の DoCounter メソッドでアニメーションするための値を生成しています。
            .Zip(GameData.instance.GetPlayer().Hp.Skip(1), (prevValue, currentValue) => (prevValue, currentValue))
            .Subscribe(values => batttleUIView.UpdateUserUp(values.prevValue, values.currentValue))
            .AddTo(this);
    }

    /// <summary>
    /// 対戦相手の HP 用 UI を MVP パターンで設定
    /// </summary>
    /// <param name="opponent">対戦相手</param>
    public void SubscribeOpponentHp() {
            
        batttleUIView.SetupOpponentHp(GameData.instance.GetOpponent().GetHp);
			
        // 対戦相手のHp の購読処理(対戦相手が変わるたびに購読するので、AddTo ではなく、対戦相手がいなくなるたびに毎回購読を止める必要がある)
        subscription = GameData.instance.GetOpponent().Hp
            .Zip(GameData.instance.GetOpponent().Hp.Skip(1), (prevValue, currentValue) => (prevValue, currentValue))
            .Subscribe(values => batttleUIView.UpdateOpponentUp(values.prevValue, values.currentValue));
    }

    /// <summary>
    /// バトル終了時に紐づけする予定
    /// </summary>
    public void EndBattle() {
            
        // subscription が null でない場合にのみ Dispose して、対戦相手の HP の購読を停止
        // ここで購読停止しておかないと、次の対戦相手の Hp の購読が重複して発生してしまう
        // UniRx の処理は AddTo しない限りはゲームオブジェクトの生存期間と一致していない(紐づいていない)ので
        // しかるべきタイミングで購読処理を Dispose して停止する必要がある(AddTo していれば自動で停止する)
        subscription?.Dispose();
            
        // 処理自体は変数内に残っているので、null にすることで残っている処理も削除する
        subscription = null;
    }
}

SubscribePlayerHp は、プレイヤーの Hp の UI への初期設定と購読処理です。
Hp を購読して、それを View に用意している UpdatePlayerUp メソッドと紐づけています。
そのため、引数には GameData にある、プレイヤー用の Character クラスをもらってください。
この SubscribePlayerHp メソッドは、プレイヤーの Hp をGameData 内の ReactiveProperty に設定した後であれば
どこのタイミングで呼び出しても問題ありません。そうすれば、バトル以外の場所でも Hp の増減に合わせて UI 表示が更新されるようになります。

＜処理の解説＞

１．GameData で Character クラス生成後、そのクラス内にある ReactiveProperty の Hp にHp の値を設定する。
２．【１】終了後、どこかのタイミングで、Presenter の SubscribePlayerHp メソッドを実行する。
　　Presenter もいずれかのゲームオブジェクトにアタッチする必要があります。
　　Create Empty で作成したものや、BattleEventManager などのゲームオブジェクトにアタッチして利用してもいいと思います。
　　あとは実行したいクラスにメンバ変数として持たせるなどして、メソッドが実行できる状態を作ってください。
３．バトル開始のタイミングで、GameData の Opponent 変数内にある ReactiveProperty の Hp に、敵のHp の値を設定する。
　その後、SubscribeOpponentHp を実行する。これで、敵側の Hp に合わせて画面の UI 表示が更新されるようになる。
４．バトル終了時に EndBattle メソッドを実行して、対戦相手の Hp の購読を終了する
　このような設計で動いています。１と２はプレイヤー側の処理なので、1回ずつ行えばあとは不要です。
３と４については、バトルのたびに実行するように考えて、呼び出すタイミングの部分に実行命令を書いてみてください。

M => Model = GameData
V => View = BattleUIView
P => Presenter = BattleUIPresenter

今回の MVP パターンに利用しているクラスです。
通常は Presenter がメンバ変数として Model も管理するのですが、
今回の Model は GameData で、これがシングルトンクラスのため、メンバ変数として管理していません。(どのクラスからでも触れるので)

＜参考＞

　UniRx の購読停止と再購読の実装例

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

印刷する

コメント（0）

PhantomRose　スクリプト⑤ - i-school 先頭へ

コメントをかく

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

i-school