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

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

手順１４　ーMVP パターンへのリファクタリングー

２０．MVP パターンへのリファクタリング

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

　・既存の処理をリファクタリングして MVP パターンに変更する

２０．MVP パターンへのリファクタリング

１．設計

　Grid ゲームオブジェクトの一連の動作のリファクタリングを行い、MVP パターンに変更していきます。

　いままでは実装していない部分の処理を MVP パターンにて設計して実装を行ってきましたが、
今回はすでに動作している Grid 関連の処理をリファクタリングし、MVP パターンに変更していきます。

Grid ゲームオブジェクトにアタッチされている Grid スクリプトの内容を View と Model の２つのクラスに分割します。

Model クラスには MainGame が管理を行います。

　View については Presenter クラスにて管理を行います。
なお、Button の機能については、View クラスに管理させる方法と Model クラスに管理させる方法とがあり、一概にどちらとは言えない部分になっています。
今回は View クラスにて管理していますが、他の記事では Model クラスにて管理している場合もあります。

Grid_View スクリプトを作成する

　いままでの View クラスと同じように UI 表示機能の制御処理のみを記述しています。

　処理の内容を見る前に、現在の Grid クラスを元に、自分で考えて書いてみてください。

Grid_View.cs

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

using UnityEngine;
using UnityEngine.UI;

public class Grid_View : MonoBehaviour
{
    [SerializeField]
    private Text txtGridOwnerSymbol;

    [SerializeField]
    private Button btnGrid;


    /// <summary>
    /// オーナーシンボル(○×)の表示更新
    /// </summary>
    /// <param name="ownerSymbol"></param>
    public void UpdateGridOwnerSymbol(string ownerSymbol) {
        txtGridOwnerSymbol.text = ownerSymbol;
    }

    /// <summary>
    /// ボタンの取得
    /// </summary>
    /// <returns></returns>
    public Button GetGridButton() {
        return btnGrid;
    }
}

Grid_Model スクリプトを作成する

　enum も ReactiveProperty として作成することができますので、GridOwnerType をReactiveProperty として宣言し、購読出来るようにします。

Grid_Model.cs

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

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

public class Grid_Model : MonoBehaviour
{
    public ReactiveProperty<GridOwnerType> CurrentGridOwnerType;

    private int gridNo;

    /// <summary>
    /// プロパティ
    /// </summary>
    public int GridNo { get => gridNo; set => gridNo = value; }

    /// <summary>
    /// 初期設定
    /// </summary>
    /// <param name="no"></param>
    public void SetUpGridModel(int no) {
        gridNo = no;
    }
}

Grid ゲームオブジェクトを複製して、Grid_Model ゲームオブジェクトを作成し、設定を行う

　Prefabs フォルダにある Grid ゲームオブジェクトを ctrl + D ボタンで複製します。
名称を Grid_Model に変更してください。

　先ほど作成した View と Model のスクリプトをアタッチし、アサインの設定を行ってください。

フォルダ画像

ゲームオブジェクトの構造

インスペクター画像

MainGame スクリプトを修正する

　Grid_Model クラスを管理するため、新しい変数の宣言を追加します。
生成を行う際のクラスも変更になるため、プレファブ用に新しい変数の宣言も追加します。

　InitialSettings メソッドと OnClickGrid メソッドと PutOpponentGrid メソッドの処理を
新しく作成したクラスを利用する形に修正します。

　Restart メソッドを作成し、リスタートする際の処理を追加します。　

MainGame_Model.cs

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

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

public class MainGame : MonoBehaviour {

    [SerializeField]
    private Transform gridSetTran;


////*　新しい変数の宣言を２つ追加し、以前の変数をコメントアウトする　*////


    //[SerializeField]
    //private GridController gridPrefab;    // 使いません

    //[SerializeField]
    //private GridController[] grids;       // 使いません


    [SerializeField]
    private Grid_Model gridModelPrefab;

    public List<Grid_Model> gridModelList = new List<Grid_Model>();


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


    [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 Grid_View[] InitialSettings() {    // <=  戻り値の型を void => Grid_View[] に変更します

        //grids = new GridController[9];    // 使いません


        List<Grid_View> gridViewList = new List<Grid_View>();　　// 追加します


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

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


            Grid_Model gridModel = Instantiate(gridModelPrefab, gridSetTran, false);　　// 追加します
            gridModel.SetUpGridModel(i);　　　　　　　　　　　　　　　　　　　　　　　　// 追加します
            gridModelList.Add(gridModel);　　　　　　　　　　　　　　　　　　　　　　　 // 追加します
            gridViewList.Add(gridModel.GetComponent<Grid_View>());　　　　　　　　　　　// 追加します
        }

        return gridViewList.ToArray();　　　// 追加します


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


    }

