i-school - 2D放置ゲーム 手順25
 引き続き、アルバム機能の実装を設計して組み込んでいきます。

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

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


<アルバム機能 完成動画>
動画ファイルへのリンク


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



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

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



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

1.設計


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

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

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


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


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

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

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

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

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

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

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

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

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


3.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 コンポーネントがあれば問題ありません。

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

 以上で完成です。


4.RewardDetail スクリプトを作成する


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

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

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

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

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


RewardDetail.cs

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


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

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


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


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

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


インスペクター画像



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


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


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

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



Game ビュー画像



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

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

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

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


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

1.設計


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

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

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


2.AlbumPopUp スクリプトを修正する


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

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

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

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

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

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

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


AlbumPopUp.cs

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


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


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


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

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


インスペクター画像



 以上で設定は完了です。


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


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

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

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


<アルバム機能 完成動画>
動画ファイルへのリンク


<褒賞の種類数が増えても対応できるようにスクロール機能を付ける>
動画ファイルへのリンク




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