おはじきゲーム　手順２１

　先ほどの手順でゲームのサイクルが完成しました。その中においてクリアの状態(GameStateがResultのとき)を実装できましたので、
ゲームクリアになった際にはゲーム画面にクリアと表示して、ゲームの状態がユーザーに伝わるようにします。

完成動画
https://gyazo.com/478ce79c7473fb5122460271021fc70a

　また次の手順ではゲームオーバーの状態を追加して、ゲームオーバーの際にもゲーム画面にゲームオーバー表示をするように、順番に実装していきます。

　これらを表示するためには、同じ部分の共通UI部品を利用して、その表示内容を場面にあった内容に動的に変更するようにします。
イメージとしては掲示板が１つあり、クリア時にはクリアと書き、ゲームオーバー時にはゲームオーバーと書いて、それを画面に見せる、という感じです。
つまり１つのTextコンポーネントのTextを、ゲームの状態に見合った情報に書き換えて使う設計になります。

　ここでは共通で利用する掲示板用のUIの作成と、それを利用してゲームクリア時にクリアの表示を画面に表示する機能を実装していきます。

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

手順２１　－ステージクリア表示を実装－

４４．Canvas内にUI部品を作成する⑤　ゲームの状態を表示するStageInfoゲームオブジェクトを追加する
４５．UIManagerスクリプトを修正する
４６．BattleManagerスクリプトを修正する

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

・処理の内容を見て自分でコメントを書いてみる
　・Circle Outline アセット

４４．Canvas内にUI部品を作成する⑤　ゲームの状態を表示するStageInfoゲームオブジェクトを追加する

設計

　Canvas内に作成してあるTop_UI ゲームオブジェクトの子オブジェクトとして、ゲームのステージ情報の表示を行うためのゲームオブジェクトを追加していきます。

　用意するのは、フォルダ用のゲームオブジェクトと、その子オブジェクトにスコア表示用のText、Imageコンポーネントを持つゲームオブジェクトです。
このコンポーネントを UIManagerスクリプトを修正して操作出来るようにし、ステージクリアの状態と同期させて情報を表示します。

　順番に作成していきます。

Canvasの子オブジェクトとして StageInfoPlace ゲームオブジェクトを作成する

　ヒエラルキーの Canvas ゲームオブジェクトの上で右クリックをしてメニューを表示し、Create Empty を選択します。
名前を StageInfoPlace に変更します。このゲームオブジェクトはこれから作成するステージ情報表示用のゲームオブジェクトのフォルダとしての役割を持ちます。
作成後、ヒエラルキーを確認して、Canvas内での位置を確認してください。
下記の画像のような親子関係になっていれば大丈夫です。なっていない場合には再度作成してください。

ヒエラルキー画像

　フォルダとして利用しますので、位置や大きさは変更せずに問題ありません。Position が (0, 0, 0)ではないときだけ、(0, 0, 0)に修正してください。
また、インスペクターの一番下にある Add Component ボタンを押して、CanvasGroup コンポーネントを追加してください。
追加するだけで他の操作はまだ不要です。

StageInfoPlace ゲームオブジェクト　インスペクター画像

StageInfoPlace ゲームオブジェクト　Sceneビュー画像

　　CanvasGroupの機能を利用することで、この後に作成する子ゲームオブジェクトの透明度をまとめて操作出来ます。（下記の動画のように変更できます）

検証動画　CanvasGroupのAlpha操作　後程スクリプトを修正し、この操作をスクリプトから行います
https://gyazo.com/889cfeec19e6cb22f0e46aa698bca449

StageInfoPlace ゲームオブジェクトの子オブジェクトとして imgStageInfo ゲームオブジェクトを作成する

　StageInfoPlace ゲームオブジェクトの上で右クリックをしてメニューを表示し、UI => Image を選択し、名前を imgStageInfo に変更してください。
作成後、ヒエラルキーを確認して、Canvas内での位置を確認してください。下記の画像のような親子関係になっていれば大丈夫です。
なっていない場合には再度作成してください。

ヒエラルキー画像

