２Ｄ放置ゲーム　手順２５

　引き続き、アルバム機能の実装を設計して組み込んでいきます。

　前回までの手順でアルバム用のポップアップの生成処理は出来ましたので、
この手順では、アルバム用のポップアップ内に、獲得している褒賞の数だけサムネイル用のゲームオブジェクトを自動生成する処理を実装します。
　
　このサムネイル用のゲームオブジェクトは１つずつがボタン機能を付与します。
タップしたサムネイルの褒賞に合わせてポップアップに表示される画像が変化するようになるようにします。

　この手順にて、アルバムの機能の実装は終了となります。
ここではサムネイルをタップした際にポップアップの画像のみ変化しますが、同じタイミングで他の情報をゲーム画面に反映させることも出来ますので挑戦してみてください。

＜アルバム機能　完成動画＞

動画ファイルへのリンク

手順２５　－アルバム機能のポップアップの生成に合わせて獲得している褒賞をサムネイル表示する機能の実装－

４４．サムネイル用の btnRewardDetail ゲームオブジェクトと RewardDetail スクリプトを作成する
４５．AlbumPopUp スクリプトを修正し、アルバム機能のポップアップの生成に合わせて獲得している褒賞をサムネイル表示する処理を実装する

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

　・スクリプトの引数を利用して、１つのゲームオブジェクトの振る舞いを変えて、異なる役割を与える方法

４４．サムネイル用の btnRewardDetail ゲームオブジェクトと RewardDetail スクリプトを作成する

１．設計

　アルバム用のボタンをタップするとアルバムポップアップが生成される処理までを実装することができました。
残っている処理を確認し、順番に実装を行っていきます。

＜アルバム機能の実装＞

　〇獲得した褒賞の情報を表示してプレイヤーに伝えるためのアルバムのポップアップ・ゲームオブジェクトと、そのゲームオブジェクトを制御するスクリプト
　〇アルバム用のボタンの作成。このボタンをタップした際に、アルバムのポップアップ・ゲームオブジェクトを生成する処理
　◆獲得している褒賞に合わせて、その褒賞の情報を管理して、アルバムのポップアップ内に表示するためのサムネイル用のゲームオブジェクトと、そのゲームオブジェクトを制御するスクリプト(褒賞１種類につき１つ生成)
　・アルバムのポップアップを制御するスクリプトを修正し、サムネイル用のゲームオブジェクトの生成処理と、サムネイル用のゲームオブジェクトをタップしたら、そのサムネイルの褒賞のデータをポップアップに反映する処理を追加

　生成されたアルバムポップアップにはまだ獲得している褒賞をサムネイルとして表示する機能がありません。
まずは、そのサムネイル用画像の設定を持つゲームオブジェクトを作成し、それを制御するためのスクリプトも合わせて作成しておきます。

２．＜スクリプトの引数を利用して、１つのゲームオブジェクトの振る舞いを変えて、異なる役割を与える方法＞

　サムネイル用のゲームオブジェクトはプレーンな状態で作成し、生成されたときも同じくプレーンな状態です。
よって、画像などの設定はない状態で生成されます。

　そのままでは、真っ白なゲームオブジェクトが複数並んでしまうことになりますので、
特定の画像を最初から用意して生成するのではなく、１つのサムネイル用ゲームオブジェクトを生成した際に
適宜な情報を与えることにより、別のサムネイル用ゲームオブジェクトとして振る舞わせるようにします。

　このような設計にしておくことにより、褒賞の種類が増えても、それを利用するサムネイル用ゲームオブジェクトは１つあれば
振る舞いを変えるだけで対応することが出来るようになります。

＜褒賞１つにつき１つの別のゲームオブジェクトを作ると…＞

　・同じ設計のゲームオブジェクトをたくさん作る必要がある
　・１つずつゲームオブジェクトをみながら、情報を手動で登録していく必要がある
　・新しい褒賞が増えると、その都度、ゲームオブジェクトを作成していく必要がある

　つまり、管理するにも運用していくにも、非常に使いにくい設計になります。
これを、１つのゲームオブジェクトを作成し、それを振る舞いを変えることで対応させると、つぎのようになります。

