おはじきゲーム　手順１９

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

手順１９　ースコアを実装ー

３７．Canvas内にUI部品を作成する④（スコア表示部分）
３８．GameDataスクリプトを修正する②(スコアを登録して管理できるようにする)
３９．UI管理を行うUIManagerスクリプトを修正する②(スコア表示の更新）
４０．BattleManagerスクリプトを修正する②（スコアを加算する処理を追加する）
４１．EnemyBallスクリプトを修正して、Moneyを設定する

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

・

３７．Canvas内にUI部品を作成する④（スコア表示部分）

設計

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

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

　なおスコアは Money という用語で扱います。

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

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

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

ヒエラルキー画像

　MoneyPlace ゲームオブジェクトのインスペクターを確認し、 Position Y 軸の位置を調整します。
画像設定後にも、適宜調整をして見やすい位置になるように修正してください。

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

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

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

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

ヒエラルキー画像

　Image コンポーネントを確認して、Source Image プロパティに任意の画像を設定します。素材は無料素材を探してUnityにインポートして利用してください。
Moneyというコンセプトですのでコインやお金を表すような画像を設定してください。

　画像を設定したら、大きさを調整します。RectTransformコンポーネントを画像を参考にしながら調整してください。
設定している画像に応じて適宜な大きさにしてください。

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

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

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

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

ヒエラルキー画像

　Text コンポーネント内の Raycast Target のスイッチをオフにしてください。
また Text 欄ですが、文字の大きさを調整し、数字が5桁位まで並ぶ程度の大きさを用意してください。
調整が終わったら 0 と入力しておいてください。

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

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

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

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

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

　以上でスコア表示用のUIの追加は終了です。

３８．GameDataスクリプトを修正する②(スコアを登録して管理できるようにする)

設計

　MoneyについてはGameDataクラスとBattleManagerクラスに登録し、それぞれが別の役割を果たすように設計にします。

　GameDataクラスには、totalMoney 変数を用意し、いままで獲得したMoneyの総数を管理させます。
　
　BattleManagerクラスには、money 変数を用意し、1回のゲームプレイで獲得したMoneyを管理させます。

　流れとしましては、ゲーム中の獲得したMoneyは一時的にBattleManagerクラスの money 変数にて管理を行います。
ゲームをクリアできるかわからないため、すぐには totalMoney 変数には加算しないようにします。

　そしてゲームをクリアしてはじめて、この money変数をプレイヤーが獲得し、totalMoney 変数に加算するようにします。

GameDataスクリプトを修正する

　Moneyの総数を管理できるように、totalMoney 変数を１つ追加します。
また、ゲームクリア時に今回のゲームプレイで獲得した Money を加算するためのメソッドを１つ用意します。

GameData.cs

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

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

public class GameData : MonoBehaviour
{
    public static GameData instance;

    public int charaBallHp;

    [Header("バトル時間の設定値")]
    public int battleTime;


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

    [Header("Money総数")]
    public int totalMoney;

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


    void Awake() {
        if (instance == null) {
            instance = this;
            DontDestroyOnLoad(gameObject);
        } else {
            Destroy(gameObject);
        }
    }


////* メソッドを１つ追加する *////

    /// <summary>
    /// Moneyの総額を増減する
    /// </summary>
    public void ProcMoney(int money) {
        totalMoney += money;
    }

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

}

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

　GameDataスクリプトの修正が終了したら、GameDataゲームオブジェクトを選択してインスペクターを確認します。
新しく作成した totalMoney 変数のアサイン情報が表示されます。
こちらはステージクリア時にクリア報酬として加算されますので、最初は 0 のままで問題ありません。

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

３９．UI管理を行うUIManagerスクリプトを修正する②(スコア表示の更新）

設計

　Moneyの表示を更新する処理をUIManagerに行わせます。
Moneyの数字表示の更新を行うためのメソッドを用意して、Moneyが加算されるたびにこのメソッド呼び出すようにし、Moeny表示の更新を行うよう設計します。

UIManagerスクリプトを修正する

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

　新しくUpdateDisplayMoneyメソッドを用意し、このメソッド内で画面のMoney表示の更新を行います。

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の画面表示用

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


    /// <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();
    }

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

}

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

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

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

４０．BattleManagerスクリプトを修正する②（スコアを加算する処理を追加する）

設計

　ゲーム中のMoneyを管理(加算)する機能と、ゲームクリア時にGameDataクラスにある totalMoney に獲得した Money を加算する処理を呼び出すようにします。
前にも記述しましたが、このBattleManagerクラスが一時的な管理を、GameDataクラスがMoneyの総数を管理する設計になっています。

BattleManagerスクリプトを修正する

　Money管理用に新しく変数を１つ用意します。またStartメソッド、Initializeメソッド、CheckRemainingEnemiesメソッドを修正し、Money関連の処理を追記します。

　AddMoneyメソッドを新しく追加して、このメソッドの引数に渡ってきた値を money に加算していきます。今回は敵が破壊された時にこのメソッドを呼び出すことで
敵の持つ Money 分だけ加算するようにしています。
　またこのメソッド内で UIManagerのUpdateDisplayMoneyメソッドを呼び出すことでゲーム画面上のMoneyの表示を更新させます。

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管理用

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


    IEnumerator Start() {
        // 初期化
        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());
    }

    /// <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 (enemyObjList.Count == 0) {
            // TODO ステージクリア処理を記述する
            Debug.Log("ステージ　クリア");    


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

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

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

        }
    }

　　void Update() {　　　　　　　　　　　　　　　        // 変更なしですが記載します

        // 時間を計測
        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);
    }

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

}

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

　新しい変数は追加されましたが、private 修飾子ですのでインスペクターには追加情報はありません。

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

