【Unity ゲーム制作】神経衰弱ゲームを作ろう！〜その11 (スタートとリザルト画面を作成しよう！)

前回はEnum (列挙型 )を使って、ゲームのステート管理を実装しました。

今回は　「スタート」と「リザルト」のステート画面の作成を行いましょう！

1 . 「スタート」画面を作成する

まずがUnityのHierarchyにStart画面の作成を作成しましょう。

今回は、このような形のスタート画面を作成しました
(センスについては言わないで)

内容はTextとButtonを組み合わせた形式になっています。

次にスタート画面用のスクリプトを作成します。

「StartStateManager.cs」を作成しましょう。

スタート画面を作成しましたが、何かしらのアニメーションを追加したいと思います。

先ほど作成したGameStartText に拡大縮小アニメーションを追加しましょう。

2. StartStateManager.cs に拡大縮小アニメーションを追加する

StartStateManager.csに以下の処理を実装しましょう。

using System.Collections;
using System.Collections.Generic;
using DG.Tweening;
using UnityEngine;
using UnityEngine.UI;

public class StartStateManager : MonoBehaviour {

    // ゲームの開始テキストの座標
    public RectTransform GameStartTextRt;

    /// <summary>
    /// テキストの拡大アニメーション
    /// </summary>
    public void EnlarAnimation () {

        this.GameStartTextRt.DOScale (Vector3.one * 1.5f, 0.5f)
            .OnComplete (() => {
                // テキストの縮小アニメーション
                this.mShrinkAnimation ();
            });
    }

    /// <summary>
    /// テキストの縮小アニメーション
    /// </summary>
    private void mShrinkAnimation () {

        this.GameStartTextRt.DOScale (Vector3.one * 0.5f, 0.5f)
            .OnComplete (() => {
                // テキストの縮小アニメーション
                this.EnlarAnimation ();
            });
    }
}

これを作成したら「GameStateManager.cs」に StartStateManager の処理を追加しましょう

3. GameStateManager.cs に StartStateManagerの処理を追加する

まずは GameStateManager.cs にスタートステート時の処理を追加しましょう。

先ほど作った「StartArea」に「StartStateManager.cs」をアタッチします。

public class GameSceneManager : MonoBehaviour {

    // 一致したカードIDリスト
    private List<int> mContainCardIdList = new List<int> ();

    // カード生成マネージャクラス
    public CardCreateManager CardCreate;

    // 時間管理クラス
    public TimerManager timerManager;

    // スタートステートクラス
    public StartStateManager startStateManager;

    private void mSetStartState () {
        // テキストの拡大縮小アニメーション
        this.startStateManager.EnlarAnimation ();
    }

    /// <summary>
    /// Readyステートに遷移する
    /// </summary>
    public void OnGameStart () {
        // ゲームステートを初期化
        this.mEGameState = EGameState.READY;

        // ゲームのステート管理
        this.mSetGameState ();
    }

宣言した変数にStartAreaをアタッチしましょう。

次に、Start()関数の初期化処理も変更しましょう

    void Start () {

        // ゲームステートを初期化
        this.mEGameState = EGameState.START;

　　 // スタートエリアを表示
        this.startStateManager.gameObject.SetActive (false);

        // ゲームのステート管理
        this.mSetGameState ();
    }

そして、先ほど作った「GameStateText」のButtonのOnClick に「OnGameState」を追加しましょう。

ここまで出来たら、一度UnityのGameを起動してみましょう。

上記のような動作になったら成功です！

スタート画面は出来たので、次は「リザルト」画面を作成しましょう！

3. リザルトステート画面を作成しよう！

スタート画面と同様にリザルト画面も作成しましょう。

センスとは問わないで

そして、ResultStateManager を作成し変数などをアタッチします。

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

public class ResultStateManager : MonoBehaviour {

    // 時間を表示するテキスト
    public Text TimerText;

    /// <summary>
    /// ゲームで経過した時間を表示する
    /// </summary>
    public void SetTimerText (int timer) {
        this.TimerText.text = timer.ToString ();
    }
}

RsultStateManagerの準備が整ったら、GameStateManagerにリザルト処理を追加しましょう。

    /// <summary>
    /// ゲームステートで処理を変更する
    /// </summary>
    private void mSetGameState () {

        switch (this.mEGameState) {
            // スタート画面
            case EGameState.START:
                // スタートエリアを表示
                this.startStateManager.gameObject.SetActive (true);
                // ゲームスタートの開始
                this.mSetStartState ();
                break;
                // ゲーム準備期間
            case EGameState.READY:
                // ゲームの準備ステートを開始する
                this.mSetGameReady ();
                break;
                // ゲーム中
            case EGameState.GAME:
                break;
                // 結果画面
            case EGameState.RESULT:
                this.resultStateManager.gameObject.SetActive (true);
                this.mSetResultState ();
                break;
        }
    }
    /// <summary>
    /// リザルトステートの設定処理
    /// </summary>
    private void mSetResultState () {

        this.resultStateManager.SetTimerText ((int) this.mElapsedTime);
    }

    /// <summary>
    /// スタート画面に遷移する
    /// </summary>
    public void OnBackStartState () {

        // ResultAreaを非表示にする
        this.resultStateManager.gameObject.SetActive (false);

        // ゲームステートをStartに変更
        this.mEGameState = EGameState.START;

        // ゲームのステート管理
        this.mSetGameState ();
    }

そして、Update部分で「全てのカードを取得したらリザルトステートに遷移する」処理を実装します

void Update () {

        // GameState が GAME状態なら
        if (this.mEGameState == EGameState.GAME) {
            this.mElapsedTime += Time.deltaTime;

            this.timerManager.SetText ((int) this.mElapsedTime);

            // 選択したカードが２枚以上になったら
            if (GameStateController.Instance.SelectedCardIdList.Count >= 2) {

                // 最初に選択したCardIDを取得する
                int selectedId = GameStateController.Instance.SelectedCardIdList[0];

                // 2枚目にあったカードと一緒だったら
                if (selectedId == GameStateController.Instance.SelectedCardIdList[1]) {

                    Debug.Log ($"Contains! {selectedId}");
                    // 一致したカードIDを保存する
                    this.mContainCardIdList.Add (selectedId);
                }

                // カードの表示切り替えを行う
                this.CardCreate.HideCardList (this.mContainCardIdList);

                // 選択したカードリストを初期化する
                GameStateController.Instance.SelectedCardIdList.Clear ();
            }

            // 配置した全種類のカードを獲得したら
            if (this.mContainCardIdList.Count >= 6) {

                // ゲームをリザルトステートに遷移する
                this.mEGameState = EGameState.RESULT;
                this.mSetGameState ();
            }
        }

今回は 6 と直打ちしていますが、配布するカードの枚数を予め設定しておくのをオススメします！

また、ゲームを繰り返す処理を実装するため、CardCreateManager.csのCreateCard関数の最初に CardCreateParent の子オブジェクトを
削除する処理を実装しましょう。

    public void CreateCard () {

        foreach (Transform child in this.CardCreateParent) {
            Destroy (child.gameObject);
        }

最後に「OnBackStartState」をResutAreaに作成したButtonにアタッチしましょう。

これでリザルト画面の準備が整いました。

UnityのGameを起動してみましょう。

上記のように画面が切り替われば成功です！