＜１つのゲームオブジェクトを振る舞いを変えるようにすると…＞

　・生成するゲームオブジェクトは１つだけ　　　　　　　　　　　　　=>　同じ設計のゲームオブジェクトをたくさん作る必要がない
　・生成したゲームオブジェクトにスクリプトを使って情報を設定する　=>　１つずつゲームオブジェクトをみながら、情報を手動で登録していく必要がない
　・褒賞のデータを自動的に読み込むようにできる　　　　　　　　　　=>　新しい褒賞が増えても、その都度、ゲームオブジェクトを作成していく必要がない

　このような設計に変更になります。どちらがより優れた設計かは一目瞭然です。

　スクリプトを利用することにより、１つのゲームオブジェクトをベースとし、「異なる役割を持つ、同種のゲームオブジェクト」を作成することが可能になります。
この設計手法をしっかりと学習して覚えていってください。

　こういった方法でないと、扱う情報が増えたときに対応しきれなくなります。また、手動で登録しているため、登録間違いを起こしやすくもなります。

３．btnRewardDetail ゲームオブジェクトを作成する

　サムネイル用ゲームオブジェクトは AlbumPopUp ゲームオブジェクト内にある
Content ゲームオブジェクトの子オブジェクトとして作成を行っていきます。

　この Content ゲームオブジェクトの子オブジェクトとしてゲームオブジェクトを作成することにより、
ポップアップ内に一覧表示されるようになります。

　また、同時に ScrollView ゲームオブジェクトの管理下になり、一覧表示されたサムネイル用ゲームオブジェクトが
枠外に生成されるような場合にはスクロール機能を利用して、一覧をスクロール表示させることが出来るようになります。

　サムネイル用ゲームオブジェクトの作成のため、プレファブの AlbumPopUp ゲームオブジェクトを Canvas ゲームオブジェクトの子オブジェクトとして設置します。

ヒエラルキー画像

　Content ゲームオブジェクトを選択した状態で右クリックをしてメニューを開き、UI => Button を選択します。
Button コンポーネントがアタッチされているゲームオブジェクトが作成されますので、名前を btnRewardDetail に変更します。

　プレファブのゲームオブジェクトに対して、新しいゲームオブジェクトが追加されるとアイコンの形状が変わります。

ヒエラルキー画像

インスペクター画像

Sceneビュー画像

　Content ゲームオブジェクトには Grid Layout Group コンポーネントがアタッチされていますので、
子オブジェクトとして作成された btnRewardDetail ゲームオブジェクトのサイズは自動的に調整されます。

　サイズを変更したり、子オブジェクトのゲームオブジェクト間のスペースを変更したりする場合には
Grid Layout Group コンポーネントにて変更を行います。

　自分のイメージしているサイズになるように変更してみてください。

　このコンポーネントによって自動的に調整されるので、btnRewardDetail ゲームオブジェクト側ではインスペクターでサイズを変更できません。

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

btnRewardDetail ゲームオブジェクト　インスペクター画像　Width と Height の値が Grid Layout Group コンポーネントの Cell の設定値になっている

　今回は btnRewardDetail ゲームオブジェクトに対して設定を行う項目は画像の情報のみです。
そのため、btnRewardDetail ゲームオブジェクトの Image コンポーネントがあれば問題ありません。

　それ以外の情報をサムネイルとして設定したい場合には、子オブジェクトを追加してください。

　以上で完成です。

４．RewardDetail スクリプトを作成する

　btnRewardDetail ゲームオブジェクトを制御するためのスクリプトを作成します。

　制御する内容としては、次の通りです。
以下のように、自分が考えている処理を言葉として記述すると、イメージがしやすくなりますので、実践してみましょう。

＜生成時＞

　やりたいこと　=>　生成された btnRewardDetail ゲームオブジェクトの設定を行って、画像を変更したい
　設計　　　　　=>　AlbumPopUp スクリプトによって生成されるので、その際に RewardDetail スクリプト側にメソッドを用意しておいて、
　　　　　　　　　　　そのメソッドの引数を通じて受け取った RewardData クラスの情報を利用し、サムネイル用画像の設定を行う

＜押下時＞

