２Ｄまるばつゲーム(三目並べ)　手順１２

　以下の内容で順番に実装を進めていきます。

手順１２　ーMVP パターンによるインフォ表示の実装ー

１８．MVP パターンの学習②

　新しい学習内容は、以下の通りです。

　・UniRx の ReactiveProperty の活用②

１８．MVP パターンの学習②

１．設計

　前回学習し実装を行った MVP パターンを利用して、この手順においてはインフォ情報についても同じように制御を行います。
ここでいうインフォ情報とは、配置できないマス目をクリックした際に警告メッセージを表示させる機能です。
他にも、ゲームの進行上、ゲーム画面に表示した方がいい情報があれば、この部分で管理を行います。

　新しく View 用クラスの Info_View クラスを作成し、インフォ情報の画面表示の更新を行います。

　また、新しく Model 用の Info_Model クラスを作成し、値の管理を行います。
インフォ情報の値は ReactiveProperty で作成し、購読可能な情報として定義しておきます。

　前回作成した MainGame_Model クラスを修正し、適宜なタイミングで Info_Model クラスに対して値の更新を命令します。

　同じように前回作成した Presenter クラスを修正し、Info_Model クラスにある ReactiveProperty で定義したインフォ情報の値を購読(監視)し、
値の更新に合わせて、Info_View クラスに自動的に命令を出し、画面の表示を更新します。

　処理の流れをイメージしながら、実装に挑戦してみてください。

Info_View スクリプトを作成する

　Text コンポーネントを管理し、ゲーム画面のインフォ情報の表示更新を行うクラスです。

　UpdateDispayInfo メソッドを Info_Model クラスにある ReactiveProperty の購読部分と紐づけることにより、
ReactiveProperty の更新に合わせて、自動的にゲーム画面のインフォ情報の表示更新を行うようにしています。

Info_View.cs

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

using UnityEngine;
using UnityEngine.UI;

public class Info_View : MonoBehaviour
{
    [SerializeField]
    private Text txtInfo;

    /// <summary>
    /// インフォ表示の更新
    /// </summary>
    /// <param name="message"></param>
    public void UpdateDispayInfo(string message) {
        txtInfo.text = message;
    } 
}

Info_Model スクリプトを作成する

　ReactiveProperty を使い、画面に表示するメッセージの値を管理します。

　ReactiveProperty の値の更新は MainGame_Model クラス内の適宜なタイミングで行います。

　ReactiveProperty の購読は Presenter クラスで行います。

Info_Model.cs

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

using UnityEngine;
using UniRx;

public class Info_Model : MonoBehaviour
{
    public ReactiveProperty<string> InfoMessage = new ReactiveProperty<string>();


    /// <summary>
    /// 値の更新
    /// </summary>
    /// <param name="message"></param>
    public void UpdateInfoMessage(string message) {
        InfoMessage.Value = message;
    }
}

MainGame を修正する

　Model クラスである Info_Model クラスを管理するため、新しい変数の宣言を追加します。

　また、OnClickGrid メソッド内の TODO 部分を実装することで、適宜なタイミングでメッセージ用の ReactiveProperty の値に更新の命令をします。

MainGame.cs

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

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

public class MainGame_Model : MonoBehaviour {

    [SerializeField]
    private Transform gridSetTran;

    [SerializeField]
    private GridController gridPrefab;

    [SerializeField]
    private GridController[] grids;


////*　新しい変数の宣言を１つ追加　*////


    [SerializeField]
    private Info_Model infoModel;


////*　ここまで　*////


    private int putCount;
    private int gridCount = 9;

    public GridOwnerType winner;

    public ReactiveProperty<bool> IsGameUp = new ReactiveProperty<bool>();


