キャラボタンプレファブを生成して、データベースを使って振る舞いを変える

設計

　プレファブを生成した際に、データベースに登録してある情報を元にして振る舞い(ボタンの役割)を変更する機能を追加します。
この機能を実装することで、ボタンを動的に生成し、それぞれに適した役割を与えます。
すべて同じ１つのプレファブを元に生成していますが、イメージや各スキルの設定が異なっているのが分かります。

※　参考動画１(生成。イメージが自動で変更されている)
https://gyazo.com/9f19d3df9b0ee45e9647bf47f448ff51

※　参考動画２(生成後、ボタンの各スキルが自動で設定されている)
https://gyazo.com/ee0fa945097140fdc3590bd21b6bfc84

　まずはプレファブを用意します。親オブジェクトにButtonとImageコンポーネントとChooseCharacterスクリプト、子オブジェクトにTextコンポーネントを持つものです。
こちらのChooseCharacterスクリプトを通じてデータベースの情報を検索して、キャラのイメージの差し替えや、スキルの情報などを反映できるような設計にします。

　データベースについては簡易的なもので問題ありませんので、今回はGameDataスクリプト内にデータベースの役割を持たせるようにします。
GameDataスクリプトはシングルトンクラスであるため、いずれのスクリプトからであってもアクセスが容易であるからです。

　こちらにCharaDataとSkillDataというデータの基本情報を作成して、これをリストにて管理します。
CharaDataとSkillDataには１つずつ情報が登録できますので、例えばキャラを3体登場させたいのであれば、CharaDataを3つ作成して登録する必要があります。
SkillDataも同様です。

　各データをリストにして管理することで、データの集合体であるデータベースとしての役割をもつことが出来ます。
こうすることで必要なデータを検索して照合して取得する流れが実装できます。

　データベースの登録が済んだら、次はボタンを生成する処理を作成します。こちらは必要な数のボタンを生成し、番号を与えて、初期設定をするように促します。

　最後に生成された各ボタンが、与えられた番号を元にGameDataスクリプトにあるデータベースにアクセスし、照合をして、ボタンとしての振る舞いを確定します。

　全体の処理の流れは

GameDataに事前にキャラデータとスキルデータを登録する => ゲーム実行時にボタン生成を行う => 生成されたボタンがデータベースを元に振る舞いを変える

　
　という処理になります。

実装手順と学習内容

　以下の手順で実装を行います。

１．Canvas内にキャラボタンを生成する位置を設定する
２．GameDataスクリプトを修正する
３．GameDataゲームオブジェクトのインスペクターからキャラデータとスキルデータを登録する
４．CharaButtonGeneratorスクリプトを新しく作成する
５．ChooseCharacterスクリプトを修正する
６．各スクリプトのアタッチされているゲームオブジェクト(プレファブ)のアサイン情報を登録する

　新しく学習できる技術です。(【i】)の番号は学習する手順の番号です。

・HorizontalLayoutGroupコンポーネントの使い方(【１】)
・入れ子クラスによるデータ作成(【２】)
・クラスのリスト化によるデータベース作成(【２】)
・[System.Serializable]属性の使い方（【２】）
・foreach構文とif文の組みあわせによるデータの照合処理(【５】)
・Resorces.Loadによるイメージの動的な差し替え(【５】)

１．Canvas内にキャラボタンを生成する位置を設定する

　Canvas内で右クリックをして Create Empty を選択し、名前を CharaTran に変更します。位置は下記のインスペクターの画像を参考に調整してください。
この位置にキャラボタンを生成します。ただし、このままですと複数のボタンがすべて同じ位置に生成されてしまうため、整列させる必要があります。

CharaTranの位置とインスペクター設定

<HorizontalLayoutGroup>

　CharaTranのインスペクターから Add Component を選択し、HorizontalLayoutGroup をアタッチします。
このコンポーネントは、このコンポーネントの子であるゲームオブジェクトの位置情報を水平方向に向かって一列に整列して並べる機能を持っています。

　まずはSpacing の値を 50 にします。これは子オブジェクト同士が保つ（空ける）距離間隔です。0にすると完全に隣あって並びます。
今回はボタンを並べるため、あまり近いとボタンを押しにくいので、ある程度の距離を空けるためにこの設定を行います。値については適宜調整してください。

