スクリプタブル・オブジェクトを活用してアイコン情報を設定する方法

設計

　引き続き、スクリプタブル・オブジェクトを利用した処理の実装を行っていきます。

　前回の手順はこちらです。

　　=>　アイテムの情報をスクリプタブル・オブジェクトに登録して利用する

実装手順

　以下のような順番で実装を行っていきます。

〇１．アイテムの情報を設計する
〇２．スクリプタブル・オブジェクト用の ItemDatasList スクリプトを作成する
〇３．【２】のスクリプタブル・オブジェクトを元に、スクリプタブル・オブジェクトのアセットを作成する
〇４．スクリプタブル・オブジェクトにアイテムの情報(値)を登録する
　５．スクリプタブル・オブジェクトを管理する DataBaseManager スクリプトを作成する
　６．アイコン配置用のゲームオブジェクト、および、アイコン用のゲームオブジェクトを作成する
　７．ItemIconDetail スクリプトを作成する
　８．アイコンのゲームオブジェクトに ItemIconDetail スクリプトをアタッチして設定を行い、プレハブにする

　今回の手順では、【５】～【８】までを扱います。

５．スクリプタブル・オブジェクトを管理する DataBaseManager スクリプトを作成する

　完成したスクリプタブル・オブジェクトは、いずれかのスクリプトで管理を行う必要があります(アセットの扱いですが、スクリプトに変数として宣言できます)

　設計としてましては「生成されたアイテムの ItemBase スクリプトが、自分のアイテムのデータを確認しにいって、スクリプタブル・オブジェクトから情報をもらう」という処理にしたいと思います。

　そこで、どのアイテムからでもアクセスしやすいスクリプトであった方が利便性が高くなります。
またこのようにアクセスするスクリプトを１つにしておくことでアイテム１つずつにスクリプタブル・オブジェクトを登録する必要もなくなります。

　そのためスクリプタブル・オブジェクトを管理する DataBaseManager スクリプトはシングルトンで作成するようにして、アイテムからアクセスが容易な状態で作成を行います。

　C#スクリプトを新しく作成し、名前を DataBaseManager に変更します。
すでにある場合には処理を追加していきましょう。

DataBaseManager.cs

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

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

public class DataBaseManager : MonoBehaviour
{
    public static DataBaseManager instance;    // シングルトン用の変数です

    [SerializeField]
    private  ItemDataSO itemDataSO;            // インスペクターからスクリプタブル・オブジェクトをアサインします


    void Awake() {

        // このゲームオブジェクトをシングルトンにし、かつ、シーン遷移しても破棄されないようにします
        if (instance == null) {
            instance = this;
            DontDestroyOnLoad(gameObject);
        } else {
            Destroy(gameObject);
        }
    }

    /// <summary>
    /// ItemNo からItemData の取得
    /// </summary>
    /// <param name="searchItemNo"></param>
    /// <returns></returns>
    public ItemData GetItemDataFromItemNo(int searchItemNo) {

        return itemDataSO.itemDatasList.Find(x => x.itemNo == searchItemNo);
    }
}

　DataBaseManager は名前のごとく、ゲーム内に登録する情報を一元管理させるための役割を持っています。
現在は、アイテムの情報のデータベース(リスト)であるスクリプタブル・オブジェクトを管理しています。

　処理の内容ですが、GetItemDataFromItemNo メソッドを ItemBase スクリプト内で実行してもらい、
その際に、引数を通じて、アイテムの ItemNo の情報を受け取ります。

　その ItemNo 変数の情報と、ItemDataSO スクリプタブル・オブジェクト内にある各 ItemData の ItemNo を１つずつ順番に照合していき、
同じ番号の ItemNo が見つかったら、その ItemData をアイテムの情報として ItemBase へと提供します。
GetItemDataFromItemNo メソッドが戻り値に ItemData 型を設定しているのはそのためです。

