おはじきゲーム　手順１８

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

手順１８　ー残り時間を実装ー

３３．Canvas内にUI部品を作成する③（画面上部に残り時間表示）
３４．GameDataスクリプトを修正する(残り時間を登録して管理できるようにする)
３５．UIManagerスクリプトを修正する①(残り時間表示の更新）
３６．BattleManagerスクリプトを修正する①(時間経過、敵の倒した数、出現数などを管理)

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

・ImageコンポーネントのImageTypeの設定を Filled に変更して利用する
・DoTween　DOFillAmountメソッド

３３．Canvas内にUI部品を作成する③（画面上部に残り時間表示）

設計

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

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

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

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

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

ヒエラルキー画像

　ClockPlace ゲームオブジェクトのインスペクターを確認し、RectTransform コンポーネントにある Anchor の設定を画像のように Top - Center に変更します。
その上で Position Y 軸の位置を調整します。画像設定後も、適宜調整をして見やすい位置になるように修正してください。

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

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

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

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

ヒエラルキー画像

＜ImageコンポーネントのImageTypeの設定を Filled に変更して利用する＞

　imgTimeGauge ゲームオブジェクトを選択してインスペクターを確認します。

　最初にImageコンポーネントのSourceImageに画像を設定します。画像については、丸い形状の画像をネットで探してUnityにインポートして利用してください。
ここでは真ん中が透明な丸いフレームの画像を使用しています。

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

　画像を設定後、ImageType を Filled に変更します。すぐ下に追加の設定項目が表示されますので、
Fill Method は Radial360、Fill Origin は Top、Fill Amount は 1、Crockwise はオンに設定してください。

ImageTypeの設定

　この設定を行うと、Fill Amountの値を操作することによって設定した画像の表示する割合を変更できます。
この機能によって、画像の一部を表示したり、全部表示したり、全部非表示にすることできるため、さながら画像をゲージの増減のように扱うことが出来ます。

　Fill Method はゲージの増減する方向、Fill Origin は Fill Amount が 0 の際の画像の起点の位置です。
今回は360方向に画像の操作を行い、起点位置を上から、時計周りに位置にするように設定しています。他にも色々な設定がありますので、調べてみてください。

　忘れずにRaycastTargetのスイッチを切っておきます。

Unity公式スクリプトAPI
ImageType
https://docs.unity3d.com/2019.1/Documentation/Scri...

TECH Projin様
【Unity uGUI】Imageコンポーネントを徹底解説
https://tech.pjin.jp/blog/2017/01/26/unity_ugui_im...

　以上の設定は、時間の経過をゲージとして表示する役割を持ちます。以下の画像のように使います。
まずは自分で、FillAmoutの値を操作してみて確認をしておいてください。これをスクリプトから操作します。

FillAmoutの検証動画
https://gyazo.com/b1f2e461bca2f845cd14c11b96092270

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

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

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

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

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

ヒエラルキー画像

　Text コンポーネント内の Raycast Target のスイッチをオフにしてください。
また Text 欄ですが、文字の大きさを調整し終わったら空白にしておいてください。

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

Sceneビュー　完成画像

　またこちらも Canvas Rendererコンポーネントの Cull Transparent Mesh のチェックをオンにしてください。

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

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

　以上で時間表示用のUIの追加は終了です。

３４．GameDataスクリプトを修正する①(残り時間を登録して管理できるようにする)

設計

　バトル時間についてはGameDataに登録し、それを他のクラスが参照して利用するという設計にします。
そのため、バトル時間を設定するための変数を１つ用意します。

GameDataスクリプトを修正する

　バトルの時間をインスペクターから設定できるように、変数を１つ追加します。

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;

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


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

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

　GameDataスクリプトの修正が終了したら、GameDataゲームオブジェクトを選択してインスペクターを確認します。
新しく作成した BattleTime 変数のアサイン情報が表示されてます。

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

　
　BattleTime 変数を 0 => 60 に変更してください。これが1回辺りのゲームのプレイ時間です。
ゲーム内ではこの値を秒で管理しますので、この設定ですと60秒になります。

GameDataゲームオブジェクト　BattleTime 設定後のインスペクター画像

３５．UIManagerスクリプトを修正する①(残り時間表示の更新）

設計

　UIManagerはUIの情報を扱う管理クラスです。今回の時間表示はUIですので、この時間表示を行う役割を担います。
時間の数字表示と時間ゲージの更新を一緒に行うためのメソッドを用意して、時間の経過に合わせて呼び出すようにし、逐次更新を行うよう設計します。

UIManagerスクリプトを修正する

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

　その上で、新しくUpdateDisplayBattleTimeメソッドを用意し、バトル時間の表示の更新と、バトル時間の周囲に表示されている時間ゲージの更新を行います。
時間ゲージの更新にはDoTweenの持つDOFillAmountメソッドを利用することで、徐々にアニメさせながら減少させるように演出を行います。

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;                                                 // バトル時間の画面表示用

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


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

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

}

＜DoTween　DOFillAmountメソッド＞

　DOFillAmountメソッドは、画像のImageTypeをFilledに設定している Image コンポーネントに対して実行できるメソッドです。
Image コンポーネントの持つ FillAmout の値に対して補間処理を行って、アニメしているように演出してくれる機能です。

　FillAmountの値を第1引数で指定した値まで、第2引数で指定した時間をかけて変更します。

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

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

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

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

アサイン手順動画
https://gyazo.com/6683e2e461fb953a4a71cc115b8d9bde

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

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

設計

　ゲーム内の時間の経過管理を行う機能を追加します。時間の経過を管理する中でUIManagerへと命令を出し、ゲーム画面の時間の表示を更新してもらうように設計します。

BattleManagerスクリプトを修正する

　時間管理用に新しく変数を２つ用意します。またStartメソッドとInitializeメソッドを修正し、時間表示についての処理を追記します。

　Updateメソッドを新しく追加して、ゲーム内の時間の経過を測るとともに、1秒経過するごとにUIManagerのUpdateDisplayBattleTimeメソッドを呼び出すことで
ゲーム画面上の時間の表示を更新させます。

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;           　　　　　　　　　　　　　　　　　// 時間計測用

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


    IEnumerator Start() {
        // 初期化
        yield return StartCoroutine(Initialize());


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

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

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

    }

    /// <summary>
    /// ゲーム設定値の初期化
    /// </summary>
    /// <returns></returns>
    public IEnumerator Initialize() {

////* ここから追加 *////
　
　　　　currentTime = GameData.instance.battleTime;

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

        // 手球を体力の数だけ生成する
        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 (enemyBallList.Count == 0) {
            // TODO ステージクリア処理を記述する
            Debug.Log("ステージ　クリア");    
        }
    }


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

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


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

}

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