　続いて Child Alignment を Middle Center に設定します。これはボタンが並び始める位置の設定です。今回の設定では真ん中 + 真ん中から並ぶようになります。

　他にも設定項目はありますが、今回は以上です。他の部分については、公式のリファレンスや詳細サイトを確認して機能を確認しておいてください。
UIの設定は多岐に渡りますが、これらを上手く活用することでデザイン的にも優れたゲームUIを製作することが可能になります。

Unity公式リファレンス
Horizontal Layout Group
https://docs.unity3d.com/ja/2019.4/Manual/script-H...　

　
　以上でCharaTranについては終了です。Canvasの中にないと上手くボタンが生成されませんので、
CharaTaranがRectTransformコンポーネントを持っているか確認しておいてください。持っていなければ、最初からこの手順を繰り替えて作成し直してください。

２．GameDataスクリプトを修正する

　
　新しくクラスを２つ作成します。１つはCharaDataクラスで、キャラの情報を扱います。もう１つはSkillDataクラスでスキルの情報を扱います。
またこれらを管理するためのリストもそれぞれ作成します。

GameData.cs

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

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

public class GameData : MonoBehaviour
{
    public static GameData instance;
    public enum SkillType
    {
        Timer,
        ChangeColor,
        DeleteBall,
    }
    public SkillType skilltype;

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

    /// <summary>
    /// キャラデータ(1体分)
    /// </summary>
    [System.Serializable]
    public class CharaData
    {
        public string name;           // 名前
        public int charaNo;           // 通し番号。検索と画像の設定に使用
        public int skillNo;           // 所持スキルの番号。検索に使用
    }
    // キャラデータのリスト(３体分)
    public List<CharaData> charaDataList = new List<CharaData>();

    /// <summary>
    /// スキルデータ(１つ分)
    /// </summary>
    [System.Serializable]
    public class SkillData 
    {
        public int skillNo;           // 所持スキルの番号。検索に使用
        public SkillType skillType;   // スキルのタイプ
        public string description;    // スキルの説明文
    }
    // スキルデータのリスト(３つ分)
    public List<SkillData> skillDataList = new List<SkillData>();

    // キャラボタン生成用クラス
    public CharaButtonGenerator charaButtonGenerator;

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

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

        } else {
            Destroy(gameObject);
        }
        // キャラボタンの生成
        charaButtonGenerator.GenerateCharaButtons(charaDataList.Count);　　// <=　☆　追加
    }   
}

＜入れ子クラスによるデータ作成＞

　新しくCharaDataというクラスとSkillDataというクラスを作成しています。このように、１つのクラスの中に別のクラスを用意することが出来ます。
このような構造を入れ子クラス（ネスト・クラス）と言います。

　別のスクリプトを作ってそれぞれにCharaDataとSkillDataを作成していないのは、データ用のクラスが増えることでファイルが増えて煩雑になるのを防ぐためです。
またGameDataクラスはシングルトンパターンで作成されていますので、これらのクラスもこのGameDataクラス内にあることで同様にアクセスが容易になります。

＜クラスのリスト化によるデータベース作成＞

　CharaDataクラスとSkillDataクラスは、それぞれ１つのデータ情報を扱うことが出来ます。キャラであれば1体分、スキルであれば1つ分の情報です。
そのため複数のキャラやスキルが必要な場合には、その分だけCharaDataとSkillDataを追加して作成しなければなりません。

　それらを管理するためにListを作り、まとめて管理を出来るようにしています。(1つ1つ個別に存在していたのでは管理していることにはなりません)
CharaDataのリストとはすなわち、CharaDataをまとめて扱っているデータの集合体になりますので、ここにデータベースとして役割を成立させることが出来ます。

[System.Serializable（シリアライザブル）]属性

　各クラスの1行上には上記の宣言があります。[ ]で宣言された設定値は「属性」と呼ばれる情報になり、特別な意味を持ちます。
今回利用している[System.Serializable]属性は、Systemに含まれている設定値であり、こちらを宣言することで入れ子クラスの情報をインスペクターに表示することが出来ます。
これを書き忘れてしまうと、インスペクターにCharaDataとSkillDataが表示されず、データをインスペクターから登録することが出来ません。

３．GameDataゲームオブジェクトのインスペクターからキャラデータとスキルデータを登録する