　このゲームオブジェクトはステージ情報の文字列を表示する際の、背景の役割を担います。

　Image コンポーネントを確認して、Source Image プロパティに任意の画像を設定します。画像を利用する際にには、適宜な無料素材を探してUnityにインポートして利用してください。
今回は初期画像のまま設定は変えずに、色と透明度を調整しています。
また RaycastTarget のスイッチをオフにしてください。

　画像を設定したら、大きさを調整します。RectTransformコンポーネントを画像を参考にしながら調整してください。
設定している画像に応じて適宜な大きさにしてください。
今回は画面の中央に帯状で設置していますが、他の形状でも問題ありません。自分の考えたデザインで作成しましょう。

　最後に、Canvas Rendererコンポーネントの Cull Transparent Mesh のチェックをオンにしてください。

imgStageInfoゲームオブジェクト　インスペクター画像

imgStageInfoゲームオブジェクト　Sceneビュー画像

StageInfoPlace ゲームオブジェクトの子オブジェクトとして txtStageInfo ゲームオブジェクトを作成する

　StageInfoPlace ゲームオブジェクトの上で右クリックをしてメニューを表示し、UI => Image を選択し、名前を txtStageInfo に変更してください。
作成後、ヒエラルキーを確認して、Canvas内での位置を確認してください。下記の画像のような親子関係になっていれば大丈夫です。
なっていない場合には再度作成してください。

ヒエラルキー画像

　Text コンポーネント内の Raycast Target のスイッチをオフにしてください。
また Text 欄ですが、文字の大きさを調整し、Stage Clear!　と記述して、収まる程度、あるいは大きめの大きさを用意してください。
調整が終わったら文字列を削除し、空白にしておいてください。

　Textにアウトラインなどの装飾を行いたい場合には、OutLineコンポーネントやShadowコンポーネントなどを追加して調整してみてください。
今回は CircleOutline コンポーネントをアタッチして文字装飾をしています。

＜CircleOutline＞

　Github で公開されている文字装飾用のスクリプトです。
文字の外枠に対して作用し、通常の Outline コンポーネントよりもくっきりとした輪郭を作って装飾することが出来ます。

CircleOutline
https://gist.github.com/FreelyApps/e9f3f4a4d89882b...

　上記サイトの右上に「Download Zip」というボタンがありますので、そちらを押してダウンロードして解凍し Unity へインポートするか、
新しいスクリプトを Circle Outline という名前で作成して、上記のサイトのソースコードをコピーしてペーストするかしてください。

　作成に成功すると、Add Component より、Circle Outline を選択し、設定出来るようになります。

imgStageInfoゲームオブジェクト　Textコンポーネント　インスペクター画像

CircleOutline　インスペクター画像

　RectTransformコンポーネントも、文字の大きさと imgStageInfo ゲームオブジェクトで設定した画像の大きさに合わせて適宜な大きさに調整してください。

　続けて、Canvas Rendererコンポーネントの Cull Transparent Mesh のチェックをオンにしてください。

imgStageInfoゲームオブジェクト　インスペクター画像

imgStageInfoゲームオブジェクト　Sceneビュー画像

確認

すべて追加後のヒエラルキー画像

すべて追加後のGameビュー画像

　
　以上でステージ情報表示用のUIの追加は終了です。完成したので、StageInfoPlace ゲームオブジェクトのCanvasGroupコンポーネントの Alpha の値を 0 にしてください。
これでゲームクリアになるまでは一時的に見えない状態になります。

StageInfoPlace ゲームオブジェクト　インスペクター画像

　なお、この操作を追加後に、画面の中央部分がスワイプできない不具合が発生するようであれば、RaycastTargetが原因であると考えられます。
追加したゲームオブジェクトのTextコンポーネントかImageコンポーネントのRaycastTargetを確認してください。
スイッチがオンのままになっている可能性があります。これをオフにすればスワイプが有効になります。

４５．UIManagerスクリプトを修正する

設計

　ステージクリアの表示を行う処理をUIManagerに行わせます。
クリア表示のためのメソッドを用意して、ステージクリアの状態になったときに、BattleManagerクラスからこのメソッド呼び出して、画面にステージクリアと表示する設計します。

