UniRxのReactivePropertyを使ってUIの更新を楽に行う[Unity]

2024-03-28

ゲーム画面に多くのUIが必要なゲームで、そのパラメータを更新する作業は大変です。ここではUniRxのReactivePropertyを使うことでカンタンに更新することが可能になります。ここではチュートリアルとしてシンプルな更新方法をご紹介します。

ReactivePropertyを使ってカンタンにUIを更新する

ReactiveProperty(りあくてぃぶぷろぱてぃ)を使いながらUIの更新を行いますが、ファイル構成などが少しいつもと変わるかも知れません。事前知識を覚えてから臨みます。

知っておきたいこと、MV(R)Pパターン

ReactivePropertyを使う場合、MV(R)Pパターンというものに則って実装することが多いです。パターンについてはあまりお話しませんが、３つのクラスに役割を分担して実装を行います。例えとしてクッキーの枚数を管理するつもりになって例文を作成しています。

モデルクラス
- データを扱う
- クッキーの枚数を知っているのはモデルクラス
ビュークラス
- UIに表示を反映させる
- クッキーの枚数を知ることができれば、その枚数をUIに表示することができる
プレゼンタークラス
- モデルとビューをつなぐ役割
- クッキーモデルから枚数を教えてもらい、クッキービュークラスに表示をお願いする

他のたとえだと、財布の中の金額を紙に書き写す場合、お財布がモデル、紙がビュー、それを書き写すあなたがプレゼンター！

UniRxのインストール

Unityのプロジェクトで利用する場合、UniRxというアセットを追加する必要があります。こちらのアセットは無料です。まだ手に入れてない方はアセットストアから入手してください。

https://assetstore.unity.com/packages/tools/integration/unirx-reactive-extensions-for-unity-17276

実際にクッキーの枚数を表示するサンプルをつくる

UniRxのチュートリアルとして、ReactivePropertyを使ってカンタンなサンプルを作ってみましょう。

クッキーの枚数を表示するプログラム作成

前述した通り、ReactivePropertyを利用する場合はMV(R)Pというパターンに則り、３つのクラスを利用します。今回はそれぞれのスクリプトを準備して利用します。

CookieModel

クッキーの数はint型で表せるのでIntReactivePropertyを使ってCount変数を準備します。

using UnityEngine;
using UniRx;

public class CookieModel : MonoBehaviour
{
    public IntReactiveProperty Count = new IntReactiveProperty(0);

    private void Update()
    {
        if (Input.GetKeyDown(KeyCode.Space))
        {
            Count.Value++;
        }
    }

    private void OnDestroy()
    {
        Count.Dispose();
    }
}

クッキーの枚数はスペースキーでカウントアップします。

ReactivePropertyは使わなくなるタイミングでDisposeメソッドを呼んであげてください。

CookieView

UIは色々ありますが、今回はシンプルにTextMeshProUGUIに個数を表示します。

using UnityEngine;
using TMPro;

public class CookieView : MonoBehaviour
{
    public TextMeshProUGUI countText;
    public void SetCount(int count)
    {
        countText.text = count.ToString();
    }
}

CookiePresenter

先の２つのスクリプトはお互いが干渉しない構成になっています。Presenterでは２つのクラスを仲介する役割を担います。

using UnityEngine;
using UniRx;

public class CookiePresenter : MonoBehaviour
{
    public CookieModel cookieModel;
    public CookieView cookieView;

    private void Start()
    {
        cookieModel.Count.Subscribe(count => cookieView.SetCount(count));
    }
}

Subscribeメソッドではラムダ式で変化した数値を受け取ることが出来ます。

スライム

Subscribeしたタイミングでパラメータを受け取ることが出来るのも良い点ですね

テスト用シーンをセットアップ

スクリプトが準備できたら、実際にデモンストレーションしてみましょう。

テキストを追加する
- UI>Text – TextMeshProを追加
- 場所は画面中央に位置する（見やすければOK）
CookieViewコンポーネントを追加
- ゲームオブジェクトにCookieViewコンポーネントを追加
- 新規GameObjectでもいいし、テキストで作成されたものでもOK
- CountTextに作成したTextMeshProのオブジェクトをセット
CookieModelコンポーネントを追加
- 空のGameObjectを作成(名前変更：Cookie)
- CookieゲームオブジェクトにCookieModelをアタッチ
CookiePresenterコンポーネントを追加
- 新規にGameObjectを作ってもいいですが、CookieModelと同じゲームオブジェクトを使いまわしましょう
- インスペクターにセット。それぞれセットできるコンポーネントは１つずつなので、セットできるものをアタッチ
  - Cookie View
  - Cookie Model