    /// <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) {   // 条件式を変更するので使いません


        if (gridModelList[no].CurrentGridOwnerType.Value == GridOwnerType.None) {   // 追加します

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

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

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


            gridModelList[no].CurrentGridOwnerType.Value = GridOwnerType.Player;　　　//　追加します



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


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

            // 敵の順番
            PutOpponentGrid();

        } else {

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

　　　　　　// 印が配置できない 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;　// 使いません



            int randomPieceIndex = Random.Range(0, gridModelList.Count);  // 追加します

            if (gridModelList[randomPieceIndex].CurrentGridOwnerType.Value == GridOwnerType.None) {   // 追加します

                // Grid_Model の ReactiveProperty の値を更新
                gridModelList[randomPieceIndex].CurrentGridOwnerType.Value = GridOwnerType.Opponent;  // 追加します


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


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

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

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

        putCount = 0;
    }


////*  新しいメソッドを１つ追加  *////


    /// <summary>
    /// 次のゲームを再開する準備
    /// </summary>
    public void Restart() {

        for (int i = 0; i < gridModelList.Count; i++) {
            gridModelList[i].CurrentGridOwnerType.Value = GridOwnerType.None;
        }

        // ゲームに利用する情報の初期化
        ResetGameParameters();
    }


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


}

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

　新しい変数に必要な情報をアサインしておきましょう。
どの変数にどのような情報が必要になるのか、プログラムを読み解いて自分で考えてアサインしてみてください。

インスペクター画像

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

Presenter スクリプトを修正する

　Start メソッド内の TODO 部分を２か所実装します。

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;

    [SerializeField]
    private Button btnRestart;


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


    [SerializeField]
    private Grid_View[] gridViews;


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


    void Start()
    {

////*　☆①～②の TODO の実装と引数の修正　*////


        // ゲームの初期設定を行う。Grid_View の情報を配列で受け取る
        gridViews = mainGame.InitialSettings();    // ☆①　戻り値になっているメソッドから配列を受け取るように修正します


        // リスタートボタンの設定
        btnRestart.OnClickAsObservable()
            .ThrottleFirst(TimeSpan.FromSeconds(1.0f))
            .Subscribe(_ => mainGame.Restart()).AddTo(gameObject);  // ☆②　Subscribe の引数を変更します


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


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


        // ゲーム終了状態の監視
        mainGame.IsGameUp.Subscribe(x => {
            // リスタート用のボタンを押せる状態にする
            btnRestart.interactable = x;           

            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 の実装　*////


　　　　// 購読
        for (int i =0; i < mainGame.gridModelList.Count; i++) {
            int index = i;

            // 各 Grid ボタンの購読を行い、クリック(タップ)入力を受付
            gridViews[index].GetGridButton().OnClickAsObservable()
                .ThrottleFirst(TimeSpan.FromSeconds(1.0f))
                .Select(_ => mainGame.gridModelList[index].GridNo)　　// Subscribe の引数用にストリームの情報を gridNo に置き換える 
                .Subscribe(x => mainGame.OnClickGrid(x))              // x は gridNo
                .AddTo(this);

            // 各 Grid_Model のオーナー情報を購読し、更新された際には画面表示を更新する
            mainGame.gridModelList[index].CurrentGridOwnerType
                .Subscribe(x => gridViews[index].UpdateGridOwnerSymbol(x == GridOwnerType.Player ? "〇" : x == GridOwnerType.Opponent ? "×" : string.Empty))
                .AddTo(this);
        }


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


    }

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

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

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

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

インスペクター画像

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

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

　ゲームの処理の流れを把握した上で、ゲームを実行して動作の確認を行いましょう。
今回はリファクタリングを行っていますので、いままでと同じようにゲームが動作していることを確認してください。

　おつかれさまでした！

　以上でこのゲームの制作は完成になります。
今後も処理の改良や、機能の追加、他のゲームへの応用を考えて、処理の理解を深めていってください！

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

印刷する

コメント（0）

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

コメントをかく

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

i-school