　アサイン情報が追加されていますので確認します。
この値はゲーム実行時にStartメソッド内で代入されますので、インスペクターでは 0 のままで問題ありません。

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

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

　すべての手順が完了しましたので、ゲームを実行してみましょう。
ゲームと同時に画面上部にバトル時間が表示されて、時間の経過に合わせて減少していけば成功です。一緒に時間ゲージも減少していくか確認してください。

検証動画①　ゲーム実行と同時にバトル時間が表示されて、時間経過とともに減少する
https://gyazo.com/693e2875d1b102590ced4ba8c500027a

検証動画②　バトル時間の経過に合わせて時間のゲージが減少していく
https://gyazo.com/a8daf49ea9e4da11d221c8c046e57b3f

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

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

印刷する

コメント（2）

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

このページへのコメント

ご活用いただきまして、ありがとうございます。

この Wiki 内にコメントへのフィードバック機能がなく、返信が遅くなってしまいました。申し訳ございません。

ご指摘ありがとうございます。
早速修正させていただきます。

何卒よろしくお願いいたします。

Posted by

orika_ex_miyako 2024年02月15日(木) 12:41:27 返信

いつもご愛用させてもらっております。
1点誤記があると思うのですが、

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

の項目で txtBattleTimeのUI => Imageを作成と書いてありますが、
ここはImageではなくLegacy => Textではないでしょうか。

ご確認よろしくお願い致します。

Posted by 名無し08 2024年02月07日(水) 10:34:14 返信

コメントをかく

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

i-school