UIManagerスクリプトを修正する

　新しく変数を２つ用意し、先ほどCanvasに作成した、ステージの情報表示を行う Text コンポーネントを持つ txtStageInfo ゲームオブジェクトの情報をアサイン出来るようにします。
またCanvasGroupコンポーネントを持つ StageInfoPlace ゲームオブジェクトの情報もアサイン出来るようにします。
これらコンポーネントとスクリプトを紐づけし、コンポーネントの操作をスクリプトから利用出来るようにします。

　新しくDisplayStageClearメソッドを用意し、このメソッドでゲーム画面にステージクリアを表示させます。

UIManager.cs

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

public class UIManager : MonoBehaviour
{
    [SerializeField]
    private List<GameObject> iconRemainingBallList = new List<GameObject>();　　// 生成した手球アイコンを順番に追加

    [SerializeField]
    private GameObject iconRemainingBallPrefab;　　　　　　　　　　　　　　　　 // アイコンのプレファブ

    [SerializeField]
    private Transform remainingBallTran;                                        // アイコンを生成する位置

　　[SerializeField]
    private Image imgTimeGauge;                                                 // バトル時間のゲージ表示用

    [SerializeField]
    private Text txtBattleTime;                                                 // バトル時間の画面表示用

    [SerializeField]
    private Text txtMoney;                                                      // Moneyの画面表示用


////* ここから追加 *////


    [SerializeField]
    private Text txtStageInfo;                                                  // ゲームのステージ情報を表示

    [SerializeField]
    private CanvasGroup canvasGroupStageInfo;　　　　　　　　　　　　　　　　　 // CanvasGroupを利用して親子オブジェクトの透明度をまとめて操作

////* ここまで追加 *////


    /// <summary>
    /// 手球の残数を画面上に生成                                // 変更ありませんが記載します
    /// </summary>
    /// <param name="ballCount"></param>
    /// <returns></returns>
    public IEnumerator GenerateIconRemainingBalls(int ballCount) {

        // 手球の最大値の数だけfor文を実行して手球アイコンを生成する
        for (int i = 0; i < ballCount; i++) {

　　　　　　// 生成までに少し待つ(順番にアイコンが生成されるようにする演出)
            yield return new WaitForSeconds(0.15f);

            // 手球アイコンを１つ生成し、icon変数に代入
            GameObject icon = Instantiate(iconRemainingBallPrefab, remainingBallTran, false);

　　　　　　// Listに追加
            iconRemainingBallList.Add(icon);      
        }
    }

    /// <summary>
    /// 手球の残数の表示を更新                               // 変更ありませんが記載します
    /// </summary>
    /// <param name="amount">残りの手球数</param>
    public void UpdateDisplayIconRemainingBall(int amount) {

        // Listにある手球アイコンの数だけfor文を実行する
        for (int i = 0; i < iconRemainingBallList.Count; i++) {
            if (i < amount) {
                // 残りの手球数より小さい場合には手球アイコンを表示する
                iconRemainingBallList[i].SetActive(true);
            } else {
　　　　　　　　// 大きい場合には手球アイコンを非表示にする
                iconRemainingBallList[i].SetActive(false);
            }
        }
    }

    /// <summary>
    /// バトル時間の表示を更新　　　　　　　　　　　　　　　// 変更ありませんが記載します
    /// </summary>
    public void UpdateDisplayBattleTime(int currentTime) {

        // 残り時間を計算
        float value = (float)currentTime / GameData.instance.battleTime;

        // 時間ゲージをアニメさせながら減少
        imgTimeGauge.DOFillAmount(value, 1.0f).SetEase(Ease.Linear);

　　　　// バトルの残り時間を更新
        txtBattleTime.text = currentTime.ToString();
    }

    /// <summary>
    /// 現在までに獲得しているMoneyの表示を更新                  // 変更ありませんが記載します
    /// </summary>
    public void UpdateDisplayMoney(int money) {
        txtMoney.text = money.ToString();
    }


////* ここからメソッドを１つ追加 *////

//　このメソッドにはコメントを書いていません。処理を書きながら自分でコメントをつけてください。
//  もしも記述できないようであれば、DoTweenの処理の復習をしましょう。