　やりたいこと　=>　btnRewardDetail ゲームオブジェクトのサムネイル画像をアルバムポップアップの画像に反映して変更したい
　設計　　　　　=>　RewardDetail スクリプトで管理している RewardData クラスの情報をメソッドを通じて AlbumPopUp スクリプトに渡し、アルバムポップアップの画像をタップしたサムネイルの画像に変更する
　　　　　　　　　　そのため、AlbumPopUp スクリプト側にメソッドを準備する必要がある

　これらの制御を行うためには、どのような型の変数の準備が必要で、どのようなメソッドの処理があればよいのか、１つずつ考えてみてください。
また、btnRewardDetail ゲームオブジェクトに子オブジェクトを追加している場合には、制御用の変数や処理を追加する必要があります。

RewardDetail.cs

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

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


public class RewardDetail : MonoBehaviour
{
    [SerializeField]
    private Image imgReward;

    [SerializeField]
    private RewardData rewardData;

    [SerializeField]
    private Button btnRewardDetail;

    private AlbumPopUp albumPopUp;

    /// <summary>
    /// RewardDetail の設定
    /// </summary>
    /// <param name="rewardData"></param>
    /// <param name="albumPopUp"></param>
    public void SetUpRewardDetail(RewardData rewardData, AlbumPopUp albumPopUp) {
        this.rewardData = rewardData;
        this.albumPopUp = albumPopUp;

        imgReward.sprite = this.rewardData.spriteReward;

        btnRewardDetail.onClick.AddListener(OnClickRewardDetail);
    }

    /// <summary>
    /// btnRewardDetail をおした際の処理
    /// </summary>
    public void OnClickRewardDetail() {
        //albumPopUp.DisplayReward(rewardData.spriteReward);      // 　<=　このメソッドが AlbumPopUp スクリプト側にないため、エラーが出ます。準備後にコメントアウトを解除してください
    }
}

　スクリプトを作成したらセーブします。

　自分でコメントを書いて、処理を読み解く練習を行いましょう。

５．btnRewardDetail ゲームオブジェクトに RewardDetail スクリプトをアタッチして設定を行い、プレファブにする

　ヒエラルキーにある btnRewardDetail ゲームオブジェクトに、作成した RewardDetail スクリプトをドラッグアンドドロップしてアタッチしてください。

　btnRewardDetail ゲームオブジェクトのインスペクターを確認し、SerializeField 属性にて宣言している変数が２つ表示されていますので、
こちらに、btnRewardDetail ゲームオブジェクト内から、必要な情報を持つゲームオブジェクトをアサインしてください。

インスペクター画像

　アサインが終了したら、このゲームオブジェクトだけをプレファブにしてください。

６．btnRewardDetail ゲームオブジェクトを複製して複数並べて、一覧表示時の状態を確認する

　btnRewardDetail ゲームオブジェクトをヒエラルキーで選択して右クリックをしてメニューを開き、Duplicate を選択するか、キーボードの ctrl + D を押して複製します。
たくさん複製して、問題なく並ぶかを確認しておきます。
　

ヒエラルキーと Sceneビュー画像

Game ビュー画像

　サイズについては btnRewardDetail ゲームオブジェクトは Content ゲームオブジェクトにある Grid Layout Group コンポーネントの管理下にあります。
そのため先ほども解説したように、btnRewardDetail ゲームオブジェクト自体ではサイズの変更が行えません。

　サイズを変更したり、各ゲームオブジェクト間のスペースの設定などは、Grid Layout Group コンポーネントにて設定を行って、
自分の考えているイメージに沿った並びになるように調整を行ってください。

　調整が終了したら、 AlbumPopUp ゲームオブジェクトごと削除してください。

　以上で btnRewardDetail ゲームオブジェクトの完成です。

４５．AlbumPopUp スクリプトを修正し、アルバム機能のポップアップの生成に合わせて獲得している褒賞をサムネイル表示する処理を実装する

１．設計

　アルバム機能に関しての最後の実装手順になります。

＜アルバム機能の実装＞