　スクリプトが完成しましたら、ヒエラルキー上で Create Empty を選択して、新しくゲームオブジェクトを作成します。
名前を DataBaseManager に変更します。

　このゲームオブジェクトに DataBaseManager スクリプトをアタッチしてください。
インスペクターを確認し、スクリプトがアタッチされていることを確認できましたら、
ItemDataSO 変数に Datas フォルダにある ItemDataSO スクリプタブル・オブジェクトをアサインしましょう。

　完成すると、次のような画像の状態になります。

インスペクター画像

　以上で設定は完了です。

６．アイコン配置用のゲームオブジェクト、および、アイコン用のゲームオブジェクトを作成する

１．ItemSet ゲームオブジェクトを作成する

　アイテムのアイコンの表示する場所を設定し、管理するためのゲームオブジェクトです。
今回は画面の左下に設定していますが、任意の位置で構いません。

　Canvas ゲームオブジェクトの上で右クリックをしてメニューを開き、Create Empty を選択します。
Canvas の子オブジェクトとして作成されていることを確認します。名前を ItemSet に変更します。
　
　なお、Create Empty ではなく、Image で作成し、アイコンの背景用の画像を設定してもいいでしょう。

ヒエラルキー画像

　アイコンの大きさと隣合うスペースを設定するために、GridLayoutGroup コンポーネントをアタッチして設定をしています。
この機能を利用すると、子オブジェクトに対して、一定のサイズや方向を決めて並べることが出来ます。
今回は横方向に均一の幅で、同じサイズで並べるように設定を行っています。

インスペクター画像

Sceneビュー画像

＜参考サイト＞

Unity スクリプト・リファレンス
GridLayoutGroup
https://docs.unity3d.com/ja/2018.4/ScriptReference...

２．ItemIconDetail ゲームオブジェクトを作成する

　ItemSet ゲームオブジェクトの子オブジェクトとして Image ゲームオブジェクトを作成します。
画像の設定は行いません。

　また、次の手順で ItemIconDetail スクリプトを作成したら、アタッチして設定した上でプレハブにします。

　このゲームオブジェクトがアイテムのアイコンを表示するゲームオブジェクトになります。
画像は設定されていませんので、プレハブからこのゲームオブジェクトを生成した際に、スクリプトを使って
動的に画像を差し替える処理を実装します。

　そのため、１つのゲームオブジェクトではありますが、このゲームオブジェクトを元にして
複数のアイテムのアイコンを作成することになります。

ヒエラルキー画像

インスペクター画像

Sceneビュー画像

７．ItemIconDetail スクリプトを作成する

　
　ItemIconDetail スクリプトを作成します。
新しく ItemData 型の itemData 変数を追加して、アイテムの情報をスクリプタブル・オブジェクトから取得して、ItemIconDetail 内で利用できる状態にします。

　itemData 変数にスクリプタブル・オブジェクトから情報を取得するタイミングは
SetUpItem メソッド内にある TODO の部分を実装していきますので、自分で処理を考えてから教材を確認してみましょう。

＜ItemData を取得するための、スクリプタブル・オブジェクト内の検索・照合の流れ＞

　ItemIconDetail では、ItemData の情報が欲しい。それは ItemDataSO スクリプタブル・オブジェクトに登録されているデータになる
　　　ただし、データベースなので、「どの」ItemData が欲しいかを、検索して照合しなければ、欲しい ItemData が見つからない。

　　　　=>　ItemIconDetail に新しく追加した itemNo 変数を使う。この値を DataBaseManager に作成したメソッドを実行する際に、引数として送る

　 　　 =>  DataBaseManager に登録されている ItemDataSO から、引数として届いた値をつかい ItemNo でスクリプタブル・オブジェクトの各 ItemData を照合する

 　　　 =>  スクリプタブル・オブジェクト内を照合したみつかった ItemData を ItemIconDetail に提供する