    /// <summary>
    /// ゲームの初期設定
    /// </summary>
    public void InitialSettings() {

        grids = new GridController[9];

        // Grid の生成
        for (int i = 0; i < gridCount; i++) {

　　　　　　// Grid の生成
            grids[i] = Instantiate(gridPrefab, gridSetTran, false);　　
         
            // Grid の初期設定
            grids[i].SetUpGrid(i, this);
        }

　　　　// TODO 他にも初期設定の項目がある場合には追加する

    }

    /// <summary>
    /// Player が Grid をクリックした際の処理
    /// </summary>
    public void OnClickGrid(int no) {
        
        Debug.Log($"クリック実行 : Grid の通し番号 : { no }");

        if (IsGameUp.Value) {
            return;
        }

　　　　// オーナーシンボル(プレイヤーは○印)が置けるか確認
　　　　// 引数で届いている no 変数を配列の要素番号として利用し、クリックした Grid のオーナーシンボルの情報が None であるか判定する
        if (grids[no].CurrentGridOwnerType == GridOwnerType.None) {

　　　　　　// 配置した数をカウント
            putCount++;


////*　TODO の実装　*////


            // 画面のインフォ表示(配置できないメッセージ)をリセット
            infoModel.UpdateInfoMessage(string.Empty);


////*　ここまで　*////


            // クリックした Grid に○をセット
            SetOwnerTypeOnGrid(grids[no], GridOwnerType.Player);


            // 配置した数の判定。全 Grid が埋まる回数おいたら、勝負付かず引き分け
            if (putCount >= 5 && !IsGameUp.Value) {
                GameUp(GridOwnerType.Draw);
                return;
            }

            // 敵の順番
            PutOpponentGrid();

        } else {

　　　　　　Debug.Log("そこには配置出来ません。");


////*　TODO の実装　*////


　　　　　　// 印が配置できない Grid なので、配置できないメッセージをゲーム画面に表示する
            infoModel.UpdateInfoMessage("そこには配置出来ません。");


////*　ここまで　*////


        }
    }

    /// <summary>
    /// Grid にオーナーシンボル(○×)をセット
    /// </summary>
    /// <param name="targetGrid"></param>
    /// <param name="setOwnerType"></param>
    private void SetOwnerTypeOnGrid(GridController targetGrid, GridOwnerType setOwnerType) {

        targetGrid.UpdateGridData(setOwnerType, setOwnerType == GridOwnerType.Player ? "〇" : "×");

        // 勝敗結果を判定(メソッドを実行するタイミングが重要)
　　　　JudgeWinner();
    }

    /// <summary>
    /// 勝者がいるか判定
    /// </summary>
    private void JudgeWinner() {

　　　　// 勝者はなしの状態で初期値を作成し、勝者がいる場合には、この変数を上書きする
        GridOwnerType winner = GridOwnerType.None;

        // 横列確認
        for (int i = 0; i < 2; i++) {

            int gridOwnerTypeNo = i + 1;

            // 0,1,2 || 3,4,5 || 6,7,8
            for (int x = 0; x < 3; x++) {
                if (gridModelList[x * 3].CurrentGridOwnerType.Value == (GridOwnerType)gridOwnerTypeNo
                && gridModelList[x * 3 + 1].CurrentGridOwnerType.Value == (GridOwnerType)gridOwnerTypeNo
                && gridModelList[x * 3 + 2].CurrentGridOwnerType.Value == (GridOwnerType)gridOwnerTypeNo) {

                    winner = (GridOwnerType)gridOwnerTypeNo;
                    break;
                }
            }

            // 勝者が確定している場合
            if (winner != GridOwnerType.None) {
                // 結果発表
                GameUp(winner);
                return;
            }
        }

        // 縦列確認
        for (int i = 0; i < 2; i++) {

            int gridOwnerTypeNo = i + 1;

            // 0,3,6 || 1,4,7 || 2,5,8
            for (int x = 0; x < 3; x++) {
                if (gridModelList[x].CurrentGridOwnerType.Value == (GridOwnerType)gridOwnerTypeNo
                && gridModelList[x + 3].CurrentGridOwnerType.Value == (GridOwnerType)gridOwnerTypeNo
                && gridModelList[x + 6].CurrentGridOwnerType.Value == (GridOwnerType)gridOwnerTypeNo) {

                    winner = (GridOwnerType)gridOwnerTypeNo;
                    break;
                }
            }

            // 勝者が確定している場合
            if (winner != GridOwnerType.None) {
                // 結果発表
                GameUp(winner);
                return;
            }
        }

        // 斜め列確認
        for (int i = 0; i < 2; i++) {

            int gridOwnerTypeNo = i + 1;

            // 2, 4, 6 ||  0, 4, 8
            for (int x = -1; x < 1; x++) {
                if (gridModelList[0 - x * 2].CurrentGridOwnerType.Value == (GridOwnerType)gridOwnerTypeNo
                && gridModelList[4].CurrentGridOwnerType.Value == (GridOwnerType)gridOwnerTypeNo
                && gridModelList[8 + x * 2].CurrentGridOwnerType.Value == (GridOwnerType)gridOwnerTypeNo) {

                    winner = (GridOwnerType)gridOwnerTypeNo;
                    break;
                }
            }

            // 勝者が確定している場合
            if (winner != GridOwnerType.None) {
                // 結果発表
                GameUp(winner);
                return;
            }
        }
    }