４１．EnemyBallスクリプトを修正して、Moneyを設定する

設計

　Moneyの獲得方法として、敵が破壊された際に取得できるようにします。
そのためには、Moneyを設定するための変数を用意し、敵の持つMoneyの値を設定出来るようにします。
また破壊されたタイミングで、BattleManagerクラスにこの値を渡すことで、Moneyを獲得できるような設計にします。

EnemyBallスクリプトを修正する

　新しく Money用の money変数を public 修飾子で追加し、インスペクターから設定できるようします。
DestroyEmenyメソッドに処理を追加し、敵を破壊した際に money を BattleManagerクラスへ渡して加算する処理を行います。

EnemyBall.cs

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

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

public class EnemyBall : MonoBehaviour
{
    [Header("的球の体力")]
    public int hp;

    private CapsuleCollider2D capsuleCol;

    private int maxHp;              // ゲーム開始時の体力の最大値の保持用。Sliderの計算に使用する

    [SerializeField]
    private Slider hpSlider;        // Sliderコンポーネントとの紐づけ用。インスペクターでアサインする

    private BattleManager gameManager;

    private Transform canvasTran;


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

    public int money;

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


    /// <summary>
    /// 的球の設定                                                // 変更ありませんが掲載します
    /// </summary>
    /// <param name="gameManager"></param>
    /// <param name="canvasTran"></param>
    public void SetUpEnemyBall(BattleManager gameManager, Transform canvasTran) {
        this.gameManager = gameManager;
        this.canvasTran = canvasTran;
    }

    void Start() {                                                // 変更ありませんが掲載します

        capsuleCol = GetComponent<CapsuleCollider2D>();

　　　　// 最初のスケールを保持
        Vector2 startScale = transform.localScale;

        // 最小化(見えなくなる)
        transform.localScale = Vector2.zero;

        // Sequence初期化
        Sequence sequence = DOTween.Sequence();

        // 敵を回転させながら1.5倍の大きさにし、その後、元の大きさに戻しながら出現させる
        sequence.Append(transform.DOLocalRotate(new Vector3(0, 720, 0), 1.0f, RotateMode.FastBeyond360).SetEase(Ease.Linear));
        sequence.Join(transform.DOScale(startScale * 1.5f, 1.0f).SetEase(Ease.InCirc));
        sequence.AppendInterval(0.15f);

        sequence.Join(transform.DOScale(startScale, 0.15f).SetEase(Ease.InCirc).OnComplete(() => {
         
            // 体力の最大値を代入
            maxHp = hp;

            // 体力ゲージの表示を更新 => 的球が出現してからゲージが徐々に満タンになるアニメ演出
            UpdateHpGauge();
        }));
    }

    /// <summary>
    /// 体力ゲージの表示を更新                                      // 変更ありませんが掲載します
    /// </summary>
    private void UpdateHpGauge() {
        hpSlider.DOValue((float)hp / maxHp, 0.5f);
    }

    private void OnCollisionEnter2D(Collision2D col)                // 変更ありませんが掲載します
　　{
        // CharaBallのTagを持つゲームオブジェクトに接触したら
        if (col.gameObject.tag == "CharaBall")
        {
            // CharaBallクラスを取得できるか判定
            if (col.gameObject.TryGetComponent(out CharaBall charaBall))
            {
　　　　　　　　// Hpを減少させる
                hp -= charaBall.power;

                // 体力の値を体力ゲージに反映
                UpdateHpGauge();

                // Sequence初期化
                Sequence sequence = DOTween.Sequence();

                // 手球と接触すると敵を回転
                sequence.Append(transform.DOLocalRotate(new Vector3(0, 720, 0), 0.5f, RotateMode.FastBeyond360).SetEase(Ease.Linear));

　　　　　　　　// Hpが0以下になったら
                if (hp <= 0) {
                    DestroyEnemy(sequence);
                }
            }
        }
    }

　　/// <summary>
    /// 敵の破壊
    /// </summary>
    /// <param name="sequence"></param>
    public void DestroyEnemy(Sequence sequence) {
        capsuleCol.enabled = false;

        // 破壊までの時間
        float duration = 0.5f;

        // 内側に小さくする ドロップ内容で消える処理を分岐
        sequence.Join(GetComponent<RectTransform>().DOSizeDelta(new Vector2(0, 100), duration).SetEase(Ease.Linear));

        // 敵の管理リストからこの敵の情報を削除
        gameManager.RemoveEnemyList(this);


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

        // Moneyを加算
        gameManager.AddMoney(money);

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


        // スケールが0になるタイミングで破棄
        Destroy(gameObject, duration);
    }
}

EnemyBallゲームオブジェクトのプレファブを選択して、Moneyを設定する

　PrefabsフォルダにあるEnemyBallゲームオブジェクトを選択して、インスペクターの最上段にある Open Prefab を選択してください。

　編集が出来るようになりますので、EnemyBallスクリプトを確認し、新しく追加された Money 変数に値を設定します。任意の値で問題ありません。

EnemyBall　設定

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

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

　すべての手順が完了しましたので、ゲームを実行してみましょう。
敵を破壊した際にDebug.Logに加算値が表示され、画面のMoney表示も更新されれば成功です。

Debug.Log

検証動画①　敵を破壊するとMoney表示が加算されて更新
https://gyazo.com/824cb7e3fcee4ee23fafcb29e2d0e9ba

検証動画②　すべての敵を破壊するとクリアとなり、GameDataクラスのtotalMoneyの値にmoneyの値が加算される
https://gyazo.com/602efa4de0d20172e8e9422f423f3bf8

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

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

印刷する

コメント（0）

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

コメントをかく

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

i-school