i-school - アイテム取得情報を画面にスライドさせて表示する

アイテム取得情報を画面にスライドさせて表示する


 回復アイテムなどを取得した際、画面上に取得したアイテムの情報(アイテム名とイメージ)を表示させる機能です。
ユーザーが取得したアイテムの情報を確認しやすくなりますので、ゲームへの不満が減り、より楽しむための仕掛け作りにつながります。

 表示する場所は任意ですが、ユーザーにとってわかりやすく、またゲーム自体の動作を阻害させないように心がける必要があります。
今回は画面の右端に画面外からスライドインさせつつ表示をさせています。

完成動画
https://gyazo.com/2aa826bc19554f66e5451781fe19ca1f

https://gyazo.com/8421becb092abbf2e2af1313a0984c4b

設計


 前提としまして

 1.ItemDataクラスを利用してデータベース機能を利用していること(簡易データベースでも、スクリプタブル・オブジェクトでも構いません)
 2.ItemBaseスクリプト(親クラス)を利用してクラスの継承をしていること

 以上の2点が必要になります。


 アイテムを取得した際に、そのアイテムの情報を確認して、その情報を元にフレキシブルに画面に表示する情報を変更します。
例えば回復アイテムを取得した場合には回復アイテムの名称とイメージが表示され、攻撃力アップのアイテムを取得した場合には、攻撃力アップの名称とイメージが表示されるようにします。

 これらを各アイテムごとに個別に分けて書いたのでは、アイテムの種類が増えるたびに分岐が増えてしまいますし、コードがどんどんと肥大化してしまいますので
ItemBaseクラスを利用してアイテムの振る舞いを動的に変更していたのと同じ手法で、取得したアイテムに合わせて、表示する内容を動的に変更するように設計を行います。
 
 始めは何の情報も持ち合わせていないフラットな状態のゲームオブジェクトを1つ作成し、こちらにアイテムの情報を取得できるスクリプト作成してアタッチします。
そしてこのスクリプトを使ってItemBaseから送られてきたアイテムの情報を受け取り、その情報に基づいて表示するアイテム情報を動的に変更する仕組みです。

 アイテム情報を画面に表示するにあたってはUIであるためCanvasを利用しますので、UI管理用のスクリプトも1つ作成し、
このスクリプトが先ほどのアイテム情報を表示するゲームオブジェクト自体を生成するようにします。

実装手順


 先ほどの設計に基づきまして、下記の手順で順番に実装を行います。

 1.アイテムの取得情報の管理(表示・スライド)するスクリプトであるItemInfoを作成する
 2.アイテムの取得情報を表示するゲームオブジェクトであるItemInfoを作成する

 3.Resorcesフォルダに表示するアイテムのイメージを用意する
 4.アイテム情報の生成地点用のゲームオブジェクトを作成する

 5.UI管理用のスクリプトとしてUIManagerを作成する
 6.UIManagerゲームオブジェクトを作成する

 7.ItemBaseスクリプトにアイテムの取得情報を生成する処理を追加する

アイテムの取得情報の管理(表示・スライド)するスクリプトであるItemInfoを作成する


 Scriptsフォルダ内でメニューを表示し、 Create => C# Script を選択します。名前をItemInfoに変更します。

ItemInfo.cs

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


 MovingDisplayInfoメソッドではDoTweenを使用して、アイテム取得情報のゲームオブジェクトであるItemInfoを画面内にスライドさせます。
 この時に使用している時間(スライドインまでの時間、画面に表示する時間など)は自由に変更してください。
移動時間や待機時間がズレないように気を付けていただければ、任意のタイミングまで表示させることもできます。


アイテムの取得情報を表示するゲームオブジェクトであるItemInfoを作成してプレファブにする


 ヒエラルキーのCanvas内にてCreate Emptyを選択し、名前をItemInfoに変更します。
その子として、Image、Text、Imageをそれぞれ作成します。名前や座標などは、各画像を参考に確認してください。


ItemInfo
 
 最初に作成した、フォルダ代わりに使用するゲームオブジェクトです。ここにはItemInfoスクリプトをアタッチします。
またCanvasGroupコンポーネントをAdd Componentします。(CanvasGroupの値には変更はありません。)
CanvasGroupはItemInfoにアタッチされているItemInfoスクリプトに、同名の変数がありますので、そちらにアサインをしてください。



imgBackGround

 Imageコンポーネントを持つゲームオブジェクトです。背景のイメージ設定用です。適宜な画像を用意してアサインしてください。このイメージは変更されません。
またこのゲームオブジェクトのサイズが、実際に画面に表示されるアイテム情報の大きさになります。同時に、アイテムの名称を表示する際の目安になります。



txtItemName

 Textコンポーネントを持つゲームオブジェクトです。取得したアイテムの名前を表示する部分です。表示位置や範囲は調整してください。
文字は空で問題ありません。ここに取得したアイテムの名前をスクリプトから動的に表示させます。
ItemInfoにアタッチされているItemInfoスクリプトに、同名の変数がありますので、そちらにアサインをしてください。

 必要に応じてCircleOutlineなどのコンポーネントをアタッチすると表示される文字が豪華になります。



