おはじきゲーム　手順１３

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

手順１３　ーゲーム管理用クラスとUIとの連動を実装ー

２３．UI管理用のUIManagerスクリプトを作成する(手球の残数アイコンの生成・管理を行う)
２４．バトルシーン管理用のBattleManagerスクリプトを作成する

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

・Listの使い方(Addメソッド、for文と組み合わせる)
・Startメソッドの戻り値をvoidからIEnumerator型にして使用する処理
・yield return StartCoroutine()処理による待機処理

２３．UI管理用のUIManagerスクリプトを作成する(手球の残数アイコンの生成・管理を行う)

設計

　【２２】の最後に作成した手球の残数用アイコン　IconRemainingBall ゲームオブジェクトを利用して、手球の残数を画面上にUIとして表示します。

　ゲームの実行と同時に、プレファブになっている IconRemainingBall ゲームオブジェクトを手球の数に合わせて生成を行い、アイコン表示とします。
その後は管理を行います。手球の残数の更新に合わせて画面のアイコン表示を更新します。

UIManagerスクリプトを作成する

　メソッドを２つ用意し、適宜なタイミングで呼び出して使います。

　GenerateIconRemainingBallsメソッドでは、手球アイコンを画面に生成する処理を行います。引数によって生成する数を変更することができるような設計になっています。
これは次の手順で作成する、BattleManagerスクリプトのStartメソッドより呼び出されることで実行されます。

　UpdateDisplayIconRemainingBallメソッドでは、手球のアイコンの表示数を更新します。
手球が増えたり、減ったりしたりした際に呼び出すことで、画面の手球アイコンの数を更新し、実際の手球の数とアイコンの数とを同期するようにします。

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;                                        // アイコンを生成する位置

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

＜Listの使い方(Addメソッド、for文と組み合わせる)＞

　Listクラスは<T>にジェネリック型（任意の型）を指定して、同じデータ型をまとめて管理するコレクション機能を持つクラスです。
配列と異なり、要素を自由に追加・削除できます。(要素数が可変する)
Listを利用する場合には配列と同様に初期化が必要ですが、Listでは初期化時に要素数の宣言が不要です。

　そのため、予め要素数の確定しているデータを扱う場合には配列を、要素数が未確定であったり可変長であるデータについてはListを利用するようにします。

参考

.net column様
【初期化の方法】C#で配列やリストを初期化するには？
https://www.fenet.jp/dotnet/column/language/713/

　
　ここでは今回利用しているListクラスの持つメソッドについて説明します。

Listの宣言と初期化

　public List<GameObject> iconRemainingBallList = new List<GameObject>();

List.Add(T型)

　Listの末尾に引数で指定した要素(データ)を追加します。Listで宣言している型と同じ型であればAddすることが出来ます。

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

  // Listに追加(Listの型とicon変数の型がどちらもGameObject型なのでicon変数を追加できる)
  iconRemainingBallList.Add(icon);

　ListはAddメソッドを利用して、引数に指定したデータをList内に要素として追加していくことが可能です。
　削除する場合にはいくつか方法がありますが、Removeメソッドを利用すれば、Addメソッドと同じように引数で指定したデータをList内から削除することができます。

参考

侍エンジニア塾様
【C#入門】Listの使い方総まとめ(ArrayList/Add/Remove/ソート/検索)
https://www.sejuku.net/blog/47378

for文と組み合わせる

　Listは複数の同じ型を扱うコレクションですので、for文などの繰り返し処理と相性がいいです。
今回は手球アイコンの総数(Listの要素数の最大値)を目標値にしてfor文を実行し、画面に表示する手球アイコンの数を制御しています。

　配列の場合には要素数の最大値はLenghtで取得できましたが、Listの場合にはCountで取得出来ます。
これはLenghtと同じく int型ですので、for文の条件式に利用できます。

　for (int i = 0; i < iconRemainingBallList.Count; i++) {
  　　//　処理
  }

　新しく学習する内容であっても、それを利用する際には基礎構文を使います。これらの組み合わせをどのように構築していくかが重要になります。

UIManagerゲームオブジェクトを作成して、UIManagerスクリプトをアタッチする