    /// <summary>
    /// ステージクリア表示
    /// </summary>
    public void DisplayStageClear() {
        txtStageInfo.transform.localScale = Vector3.one * 5;
        txtStageInfo.text = "Stage Clear!!";

        Sequence sequence = DOTween.Sequence();

        sequence.Append(canvasGroupStageInfo.DOFade(1.0f, 0.5f));        
        sequence.Join(txtStageInfo.transform.DOScale(Vector3.one, 0.5f).SetEase(Ease.Linear));

        sequence.Append(txtStageInfo.transform.DOScale(Vector3.one * 1.25f, 0.15f));
        sequence.Append(txtStageInfo.transform.DOScale(Vector3.one, 0.15f));

        // TODO リザルト処理を書く

    }

////* ここまで追加 *////

}

UIManagerゲームオブジェクトを設定する

　UIManagerスクリプトの修正が終了したら、UIManagerゲームオブジェクトを選択してインスペクターを確認し、アサイン情報を設定します。
新しく追加した txtStageInfo 変数と canvasGroupStageInfo 変数の情報が表示されています。
先ほどの手順で作成した、同名のゲームオブジェクトをヒエラルキーからドラッグアンドドロップしてアサインしてください。

手順動画
https://gyazo.com/364785a7932dca003fb1b0d209498e49

　
UIManagerゲームオブジェクト　インスペクター画像

４６．BattleManagerスクリプトを修正する

設計

　ゲームの進行状態をBattleManagerクラスにて管理していますので、敵をすべて破壊してGameStateがResult状態になったときに
UIManagerクラスに用意した DisplayStageClear メソッドを呼び出して、画面にステージクリアを表示します。
また障害物ゲームオブジェクトをすべて破棄する処理も合わせて行います。

　処理の流れとゲームの流れが連動する場所になりますので、記述しながら処理を正確に追えるように読み解いてください。

BattleManagerスクリプトを修正する

　新しい変数を１つ追加して、ゲームに登場している障害物ゲームオブジェクトを登録して管理出来るようにします。

　またCheckRemainingEnemiesメソッドに処理を追加して、すべての敵を倒した状態(GameStateがResult)になったら、
障害物ゲームオブジェクトをすべて破棄するとともに、UIManagerのDisplayStageClearメソッドを呼び出す処理を追記します。

BattleManager.cs

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

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

public class BattleManager : MonoBehaviour
{
    public UIManager uiManager;

    [SerializeField]
    private CharaBall charaBallPrefab;

    [SerializeField]
    private Transform startCharaTran;

    private CharaBall charaBall;

    [SerializeField]
    private EnemyBall enemyBallPrefab;                               // 敵のプレファブ

    [SerializeField]
    private List<EnemyBall> enemyBallList = new List<EnemyBall>();   // 生成された敵を管理するためのリスト

    [SerializeField]
    private Transform canvasTran;                                    // CanvasのTransformを登録

    [SerializeField]
    private Transform leftBottomTran;                                // ゲーム画面の左下位置の指定用

    [SerializeField]
    private Transform rightTopTran;                                  // ゲーム画面の右上位置の指定用

    [SerializeField]
    private Transform enemyPlace;                                    // 生成した敵を入れるフォルダの役割

    [Header("バトルの残り時間")]
    public int currentTime;

    private float timer;           　　　　　　　　　　　　　　　　　// 時間計測用

    private int money;　　　　　　　　　　　　　　　　　　　　　　　 // ゲーム中のMoney管理用

　　public enum GameState {
        Wait,
        Play,
        Result
    }

    public GameState gameState = GameState.Wait;


////* ここから追加 *////

    [SerializeField]
    private List<ObstacleBase> obstacleList = new List<ObstacleBase>();  // 障害物ゲームオブジェクトの管理用

////* ここまで追加 *////