    /// <summary>
    /// ゲーム終了
    /// </summary>
    /// <param name="winner"></param>
    private void GameUp(GridOwnerType winner) {

        this.winner = winner;
        IsGameUp.Value = true;
    }

    /// <summary>
    /// 敵の順番(×が置けるか確認してから置く)
    /// </summary>
    private void PutOpponentGrid() {

        // ReactiveProperty の値を監視
        while (!IsGameUp.Value) {

            // ランダムな Grid の番号を選択
            int randomPieceIndex = Random.Range(0, grids.Length);

            // その Grid にオーナーシンボルがなければ×を設置
            if (grids[randomPieceIndex].CurrentGridOwnerType == GridOwnerType.None) {

                // Grid のオーナーの値を更新
                grids[randomPieceIndex].CurrentGridOwnerType = GridOwnerType.Opponent;

                // 結果を判定
                JudgeWinner();
                break;
            }
        }
    }

    /// <summary>
    /// ゲームに利用する情報の初期化
    /// </summary>
    public void ResetGameParameters() {

        winner = GridOwnerType.None;
        IsGameUp.Value = false;

        putCount = 0;
    }
}

Presenter スクリプトを修正する

Model と View の仲介役となる Presenter を修正します。

双方の情報を管理しているのはこの Presenter のみとなりますので、
Model 側は View を知りませんし、View 側も Model を知りません。

　このように設計することで、クラス間の状態を疎結合に保つことが出来ます。

　前回と同じように View クラスと Model クラス用の変数の宣言を追加し、
Model クラスにある ReactiveProperty の購読命令を記述します。
その命令内で、View クラスにある画面表示更新用のメソッドを実行するようにセットしておきます。

Presenter.cs

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

using UnityEngine;
using UnityEngine.UI;
using UniRx;
using System;

public class Presenter : MonoBehaviour
{
    [SerializeField]
    private MainGame mainGame;

    [SerializeField]
    private Result_View[] resultViews;

    [SerializeField]
    private Result_Model[] resultModels;


////*　新しい変数の宣言を２つ追加　*////


    [SerializeField]
    private Info_View infoView;

    [SerializeField]
    private Info_Model infoMode;


////*　ここまで　*////