　ヒエラルキー上で右クリックをしてメニューを表示し、Create Empty を選択します。名前を UIManager に変更します。
このゲームオブジェクトはCanvas内にない状態で問題ありません。

ヒエラルキー画像

　先ほど作成した UIManager スクリプトをドラッグアンドドロップしてアタッチしてください。
UIManagerゲームオブジェクトを選択して、UIManagerスクリプトがアタッチされたかをインスペクターにて確認してください。
引き続き、アサイン情報を設定していきます。

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

UIManagerゲームオブジェクトにアサイン情報を設定する

　UIManagerゲームオブジェクトのインスペクターから、UIManagerスクリプトのアサイン情報を設定します。

　IconRemainingBallList 変数は Size 0 になっていますが、こちらはそのままで問題ありません。
こちらにはゲーム実行時に、生成された手球アイコンの数だけ情報が入り更新されます。

　IconRemainingBallPrefab 変数には、Prefabs フォルダより作成しておいた IconRemainingBall ゲームオブジェクトをドラッグアンドドロップしてアサインします。
この情報を使って手球のアイコンを生成します。

　RemainingBallTran 変数にはヒエラルキーにある RemainingBallTran ゲームオブジェクトをドラッグアンドドロップしてアサインします。
この位置に手球アイコンを指定数だけ生成します。

　指定数、ということは複数のアイコンを生成することになりますので、本来であれば、複数のオブジェクトを同じ位置で生成すると当然重なってしまいます。

　ですが、この生成位置に指定している RemainingBallTran ゲームオブジェクトは GridLayoutGroup コンポーネントを持っていますので、
アイコンがすべて同じ位置に生成されても、自動的に整列して並べ直してくれます。(すでに複数並ぶ状態は検証済です)
　そのため今回は生成時に位置をずらして生成する、という処理が不要になっています。

アサイン手順動画　プレファブの情報とアイコン生成位置の情報をアサインする
https://gyazo.com/f4f4121e02b2322e9c8e170ea93b1b07

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

　
　以上でUIManager関連の作成は終了です。
　

２４．バトルシーン管理用のBattleManagerスクリプトを作成する

設計

　Battleシーン全体を管理するマネージャークラスとして設計を行います。

　今回はまず、Startメソッド内でUIManagerクラスへと命令を出し、手球アイコンを生成するように処理を行っています。

　今後は敵の生成、バトル内時間の管理など、ゲームの進行管理も含めてBattleシーン全体の管理を行うクラスにします。

BattleManagerスクリプトを作成する

　宣言フィールドではUIManagerスクリプトへの紐づけのための変数を用意します。あとで忘れずにアサインします。

　Startメソッドはvoid型ではなく、IEnumerator型で作成します。こうすることでStartメソッド内でコルーチン処理を記述できます。

　ここでは yield return StartCoroutine(Initialize())メソッドを実行しています。
これにより、Initializeメソッドの処理がすべて終了するまでは、ここでプログラムを一時停止する、という遅延処理を実装することが出来ます。

　Initializeメソッドでは、UIManagerクラスの持つGenerateIconRemainingBallsメソッドを呼び出し、ここで手球の生成処理を命令しています。
引数には、GameData.instance.charaBallHp 変数を指定しています。GameDataクラスはシングルトン設計になっているため、このようにクラスを直接指定して変数を参照できます。

　またこのメソッドの呼び出しにも yield return でStartCoroutineを実行しているため、手球アイコンの生成が終了するまで、ここでプログラムを一時停止しています。

BattleManager.cs

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

public class BattleManager : MonoBehaviour
{
    public UIManager uiManager;

    IEnumerator Start() {
        // 初期化(この処理が終了するまで、次の処理は動かない)
        yield return StartCoroutine(Initialize());
    }

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

        // 残りの手球の数だけ手球のアイコンの生成する(この処理が終了するまで、次の処理は動かない)
        yield return StartCoroutine(uiManager.GenerateIconRemainingBalls(GameData.instance.charaBallHp));
    }
}

＜Startメソッドの戻り値をvoidからIEnumerator型にして使用する処理＞