imgItem
 
 Imageコンポーネントを持つゲームオブジェクトです。取得したアイテムのイメージを表示する部分です。位置は調整してください。
Imageは白い状態のままで問題ありません。ここに取得したアイテムのイメージをスクリプトから動的に表示させます。
ItemInfoにアタッチされているItemInfoスクリプトに、同名の変数がありますので、そちらにアサインをしてください。



Resorcesフォルダに表示するアイテムのイメージを用意する


 Project内にResourcesフォルダを作成します。すでにある場合にはそちらをそのまま利用します。
画像のような階層構造でフォルダを作成し、Itemsの中にアイテムのイメージを配置してください。
ファイル名はItemDataクラスのnameと同じ名前に変更してください。(名前を参照してイメージを読み込ませるためです)





アイテム情報の生成地点用のゲームオブジェクトを作成する


 ゲーム画面外にItemInfoプレファブを生成する位置を設定します。スクリプト上で座標を指定することもできますが
今回は空のゲームオブジェクトを作成して、その位置を生成する地点として登録して利用するようにします。

 Canvas上でメニューを表示し、Create Empty を選択し、名前をItemInfoTranに変更します。
画像を参考に位置を調整してみてください。こちらの位置を調整することで、ItemInfoの生成される位置を変更できます。
必ずCanvasの中に作成してください(Transformではなくて、RectTransformになっていないとダメです。)



 ItemInfoTranにはコンポーネントを1つ追加します。Add Componentを選択して、VerticalLayoutGroupを追加してください。
設定についても、画像を参考にしてください。



 VerticalLayoutGroupを使用する目的は、複数のアイテム情報が生成された場合に、表示された順番に上から縦方向に並んで表示されるようにするためです。 
デバッグとして、実際にItemInfoTranの子として、ItemInfoゲームオブジェクトのプレファブをいくつか設置してみましょう。
画像のように並んで表示されるのが分かります。(手順書に基づいて実装していく場合にも、実際に試しながら進めてください。理解度が違います。)
確認が終わりましたら、子として配置したプレファブは削除しておいてください。


 

 ヒエラルキーのCanvasをダブルクリックして、その後、ItemInfoTranをクリックすると、Canvasに対して、どの位の位置に配置されているか確認できます。
画像では画面外の右端の真ん中付近にある半透明の丸いオブジェクトです。


UI管理用のスクリプトとしてUIManagerを作成する

 
 画面に表示させるUI関連の情報を集約して管理できるように、UIManagerクラスを作成します。
このクラスはシングルトンにすることで、いずれのクラスからでも代入なしで参照できる状態にしておきます。

今回はアイテム情報の表示のみですが、シングルトンにしておくことで、他にも時間の表示やスコアの更新表示などをこのクラスで一括管理できます。
(各クラスにUIの処理を分けて書く必要もなくなりますので、こっちのクラスでスコア、こっちのクラスで別のUIの表示情報、といったことがなくなり、処理を追いやすく修正しやすくなります)

 Scriptsフォルダでメニューを表示し、Create => C# Script を選択します。名前をUIManagerに変更します。

UIManager.cs

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


UIManagerゲームオブジェクトを作成する


 ヒエラルキー上でメニューを表示して Create Empty を選択し、名前をUIManagerに変更します。
こちらのゲームオブジェクトに作成したUIManagerスクリプトをアタッチします。

 UIManagerのインスペクターを確認します。アサイン情報が2つ表示されますので、順番にアサインしていきます。
1つ目のItemInfoPrefabにはProject内のPrefabsフォルダに用意しておいたItemInfoPrefabゲームオブジェクトをアサインします。

2つ目はヒエラルキーのCanvas内にあるItemInfoTranゲームオブジェクトをアサインして、そのTransform情報を利用できるようにします。



ItemBaseスクリプトにアイテムの取得情報を生成する処理を追加する


 ItemBaseスクリプトを修正して、アイテムを取得した際に、UIManagerのCreateItemInfoメソッドを呼び出すようにします。
コルーチンですので、忘れずにStartCoroutineをつけてください。

 処理を追加する場所はTriggerItemEffectメソッドに書くようにします。
親クラスであるItemBaseに処理を追加しますので、子クラスもこのアイテム取得時のメソッドを実行してくれます。

    protected virtual void TriggerItemEffect() {
        StartCoroutine(UIManager.instance.CreateItemInfo(itemName));   // <= 追加します。UIManagerはシングルトンですので、クラス内での宣言は不要です。

        // (TODO) 子クラス内に行わせたい処理を記載する

        // 最後にDestroyItemを呼び出すことでアイテムが破壊される

    }


 以上で実装は終了です。ゲームを実行してアイテムを取得してみましょう。画面内にアイテム取得情報が表示されれば成功です。

 正常に動く確認が取れましたら、スライドさせる方向なども変更してみましょう。