　GameDataスクリプトの修正が終わりましたら、GameDataゲームオブジェクトを選択し、インスペクターを確認します。
[System.Serializable]属性が各クラスで宣言されていれば、下記の画像のような状態になります。

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

　こちらのCharaDataListとSkillDataListがデータベースです。各データを１つずつ登録できます。
現在はどちらもSizeが 0 になっていますので、こちらをゲームに登録するデータの数に変更します(Size 0 => 3へ変更)

　すると各Listの下にElement情報が、指定した値の分だけ追加されます。Elementの番号は0から始まります。

　こちらに適宜な情報を登録してください。これがゲームで使用するキャラとスキルのデータになります。
番号だけは0から順番に重複しないように登録してください。この番号を元にデータを照合が行われるため、重複した番号を用意すると処理が正常に動きません。
(CharaDataとSkillDataでは番号は重複しませんので、それぞれ0からスタートして問題ありません。あくまでも同じリストのデータ内に重複しないようにしてください)

キャラデータ(サンプルです)

スキルデータ(サンプルです)

４．CharaButtonGeneratorスクリプトを新しく作成する

　新しくCharaButtonGeneratorスクリプトを作成します。
こちらはGameDataスクリプトから命令を受けて、指定された数のキャラボタンをキャラボタンプレファブから生成し、設定メソッドを呼び出します。
その際、検索用の番号を渡しています。

CharaButtonGenerator.cs

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

public class CharaButtonGenerator : MonoBehaviour
{
    [Header("キャラボタンのプレファブ")]
    public ChooseCharacter charaButtonPrefab;

    [Header("キャラボタンの生成位置")]
    public Transform charaTran;

    /// <summary>
    /// キャラボタンの生成
    /// </summary>
    /// <param name="count">生成する数 = キャラデータの数</param>
    public void GenerateCharaButtons(int count) {
        // キャラデータの数だけボタンを生成する
        for (int i = 0; i < count; i++) {
            // キャラボタンを生成して配置(HorizontalLayoutGroupによって横方向に整列する)
            ChooseCharacter charaButton = Instantiate(charaButtonPrefab, charaTran, false);
            
            // キャラボタンの設定
            charaButton.SetUpCharaButton(i);　　　　// ChooseCharacterスクリプト修正前には該当のメソッドがないためエラーが出ます。
        }
    }
}

　作成が終了したら、ヒエラルキー上で Create Empty して同名のゲーオブジェクトを作成し、それにCharaButtonGeneratorスクリプトをアタッチします。
このゲームオブジェクトはCanvas内にある必要はありません。（Canvasで行う処理がないためです。）

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

　
　最後にChooseCharacterスクリプトを修正します。ImageとTextコンポーネントへのアクセスするために変数を用意しています。
Imageは画像を差し替えるために、Textはスキルの説明を表示するために必要です。

　キャラボタン生成時に、CharaButtonGeneratorスクリプトからSetUpCharaButtonメソッドが呼び出されます。
この中で引数として受け取った番号を使って、このボタンがどのデータを使うのかを照合し、合致したデータの内容でImageやText、SkillTypeの変更をします。

ChooseCharacter.cs

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

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

public class ChooseCharacter : MonoBehaviour
{
    [Header("キャラの所持スキル")]
    public GameData.SkillType charaSkillType;

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

    [Header("キャラのイメージ")]
    public Image charaImage;

    [Header("スキルの説明表示")]
    public Text skillDescription;

    /// <summary>
    /// キャラボタンの設定
    /// </summary>
    /// <param name="no"></param>
    public void SetUpCharaButton(int no) {
        // 検索①キャラデータ
        foreach (GameData.CharaData charaData in GameData.instance.charaDataList) {
            // キャラデータの番号とnoの番号を照合してキャラを特定
	    if (charaData.charaNo == no) {
		// イメージの設定
		charaImage.sprite = Resources.Load<Sprite>("chara_" + charaData.charaNo);

　　　　　　　　// 検索②スキルデータ
	        foreach (GameData.SkillData skillData in GameData.instance.skillDataList) {
  		    // スキルデータのskillNoとキャラのskillNoを照合してスキルを特定
		    if (skillData.skillNo == charaData.skillNo ) {
		        // スキルタイプ設定
			charaSkillType = skillData.skillType;

			// スキルの説明設定
			skillDescription.text = skillData.description;
			break;
	  	    }
		}
		break;
	    }
        }
    }

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

