Mediator パターンと抽象化によるポップアップ管理の実装例

　Mediator パターンと抽象化によるポップアップ管理の実装例です。
２回の手順に分けて実装を行います。

　複数のポップアップを１つのクラスで管理して新しいポップアップの表示・前のポップアップの非表示の制御の自動化を行います。

＜完成動画＞

Mediator(メディエーター) デザインパターン

　Mediator デザインパターンは、多数のオブジェクト間の調整や通信を中央に位置する Mediator(仲介者・調停者) クラスに委任する設計パターンです。
これにより、各オブジェクトが直接通信せず、中央の Mediator を介して相互にコミュニケーションすることが可能となります。

　今回の場合では、UI 内のポップアップの管理者(PopupManager)が主となり、異なるポップアップを制御し、調整することで、各ポップアップがお互いに直接通信するのではなく、
PopupManager（Mediator）を介して相互にコミュニケーションする形になります。これにより、各ポップアップは相互に疎結合になり、拡張や変更がしやすくなります。

複数のデザインパターンと抽象化によるクラス設計

　ポップアップ制御用の基底クラス PopupBase を作成し、派生クラスをサンプルとして３つ作成します。
基底クラスを作成して派生クラスで振る舞いを変えることにより、抽象化が行えます。

　その後、Mediator 用のポップアップ管理クラス PopupManager を作成します。
この PopupManager クラスで複数のポップアップの管理を行い、ポップアップの表示・非表示の制御を行います。

　最後にテスト用のクラスを作成して、複数のポップアップが正常に切り替わるかどうかをテストします。

　実際にはポップアップを制御したいクラスは色々なクラスに分散されます。
例えば、ゲーム開始時にポップアップを表示したい場合、ボタンに応じてポップアップを表示したい場合など、特定のクラスに限りません。
そのため、PopupManager はどのクラスからでもアクセスが可能である、シングルトンクラスとして用意しておくと、これらの挙動が実装しやすくなります。
これはシングルトンデザインパターンと呼ばれる実装パターンです。

　このように複数のデザインパターンの要素を取り入れた設計によるアプローチが有効です。

　DOTween、UniRx の各アセットを利用しています。

MicroSoft 公式ドキュメント
抽象化 (抽象型およびインターフェイス)

基底クラス　ーPopupBase クラスー

　ポップアップ制御用の基底クラスです。
ポップアップを管理するクラス自体を抽象化しておくことにより、抽象的な設計デザインが可能になります。

　Canvas コンポーネントがアタッチされているゲームオブジェクトにアタッチして利用する前提です。

　PopupBase クラスには abstract 修飾子はついていませんが、継承前提で作成するのであれば
abstract 修飾子をつけて抽象クラスとしても作成しても、機能上、問題ありません。

MicroSoft C# ドキュメント
abstract 修飾子

PopupBase.cs

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

using System;
using UnityEngine;
using UnityEngine.UI;
using DG.Tweening;
using UniRx;

public class PopupBase : MonoBehaviour
{
    [SerializeField] protected Button btnClose;

    [SerializeField] protected Canvas canvas;
    [SerializeField] protected CanvasGroup canvasGroup;

    [SerializeField] protected Ease ease;


    protected virtual void Reset() {
        if (TryGetComponent(out canvas)) {
            Debug.Log($"{canvas} 取得しました。");
        } else {
            Debug.Log($"{this} : Canvasが取得出来ません。");
        }
        
        if (TryGetComponent(out canvasGroup)) {
            Debug.Log($"{canvasGroup} 取得しました。");
        } else {
            Debug.Log($"{this} : CanvasGroupが取得出来ません。");
        }
    }

    /// <summary>
    /// 初期設定
    /// </summary>
    public virtual void SetUp() {
        //canvas.enabled = false;
        
        canvasGroup.alpha = 0;
        canvasGroup.blocksRaycasts = false;

        btnClose?.OnClickAsObservable()
            .ThrottleFirst(System.TimeSpan.FromSeconds(2))
            .Subscribe(_ => HidePopUp())
            .AddTo(this);
    }