　〇獲得した褒賞の情報を表示してプレイヤーに伝えるためのアルバムのポップアップ・ゲームオブジェクトと、そのゲームオブジェクトを制御するスクリプト
　〇アルバム用のボタンの作成。このボタンをタップした際に、アルバムのポップアップ・ゲームオブジェクトを生成する処理
　〇獲得している褒賞に合わせて、その褒賞の情報を管理して、アルバムのポップアップ内に表示するためのサムネイル用のゲームオブジェクトと、そのゲームオブジェクトを制御するスクリプト(褒賞１種類につき１つ生成)
　◆アルバムのポップアップを制御するスクリプトを修正し、サムネイル用のゲームオブジェクトの生成処理と、サムネイル用のゲームオブジェクトをタップしたら、そのサムネイルの褒賞のデータをポップアップに反映する処理を追加

　AlbumPopUp スクリプトを確認してみてください。TODO の記述がたくさんあります。
この部分を実装し、加えて、先ほど作成した RewardDetail スクリプト側から呼び出してもらい、画像の情報を受け取るためのメソッドを作成します。
その際には、ポップアップの画像の情報を変更する必要がありますので、新しく画像を制御するための変数の宣言も追加します。

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

　設計に基づき、実装したい処理をイメージします。TODO とも照らし合わせて、どのような処理が必要か検討します。

　・サムネイル用のゲームオブジェクトの生成処理
　・サムネイル用のゲームオブジェクトをタップしたら、そのサムネイルの褒賞のデータをポップアップに反映する処理

　生成処理の部分は TODO の処理になります。また、この中で生成された btnRewardDetail ゲームオブジェクトの RewardDetail スクリプトに対して、
褒賞の情報を１つずつメソッドを通じて渡す必要があります。

　例えば獲得している褒賞が３種類ある場合、btnRewardDetail ゲームオブジェクトの生成処理は３回必要になり、
RewardDetail スクリプトに対しての命令処理の１回ずつ必要になります。

　このとき、RewardDetail スクリプトに対しての命令は毎回同じ内容だと、生成されたサムネイルのゲームオブジェクトの画像が全部同じ内容の画像になってしまいます。
そのため、命令に際しては「どの褒賞のデータ(RewardData クラス)を使ってサムネイルのゲームオブジェクトの設定を行うようにするのか」を指定してあげる必要があります。

　そうすることにより RewardDetail スクリプト側にとどく RewardDeta クラスの情報が変化するため、
それを画像として設定することにより、同じ btnRewardDetail ゲームオブジェクトを３つ生成するが、それぞれが異なる情報を持つゲームオブジェクトとして振る舞うようになっています。

　設定するための褒賞の情報は RewardData クラスを取得しなければ利用できません。この処理も動的に毎回実行される設計にします。
今回は GameManager クラスに前回の手順で作成して準備した GetRewardDataFromRewardNo メソッドを利用して、RewardDetail スクリプトに設定されている褒賞の通し番号と
RewardDataSO スクリプタブル・オブジェクト内にある各 RewardData の rewardNo とを照合して、対象となる RewardData クラスの情報を取得する処理を実装しています。

AlbumPopUp.cs

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

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

public class AlbumPopUp : MonoBehaviour
{
    private Vector3 closePos;

    [SerializeField]
    private Button btnClose;


////*  ここから変数の宣言を追加  *////


    [SerializeField]
    private Image imgReward;

    [SerializeField]
    private RewardDetail rewardDetailPrefab;

    [SerializeField]
    private Transform rewardDetailTran;

    [SerializeField]
    private List<RewardDetail> rewardDetailsList = new List<RewardDetail>();


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