　この流れをイメージしてください。

ItemIconDetail.cs

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

using UnityEngine;
using UnityEngine.UI;

public class ItemIconDetail : MonoBehaviour
{
    [SerializeField]
    private Image imgItemIcon;

    private int itemNo;

    /// <summary>
    /// itemNo のプロパティ
    /// </summary>
    public int ItemNo {
        set => itemNo = value; 
        get => itemNo; 
    }

    /// <summary>
    /// 設定
    /// </summary>
    /// <param name="itemNo"></param>
    public void SetUpItemIconDetail(int itemNo) {
        ItemNo = itemNo;
        
        imgItemIcon.sprite = Resources.Load<Sprite>("ItemIcon_" + itemNo);

        // アイコンを非表示
        //SwitchDisplayItemIcon(false);

        // アイコンを半透明にする
        TransparentDisplayItemIcon(0.3f);
    }

    /// <summary>
    /// アイテムアイコンの表示切り替え
    /// </summary>
    /// <param name="isSwitch"></param>
    public void SwitchDisplayItemIcon(bool isSwitch) {
        imgItemIcon.enabled = isSwitch;
    }

    /// <summary>
    /// アイテムアイコンの透明度の切り替え
    /// </summary>
    /// <param name="alpha"></param>
    public void TransparentDisplayItemIcon(float alpha) {
        imgItemIcon.color = new Color(1.0f, 1.0f, 1.0f, alpha);
    }
}

８．アイコンのゲームオブジェクトに ItemIconDetail スクリプトをアタッチして設定を行い、プレハブにする

　ItemIconDetail スクリプトを作成したらヒエラルキーにある ItemIconDetail ゲームオブジェクトにドラッグアンドドロップしたアタッチします。
その後、ItemIconDetail ゲームオブジェクトをプレハブにしてから、ヒエラルキーより削除します。

　このスクリプトの役割は、ItemIconDetail ゲームオブジェクトの制御を行うことです。
アイテムのアイコン画像を設定したり、画像の表示を切り替えたりするために必要な変数やメソッドを作成しています。

　ItemIconDetail ゲームオブジェクトには画像の設定がありません。
そのため、画像はゲーム内で動的に差し替えを行います。そのための処理として Resources.Load メソッドを利用しています。

　以上で設定は完了です。

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

　実際に正常に動作するかを、ゲームを実行して確認してみてください。

　アイコン表示される際に、自動的にアイコン画像が切り替われば制御成功です。

スクリプタブル・オブジェクトから画像を取得する方法に切り替える

　
　現在は ItemData の ItemNo から Resouces フォルダよりアイコンの画像を取得していますが、
こちらをスクリプタブル・オブジェクトから取得するように変更してみてください。

　ItemData には画像ファイルを登録するための変数がありませんので、
新しく pulbic Sprite iconSprite 変数を追加しましょう。
そうすることにより、スクリプタブル・オブジェクトにインスペクターからアイコン画像を登録出来るようにします。

　ただしこれだけでは画像を取得できないため、ItemIconDetail クラスを修正し、
Resouces から取得している部分を、ItemData の iconSprite から取得する方式に変えてみましょう。

imgItemIcon.sprite = Resources.Load<Sprite>("ItemIcon_" + itemNo);  // イコールの右辺を変える

　DataBaseManager クラスに用意している GetItemDataFromItemNo メソッドを活用し、ItemData を取得して IconSprite を参照してください。

　デバッグにおいては、ゲーム内でアイコン表示される際に、自動的にスクリプタブル・オブジェクトに登録した画像に切り替われば制御成功です。
改めてスクリプタブル・オブジェクトの登録された画像を変更して、画像が変化するかを確認しておいてください。

　この手順は以上です。

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

印刷する

コメント（0）

スクリプタブル・オブジェクトを活用してアイコン情報を設定する方法 - i-school 先頭へ

コメントをかく

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

i-school