　通常のStartメソッドの戻り値は void ですが、用途に応じて戻り値を IEnumerator型に変更して利用することができます。
その場合、通常と同じようにゲームの実行と同時にStartメソッドが呼ばれる部分は変わりませんが、
コルーチンメソッドとして機能するようになりますので、遅延処理や待機処理などを実装することが可能になります。

　今回のケースでは、手球のアイコンをすべて生成してから次の処理へと移りたいため、そのためのメソッドの待機処理を実装するためにStartでの処理を利用しています。

＜yield return StartCoroutine()処理による待機処理＞

　コルーチン(Coroutine)とは一定の時間や条件をもとに、処理を中断・再開・終了させることができる処理のことです。

　コルーチンについての詳細な説明は割愛します。こちらの記事や、サイトで広く情報を取得できますので、そちらを参考にしてください。

XR-HU3様
【Unity】コルーチンで処理を中断・再開・停止させる方法を学ぶ
https://xr-hub.com/archives/20368

　コルーチンメソッド内には、yield を利用した処理を記述することができます。
例えば、数秒間の遅延処理や、条件達成まで待機させる処理などを、この yield を利用すると実装できます。
　今回は２か所で続けて処理を行っています。

    // ①初期化(この処理が終了するまで、次の処理は動かない)
    yield return StartCoroutine(Initialize());
         ↓
　　// ②残りの手球の数だけ手球のアイコンの生成する(この処理が終了するまで、次の処理は動かない)
    yield return StartCoroutine(uiManager.GenerateIconRemainingBalls(currentHp));

　通常のコルーチンメソッドの呼び出しと違いまして、呼び出す前に yield return があります。
この場合、呼び出されたコルーチンメソッドの処理がすべて終了するまで、ここでプログラムを一時待機させる、という処理が実行されます。

　呼び出すコルーチンメソッドの処理は、

①　「Initializeメソッドを実行する。そのメソッドの処理がすべて終了するまで、プログラムを一時待機させる」
②　「UIManagerクラスにあるGenerateIconRemainingBallsメソッドを実行する。そのメソッドの処理がすべて終了するまで、プログラムを一時待機させる」

という内容です。

　つまり、②の内容が終了するまで①の処理は終了しないことになります。
その結果、手球のアイコンの生成が終了してから、はじめて次の処理が行われる、という処理が実装されています。

　このような待機処理を挟むことによって、手球のアイコンがすべて画面に表示される前に処理がどんどんと先に進行してしまうのを防いでいます。

BattleManagerゲームオブジェクトを作成して、BattleManagerスクリプトをアタッチする

　ヒエラルキー上で右クリックをしてメニューを表示し、Create Empty を選択します。名前を BattleManager に変更します。
このゲームオブジェクトはCanvas内にない状態で問題ありません。

ヒエラルキー画像

　UIManagerクラスのアサインが必要になりますので、ヒエラルキーにあるUIManagerゲームオブジェクトをドラッグアンドドロップしてアサインします。
これでUIManagerゲームオブジェクトにアタッチされているUIManagerクラスへのアサインが出来ました。

　スクリプト（クラス）をアサインする場合には、ゲームオブジェクトにアタッチされているクラスを指定する必要があります。
スクリプト・ファイルをそのままドラッグアンドドロップしてもアサインできませんので、気を付けてください。

手順動画
https://gyazo.com/44de0fb4ce6aeeec4b12ba35d8c575d2

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

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

　すべての準備が完了しましたので、ゲームを実行して動作を確認していきます。

　まず、GameDataゲームオブジェクトをもう一度確認し、CharaBallHp 変数に値が入っているかを確認します。
この値が手球アイコンの数になるため、複数のスクリプトをまたいで処理を行う場合には、必ず関連するゲームオブジェクトやスクリプトを確認します。
　

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

　
　
　問題なければゲームを実行します。手球アイコンが順番に生成されれば成功です。
また、UIManagerゲームオブジェクトのインスペクターも確認して、IconRemainingBallList 変数の Size が 0 から 3 になり、Listの中身も追加されているか見ましょう。
　

実行動画　手球アイコンが順番に生成される
https://gyazo.com/29ef8fb29bf764f1e5058509abd7b390

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

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

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

印刷する

コメント（0）

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

コメントをかく

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

i-school