    /// <summary>
    /// AlbumPopUp の設定と表示
    /// </summary>
    public void SetUpAlbumPopUp(GameManager gameManager, Vector3 centerPos, Vector3 btnPos) {

　　　　// ポップアップの位置をボタンの位置に設定
        transform.position = btnPos;

　　　　// 最後にポップアップを閉じる際に利用するために、現在の位置(ボタンの位置)を保持
        closePos = transform.position;

　　　　// ボタンを押した際に処理したいメソッドを登録
        btnClose.onClick.AddListener(OnClickCloseAlbum);

　　　　// ゲームオブジェクトのサイズを 0 にして見えない状態にする
        transform.localScale = Vector3.zero;

        // Sequence を初期化して利用できる状態にする
        Sequence sequence = DOTween.Sequence();

　　　　// ポップアップをボタンの位置から画面の中央(Canvas ゲームオブジェクトの位置)に移動させつつ
        sequence.Append(transform.DOLocalMove(centerPos, 0.3f).SetEase(Ease.Linear));

　　　　// ポップアップを徐々に大きくしながら表示。指定したサイズになったら、元のポップアップの大きさに戻す
        sequence.Join(transform.DOScale(Vector2.one * 1.2f, 0.5f).SetEase(Ease.InBack)).OnComplete(() => { transform.DOScale(Vector2.one, 0.2f); });


////*  ここからTODO の処理を実装  *////


　　　　// 獲得している褒賞の数だけサムネイル用のゲームオブジェクトの生成処理を繰り返す
        for (int i = 0; i < GameData.instance.GetEarnedRewardsListCount(); i++) {

            // 獲得している褒賞用のゲームオブジェクト(サムネイル用)を生成
            RewardDetail rewardDetail = Instantiate(rewardDetailPrefab, rewardDetailTran, false);

            // サムネイル用のゲームオブジェクトに利用する褒賞のデータを取得して設定（RewardNo から RewardData を取得して RewardDetail を設定）
            rewardDetail.SetUpRewardDetail(gameManager.GetRewardDataFromRewardNo(i), this);

            // 初期画像の設定（最初の RewardDetail を初期画像に設定）
            if (rewardDetailsList.Count == 0) {
                imgReward.sprite = gameManager.GetRewardDataFromRewardNo(i).spriteReward;
            }

            // 褒賞一覧の List に登録
            rewardDetailsList.Add(rewardDetail);
        }


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


    }

    /// <summary>
    /// アルバムポップアップを閉じる
    /// </summary>
    private void OnClickCloseAlbum() {

        // Sequence を初期化して利用できる状態にする
        Sequence sequence = DOTween.Sequence();

　　　　// ポップアップの大きさを徐々に 0 にして見えない状態にさせつつ
        sequence.Append(transform.DOScale(Vector2.zero, 0.3f).SetEase(Ease.Linear));

　　　　// それに合わせてポップアップをアルバムボタンの位置に移動させる。移動後にポップアップを破棄
        sequence.Join(transform.DOMove(closePos, 0.3f).SetEase(Ease.Linear)).OnComplete(() => { Destroy(gameObject); });
    }


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


    /// <summary>
    /// アルバム一覧で選択された褒賞の画像をポップアップに表示
    /// </summary>
    public void DisplayReward(Sprite spriteReward) {
        imgReward.sprite = spriteReward;
    }


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


}

　スクリプトを修正したらセーブします。

３．AlbumPopUp ゲームオブジェクトの設定を行う

　Prefabs フォルダにある AlbumPopUp ゲームオブジェクトを選択して Open Prefab を選択し、プレファブ編集モードに切り替えます。

　インスペクターを確認し、新しく AlbumPopUp スクリプトに追加した変数の情報が表示されていますので、適宜なゲームオブジェクトをドラッグアンドドロップしてアサインします。

インスペクター画像

　以上で設定は完了です。

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

　すべて完成しましたので、処理の流れを把握してから、ゲームを実行してデバッグを行います。

　btnRewardDetail ゲームオブジェクトが RewardData の情報によって振る舞いを変えて、異なる画像のデータを利用したゲームオブジェクトとして制御されていれば成功です。
また、タップした際に、その画像の情報がポップアップに表示されるようになれば、こちらも制御成功です。

　どの処理がどのスクリプトで制御されているかを振りかえっておきましょう。

＜アルバム機能　完成動画＞

動画ファイルへのリンク

＜褒賞の種類数が増えても対応できるようにスクロール機能を付ける＞

動画ファイルへのリンク

　以上でこの手順は終了です。
　
　次は　手順２６　－デバッグ機能の実装－　です。

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

印刷する

コメント（0）

２Ｄ放置ゲーム　手順２５ - i-school 先頭へ

コメントをかく

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

i-school