    IEnumerator Start() {                   　　　　      // 変更なしですが記載します

        gameState = GameState.Wait;
        //Debug.Log(gameState);             // 確認が済みましたので、コメントアウトするか削除してください

        // 初期化
        yield return StartCoroutine(Initialize());

        // 残り時間の表示を更新
        uiManager.UpdateDisplayBattleTime(currentTime);

        // Moneyの表示を更新
        uiManager.UpdateDisplayMoney(money);
    }

    /// <summary>
    /// ゲーム設定値の初期化　　　　　                      // 変更なしですが記載します
    /// </summary>
    /// <returns></returns>
    public IEnumerator Initialize() {
 
        currentTime = GameData.instance.battleTime;
　
        // Moneyの初期値設定
　　　　money = 0;

        // 手球を体力の数だけ生成する
        yield return StartCoroutine(uiManager.GenerateIconRemainingBalls(GameData.instance.charaBallHp));

        // GenerateCharaBallメソッドで手球の生成処理し、戻り値で変数に代入
        charaBall = GenerateCharaBall();

        // 敵を生成
        yield return StartCoroutine(GenerateEnemys());

        gameState = GameState.Play;
        Debug.Log(gameState);
    }

    /// <summary>
    /// 手球の生成                                            // 変更なしですが記載します
    /// </summary>
    /// <returns></returns>
    private CharaBall GenerateCharaBall() {                          
        CharaBall chara = Instantiate(charaBallPrefab, startCharaTran, false);
        chara.SetUpCharaBall(this);
        return chara;
    }

　　/// <summary> 
    /// キャラを停止させてスタート位置へ戻す                  // 変更なしですが記載します
    /// </summary> 
    /// <returns></returns>
    public IEnumerator RestartCharaPosition(float waiTime = 1.0f) {
        // キャラの動きを止める
        charaBall.StopMoveBall();

        // スタート位置へ戻す
        charaBall.transform.DOMove(startCharaTran.position, waiTime).SetEase(Ease.Linear);

        yield return new WaitForSeconds(waiTime);

        // 手球を弾けるようにする
        charaBall.ChangeActivateCollider(true);
    }

    /// <summary>
    /// 敵を生成               　　　　　　　　　　　　   // 変更なしですが記載します
    /// </summary>
    /// <returns></returns>
    private IEnumerator GenerateEnemys() {

        // 生成する敵の数をランダムで設定
        int appearEnemyCount = Random.Range(2, 5);

        // 生成した数をカウント用
        int count = 0;

        // 生成した数が生成数になるまでループする。目標数になったら生成終了し、ループを抜ける
        while (count < appearEnemyCount) {

            // Transform情報を代入
            Transform enemyTran = canvasTran;

            // 位置を画面内に収まる範囲でランダムに設定
            enemyTran.position = new Vector2(Random.Range(leftBottomTran.localPosition.x, rightTopTran.localPosition.x), Random.Range(leftBottomTran.localPosition.y, rightTopTran.localPosition.y));

            // 設定した位置に対してRayを発射
            RaycastHit2D hit = Physics2D.Raycast(enemyTran.position, Vector3.forward);

            // Rayに当たったオブジェクトを表示。何もないときは null
            Debug.Log(hit.collider);
            
            // もしも何もRayに当たらない場合(Rayに何か当たった場合にはその位置には生成しないので、ループの最初からやり直す)
            if (hit.collider == null) {

                // 敵を生成
                EnemyBall enemyBall = Instantiate(enemyBallPrefab, canvasTran, false);

                // 親子関係を設定
                enemyBall.transform.SetParent(enemyPlace);

                // 敵の位置をランダムで設定した位置に設定
                enemyBall.transform.localPosition = enemyTran.position;

                // 敵の初期設定
                enemyBall.SetUpEnemyBall(this, canvasTran);

                // 敵の生成カウントを加算
                count++;

                // 敵の管理リストに追加
                enemyBallList.Add(enemyBall);

                // 少し待機して、ループを最初から繰り返す
                yield return new WaitForSeconds(0.15f);
            }         
        }
    }

　　/// <summary>
    /// 敵をリストから削除　　　　　　　                  // 変更なしですが記載します
    /// </summary>
    /// <param name="enemy"></param>
    public void RemoveEnemyList(EnemyBall enemy) {
        enemyBallList.Remove(enemy);
        CheckRemainingEnemies();
    }