    /// <summary>
    /// ポップアップの表示
    /// </summary>
    public virtual void ShowPopUp() {

        //canvas.enabled = true;
        
        canvasGroup.DOFade(1, 0.3f)
            .SetEase(ease)
            .OnComplete(() => canvasGroup.blocksRaycasts = true);
    }

    /// <summary>
    /// ポップアップの非表示
    /// </summary>
    public virtual void HidePopUp() {
        
        //canvas.enabled = false;
        
        canvasGroup.DOFade(0, 0.3f)
            .SetEase(ease)
            .OnComplete(() => canvasGroup.blocksRaycasts = false);
    }
}

　UI の場合、ゲームオブジェクトを SetActive で切り替えてしまうと、true になった際に再描画処理が走ります。

　Canvas を enabled で切り替えた場合には再描画処理は走りませんので、こちらの方が負荷のかからない表示切り替え処理になります。

　DOTween でアニメ付の表示制御する場合には、CanvasGroup を DOFade メソッドで表示制御しつつ、Blocks Raycast の切り替えを行うようにして対応します。

Unity 公式サイト
Unity UI の最適化に関するヒント

ポップアップ用のゲームオブジェクトの作成

　ポップアップ用のゲームオブジェクトを作成します。(作成済の場合にはこの手順はスキップします)

　ポップアップの切り替え制御を行う前提ですので、複数のポップアップ用のゲームオブジェクトを作成しておいてください。

　いずれも Canvas コンポーネント、CanvasGroup コンポーネントをアタッチしておいてください。
(新しい Canvas ゲームオブジェクトを作成して作っていくとつくりやすいです。)

　Canvas 内に子となる Canvas を作成する場合、Canvas Scaler コンポーネントは不要です。
また、タップなどの感知が不要な場合、Graphic Raycaster コンポーネントも不要です。

　ポップアップの状態に応じて、最適なコンポーネントをアタッチするように心がけていきましょう。

＜ヒエラルキー画像例＞

派生クラスの作成

　PopupBase を継承している派生クラス(子クラス)のサンプルを提示します。
作成したスクリプトは、各ポップアップ用のゲームオブジェクトにアタッチして利用します。

　なお、継承されている基底クラスはアタッチの必要はありません。
よって、今回の基底クラスである PopupBase は派生クラスに継承されているため、PopupBase をアタッチする必要はありません。

　通常作成するスクリプトも MonoBehaviour クラスが継承されていますが、各スクリプトをアタッチする際に MonoBehaviour クラスはアタッチしていません。
それと同じ理由です。

　ここでは３つだけ作成していますが、実際には、ゲーム内に登場するポップアップの数に応じて、派生クラスを作成していってください。

＜①StoreGoodsPop クラス＞

　お店用のポップアップです。

StoreGoodsPop.cs

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

using UnityEngine;
using UnityEngine.UI;
using UniRx;

public class StoreGoodsPop : PopupBase
{
    [SerializeField] private Button btnBuy;

    [SerializeField] private Text txtGoodsType;
    [SerializeField] private Text txtGoodsName;
    [SerializeField] private Text txtGoodsDescription;
    [SerializeField] private Text txtSpendDiamonds;


    /// <summary>
    /// 初期設定
    /// </summary>
    public override void SetUp()
    {
        base.SetUp();

        btnBuy?.OnClickAsObservable()
            .ThrottleFirst(System.TimeSpan.FromSeconds(2))
            .Subscribe(_ => BuyStoreGoods())
            .AddTo(this);
    }

    //TODO ダイヤが足りていない場合、btnBuyを非アクティブにする

    /// <summary>
    /// ストアの商品を買う
    /// </summary>
    private void BuyStoreGoods()
    {
        // ダイヤを消費

        // カードデッキに追加
    }
}

＜インスペクター画像＞