    /// <summary>
    /// キャラ選択時の処理。スキルの設定
    /// </summary>
    public void OnClickChooseSkill()
    {
	GameData.instance.skilltype = charaSkillType;
	SceneManager.LoadScene("tumutumu");
    }
}

＜foreach構文とif文の組みあわせによるデータの照合処理＞

　データベースを照合する際にはforeach(フォーイーチ)構文を利用します。これは配列やリストといった「コレクション」と呼ばれるデータ構造のものを扱い、
そのコレクション内の情報を１つずつ取り出して繰り返し処理を行う構文です。例えば、CharaDataを扱うリストに3つの要素(情報)がある場合には
この3つの情報を順番に取り出して、すべて取り出すまで繰り返して処理を行うものです。

　この機能を利用して取り出された1つの情報に対してif文によって、取り出された情報と照合している情報とが合致するかを確認しています。

＜Resorces.Loadによるイメージの動的な差し替え＞

　
　foreach文の中で、次のような処理があります。

// イメージの設定
charaImage.sprite = Resources.Load<Sprite>("chara_" + charaData.charaNo);

　こちらはUnityの持つ機能を利用した処理です。

　UnityでProject内にフォルダを作成した際、その名称によって特別な役割が与えられるフォルダがいくつかあります。
今回利用しているResorcesがこちらに当たります。このResorcesフォルダの中にあるデータについては、ゲーム内でのロードが実行出来るようになっています。

　この機能を利用して、ボタンのイメージ用のキャラ絵をResorcesフォルダに配置し、ゲーム内でロードを行ってスクリプトから動的にイメージを差し替えています。

Resources.Load<Sprite>("chara_" + charaData.charaNo);

　Resorces.Loadという命令で処理を行います。戻り値を持つため、この処理結果が左辺の変数に戻り、画像が変更されます。

　<>の部分には、ロードをしたい型を指定します。今回はImageコンポーネントのSpriteを変更したいため、こちらの型の部分を<Sprite>に指定しています。

　()の引数には文字列でパスを指定します。これは、Resourcesフォルダ内の対象のファイル名を探して見つかったファイルを読み込みます。
Resourcesフォルダ内に他にもフォルダがある場合にはスラッシュで区切ってディレクトリを指定することで処理できます。

　今回はResourcesフォルダ内に直接ボタンのイメージを配置してください。
また名称も画像のように、chara_0 ～ chara_2 のようにファイル名+番号という名前で付け直してください。

　これは先ほどの検索先のパスとファイル名を合わせるためです。

例えば、charaData.charaNoの値が1の場合には、以下の命令が処理されます。

Resources.Load<Sprite>("chara_" + 1);

　これはつまり、Resourcesフォルダ内にある、chara_1 という名前のファイルを探しに行ってロードを行う、という処理になります。

　この処理は万が一、ロードに失敗してもエラーが出ることがありませんので、実行してみてイメージの差し替えが上手くいかない場合には
パスの指定が間違っていないかどうかを確認してください。

５．各スクリプトのアタッチされているゲームオブジェクト(プレファブ)のアサイン情報を登録する

　すべてのスクリプトが準備できましたので、各ゲームオブジェクトのインスペクターを確認してアサイン情報を登録してください。
ボタンのプレファブの場合にはOpenPrefabして、自分の持つ各コンポーネントをアサインしてください。

GameDataゲームオブジェクト(撮影用に各リストは閉じていますが、それぞれ３こずつデータの登録があります。CharaButtonGeneratorはヒエラルキーからアサイン)

CharaButtonGeneratorゲームオブジェクト(PrefabはProject内のCharaButtonプレファブ、CharaTranはヒエラルキーのCanvas内のCharaTranをアサイン)

CharaButtonのプレファブ

　以上で完了です。Canvasの中にあるボタンのプレファブを削除してください。

　ゲームを実行し、CharaTranの中にCharaButton(Clone)が3つ生成されるか確認します。
このとき、ボタンの各イメージがすべて別のイメージになり、SkillTypeも自動的に設定されていれば問題ありません。

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

印刷する

コメント（0）

キャラボタンプレファブを生成して、データベースを使って振る舞いを変える - i-school 先頭へ

コメントをかく

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

i-school