    /// <summary>
    /// 敵の残数を確認
    /// </summary>
    public void CheckRemainingEnemies() {
        if (enemyBallList.Count == 0) {
            // TODO ステージクリア処理を記述する　　　　// 処理を書きこんでいるので削除してください
            Debug.Log("ステージ　クリア");              // 下にもDebug.Logがあるので、このDebug.Logはコメントアウトするか、削除してください

            // 今回のゲーム内で獲得したMoneyをMoney総数に加算
            GameData.instance.ProcMoney(money);

            // ゲームクリアの状態
            gameState = GameState.Result;
            Debug.Log(gameState);  


////* ここから追加 *////

　　　　　　// 障害物を破棄し、ObstacleListをクリア
            ClearObstacleList();


            // クリア表示
            uiManager.DisplayStageClear();

////* ここまで追加 *////


        }
    }

　　void Update() {　　　　　                         // 変更なしですが記載します
        if (gameState != GameState.Play) {
            return;
        }

        // 時間を計測
        timer += Time.deltaTime;

        if (timer >= 1) {
　　　　　　// 1秒経過するごとにcurrentTimeを減らす
            timer = 0;
            currentTime--;
 
            if (currentTime <= 0) {
                currentTime = 0;

                // TODO ゲームオーバー処理を書く
                Debug.Log("Time Up!");
            }
        }

        // バトル時間の表示を更新
        uiManager.UpdateDisplayBattleTime(currentTime);
    }

    /// <summary>
    /// Moneyを加算　　　　　　　　　　　　　　　　　　// 変更なしですが記載します
    /// </summary>
    public void AddMoney(int amount) {
        // moneyを加算
        money += amount;
        
        // money 変数は private 修飾子なので、Debug.Logを表示して値の変化を確認する
        Debug.Log(money);

        // Moneyの表示を更新
        uiManager.UpdateDisplayMoney(money);
    }


////* ここからメソッドを１つ追加 *////

//　この処理についてはコメントを記述していません。
//　処理を書きながらコメントを書いてください。もしも書けない場合にはListとforeachの処理についての復習をしましょう。

    /// <summary>
    /// 障害物を破棄し、ObstacleListをクリア
    /// </summary>
    private void ClearObstacleList() {
        if (obstacleList.Count > 0) {
            foreach (ObstacleBase obstacle in obstacleList) {
                Destroy(obstacle.gameObject);
            }
            obstacleList.Clear();
        }
    }

////* ここまで追加 *////

}

BattleManagerゲームオブジェクトを確認する

　BattleManagerスクリプトの修正が終了したら、BattleManagerゲームオブジェクトを選択してインスペクターを確認します。
ObstacleList 変数が追加されていますので、ここにヒエラルキーにある Obstacle_Hole ゲームオブジェクトを登録します。

BattleManagerゲームオブジェクト　インスペクター画像

　ObstacleList 変数の Size を、ヒエラルキーにある Obstacle_Hole ゲームオブジェクトの数に指定してください。
Element情報が追加されますので、こちらに Obstacle_Hole ゲームオブジェクトをドラッグアンドドロップしてアサインしてください。

　ゲームクリアの状態になったときに、この ObstacleList 内にある障害物を削除するためです。

手順動画
https://gyazo.com/713758e54d7adbb5f1a4e79b28b02056

BattleManagerゲームオブジェクト　アサイン後のインスペクター画像

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

　ゲームを実行して敵をすべて破壊してみましょう。障害物ゲームオブジェクトが破棄されて、ステージクリアの文字が入った状態でStageInfoが表示されれば成功です。
表示される際には、DoTweenによるアニメーションの演出が入ります。自分で新しい演出に変えてみてもいいでしょう。

実行動画
https://gyazo.com/478ce79c7473fb5122460271021fc70a

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

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

印刷する

コメント（0）

おはじきゲーム　手順２１ - i-school 先頭へ

コメントをかく

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

i-school