　スクリプトをアタッチすると Reset メソッドが実行されます。
そのため、Console ビューに Reset メソッド内の実行結果が表示されます。

＜Console 画像＞

　この時点で正常に必要となるコンポーネントが取得できているかを確認してください。

＜②CardDescriptionPop クラス＞

　カード詳細を表示するポップアップです。

CardDescriptionPop.cs

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

using UnityEngine;
using UnityEngine.UI;

public class CardDescriptionPop : PopupBase
{
    [SerializeField] private Image imgCard;

    [SerializeField] private Text txtCardType;
    [SerializeField] private Text txtCardLevel;
    [SerializeField] private Text txtCardName;
    [SerializeField] private Text txtCardDescription;


    //TODO ポップアップを開く処理は、カードのプレハブ側で行う。ここでは、Canvas下への生成と、ポップアップの設定だけ行う。

    //TODO ポップアップ生成時、カード側から作る個数とそのカードの情報を渡してもらう。

    private void GeneratePop()
    {

    }

    private void SetCardDetail()
    {

    }
}

＜インスペクター画像＞

＜③TitlePop クラス＞

　タイトル表示用のポップアップです。

TitlePop.cs

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

using UnityEngine;
using DG.Tweening;

public class TitlePop : PopupBase
{
    [SerializeField] private CanvasGroup tapPromptGroup;


    /// <summary>
    /// ポップアップの表示
    /// </summary>
    public override void ShowPopUp()
    {
        canvasGroup.DOFade(1, 0.3f)
            .SetEase(ease)
            .OnComplete(() =>
            {
                canvasGroup.blocksRaycasts = true;
                tapPromptGroup.DOFade(1, 0.5f).SetEase(ease).SetLoops(2, LoopType.Yoyo);
            });
    }
}

＜インスペクター画像＞

　すべての必要なコンポーネントが取得できている状態になっていることを確認してください。

＜Console 画像＞

シングルトンクラス用抽象クラス　ーAbstractSingleton クラスー

　シングルトンクラスを複数作成する予定がある場合、専用の基底クラスを作成しておき
それを継承して利用することで、自動的にシングルトンクラス化することが可能です。

　ここでは抽象クラスとして作成していますので、いずれかのクラスに継承する前提で作成しています。
そういった制限により、抽象クラス自体を直接ゲームオブジェクトにアタッチすることは出来ません。

AbstractSingleton.cs

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

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

/// <summary>
/// 派生クラスに対するシングルトンの基本機能を提供する抽象クラス
/// </summary>
/// <typeparam name="T">シングルトンのインスタンスの型</typeparam>
public abstract class AbstractSingleton<T> : MonoBehaviour where T : Component
{
    public static T instance;
    
    protected virtual void Awake()
    {
        if (instance == null)
        {
            instance = this as T;
            DontDestroyOnLoad(gameObject);
        }
        else
        {
            Destroy(gameObject);
        }
    }
}

　<T>(ジェネリック)型の型引数を設定しているため、継承する際に、シングルトンクラス化したいクラスを指定して利用します。

　型引数に where 句で Component を指定しているため、指定先は Unity の Component 型に制限しています。
Component 型はすべてのゲームオブジェクトにアタッチされるベースとなるクラスです。
よって、自作した任意のクラスや Unity のコンポーネント名を指定することが可能です。

　ジェネリックを利用した設計のため、このクラスを継承すれば、どのようなクラスでもシングルトンクラス化できます。

MicroSoft 公式ドキュメント
where (ジェネリック型制約) (C# リファレンス)

Unity 公式スクリプトリファレンス
Component

　以上でこの手順は終了です。

　引き続き、Mediator クラスの作成などを行い、完成させていきます。

　　=>　Mediator パターンと抽象化によるポップアップ管理の実装例②

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

印刷する

コメント（0）

Mediator パターンと抽象化によるポップアップ管理の実装例 - i-school 先頭へ

コメントをかく

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

i-school