    void Start()
    {
        // TODO ゲームの初期設定を行う。後程修正し、Grid_View の情報を配列で受け取る
　　　　mainGame.InitialSettings();


        // TODO リスタートボタンの設定


////*　TODO の実装　*////


        // InfoView の設定　Info_Model 内の ReactiveProperty である InfoMessage の購読を行い、値が更新された際の処理の設定を行う
        infoMode.InfoMessage.Subscribe(x => infoView.UpdateDispayInfo(x)).AddTo(gameObject);


////*　ここまで　*////


        // ゲーム終了状態の監視
        mainGame.IsGameUp.Subscribe(x => {

            // TODO リスタート用のボタンを押せる状態にする
            
            PrepareResult(mainGame.winner);
        }).AddTo(gameObject);

        // ResultView と ResultModel の設定
        SetUpResult();


        /// <summary>
        /// ResultView と ResultModel の設定するローカル関数
        /// </summary>
        void SetUpResult() {

            // Model => View
            // Result_Model の RectiveDictionary を購読して、Result_View を更新
            for (int i = 0; i < resultViews.Length; i++) {

                // Subscribe の値が Length に固定されてしまい、登録は成功するが、更新時に失敗するので、1回値を受ける
                int a = i;

                // Result_Model の RectiveProperty を購読し、加算結果に合わせて画面を更新
                resultModels[a].WinCount.Subscribe(x => resultViews[a].UpdateDisplayWincount(x)).AddTo(gameObject);

　　　　　　　　// GridOwnerType の設定と勝利数の初期化
                resultModels[a].SetUpResultModel((GridOwnerType)a + 1);

                Debug.Log("勝利数 購読開始 : " + resultModels[a].CurrentGridOwnerType.ToString());


                // Result_Model の RectiveProperty を購読し、勝敗結果に合わせて画面を更新
                resultModels[a].ResultMessage.Subscribe(x => resultViews[a].UpdateDisplayResultGame(x)).AddTo(gameObject);

　　　　　　　　// 勝敗表示の初期化
                resultModels[a].InitResultMessage();

                Debug.Log("勝敗結果 購読開始 : " + resultModels[a].CurrentGridOwnerType.ToString());
            }
        }

        // 勝利数の初期化、ゲーム情報の初期化
        mainGame.ResetGameParameters();

　　　　// TODO Grid の購読を行う

    }

    /// <summary>
    /// リザルトの準備
    /// </summary>
    /// <param name="winner"></param>
    public void PrepareResult(GridOwnerType winner) {

        // 結果表示
        for (int i = 0; i < resultModels.Length; i++) {
            resultModels[i].ShowResult(winner);
        }
    }
}

Info_View ゲームオブジェクトに Info_View スクリプトをアタッチし、設定を行う

　Canvas 内にある Info_View 用のゲームオブジェクトに Info_View スクリプトをアタッチし、設定を行います。

ヒエラルキー画像

Info_View ゲームオブジェクト

　以上で設定は完了です。

Model のゲームオブジェクトを作成する

　各クラスの役割をわかりやすく管理するため、今回は既存のゲームオブジェクトにアタッチする形ではなく、
各 Model や Presenter ごとにゲームオブジェクトを作成して、それぞれのクラスをアタッチしています。
　この法則に則り、今回も Info_Model 用のゲームオブジェクトを作成し、Info_Model スクリプトをアタッチします。

ヒエラルキー画像

Info_Model ゲームオブジェクト

　以上で設定は完了です。

MainGame_Model ゲームオブジェクトの設定を行う

　新しく追加した変数に情報をアサインします。

インスペクター画像

Presenter ゲームオブジェクトの設定を行う

　新しく追加した変数に情報をアサインします。

インスペクター画像

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

　設計自体が変わり、処理の記述は MVP パターンになりましたが、あくまでもリファクタリングになりますので、ゲームの内容自体は変わりません。
よって、今までと同じようにゲームが遊べるようになっているかを確認してください。

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

　次は　手順１３　－MVP パターンによるボタンの実装－　です。

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

印刷する

コメント（0）

２Ｄまるばつゲーム(三目並べ)　手順１２ - i-school 先頭へ

コメントをかく

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

i-school