i-school

追加された行はこの色です。
削除された行はこの色です。

　複数回の手順に分けて、ログ表示機能の実装を学習します。
なお、C# と Unity の基礎知識＋アルファの学習(中級者クラス)が必要になります。

----

　最近のゲームでは、アイテム類を入手した際に獲得したアイテムの情報が画面の端に表示される機能があります。
複数のアイテムを入手した場合には、それらがログのように複数表示されます。
例えば、ゼルダの伝説などで、キノコなどを入手した際に表示されるようなものです。

　これらの機能の実装例になります。

&ref(https://image02.seesaawiki.jp/i/o/i-school-memo/TE9W9jnRn0.gif, 35%)

----

&ref(https://image01.seesaawiki.jp/i/o/i-school-memo/4b5HjaH6x_.png, 35%)

&ref(https://image02.seesaawiki.jp/i/o/i-school-memo/qimK4dLULc.png, 35%)

&ref(https://image01.seesaawiki.jp/i/o/i-school-memo/9teFKQqR7B.png, 35%)

----

*設計

　UI には VerticalLayoutGroup を活用します。
アニメーションは DOTween を利用します。

　ログ用オブジェクトをプレハブにし、アイテム入手のタイミングで画面外で生成して DOTween で画面内にスライドインして移動させます。
所定の位置まで移動後、VerticalLayoutGroup のアタッチされている ScrollView 内の Content の子オブジェクトとして、縦方向に整列表示させます。
これにより、複数のログが表示された場合にも、縦方向に積みあがる(あるいは下に並ぶ)ように一列に並べてログ表示させます。

　その後、一定時間待機の後、今後は画面外に向かってスライドアウトさせて移動させます。
　
　アイテム入手のタイミングでログ用のオブジェクトを生成することになりますが、これはゲーム内でも頻繫に発生する機能となるため、
オブジェクトプールの機能も併せて活用し、ログ用のオブジェクトはリサイクルして利用し、負荷軽減と効率化を図る設計とします。
　
----

*ログ用 UI

　制作後プレハブにし、アイテム入手のタイミングで生成して DOTween で移動させます。

''＜構造＞''
&ref(https://image01.seesaawiki.jp/i/o/i-school-memo/r9xvs0_wah.png, 35%)

----

**ToastSlot

&ref(https://image01.seesaawiki.jp/i/o/i-school-memo/8yB5rNIY3R.png, 35%)

&ref(https://image01.seesaawiki.jp/i/o/i-school-memo/Lx8hRt1eD2.png, 50%)

----

**imgFrame

&ref(https://image02.seesaawiki.jp/i/o/i-school-memo/QSq2FjNR1S.png, 35%)

&ref(https://image01.seesaawiki.jp/i/o/i-school-memo/krGhbZKinL.png, 50%)

----

**imgSlot

&ref(https://image02.seesaawiki.jp/i/o/i-school-memo/lm6rks2OGn.png, 35%)

&ref(https://image02.seesaawiki.jp/i/o/i-school-memo/qodovba_Jw.png, 50%)

----

**imgIcon

&ref(https://image02.seesaawiki.jp/i/o/i-school-memo/hK1pok6WPH.png, 35%)

&ref(https://image02.seesaawiki.jp/i/o/i-school-memo/6ffBuYBll8.png, 50%)

----

**txtItemName

&ref(https://image02.seesaawiki.jp/i/o/i-school-memo/Xd0rbwdL2B.png, 35%)

&ref(https://image02.seesaawiki.jp/i/o/i-school-memo/CX9FhpIjaP.png, 50%)

----

*ログ一覧表示用 UI

　生成されたログが画面内に移動後に整列されて表示するための一覧表示用の UI です。
ScrollView と VerticalLayoutGroup を活用して作成します。

''＜構造＞''
&ref(https://image02.seesaawiki.jp/i/o/i-school-memo/_x_EwILz0n.png, 35%)

----

**Canvas_Toast

&ref(https://image02.seesaawiki.jp/i/o/i-school-memo/_nfxugFEqK.png, 35%)

&ref(https://image02.seesaawiki.jp/i/o/i-school-memo/gUImKR5VZM.png, 35%)

----

**TransformSet

&ref(https://image01.seesaawiki.jp/i/o/i-school-memo/jG2GwaItfb.png, 35%)

&ref(https://image02.seesaawiki.jp/i/o/i-school-memo/UKIwShuDJq.png, 35%)

----

**GenerateToastTran

　ログ用プレハブを生成する位置用のゲームオブジェクトです。

　最初は画面外に生成し、それをゲーム画面内に移動させるようにします。
そのため、このオブジェクトはゲーム画面外になるように配置します。

&ref(https://image01.seesaawiki.jp/i/o/i-school-memo/oDAgxgEue2.png, 35%)

&ref(https://image01.seesaawiki.jp/i/o/i-school-memo/EcGp13A9bk.png, 35%)

----

**TargetTran

&ref(https://image02.seesaawiki.jp/i/o/i-school-memo/_ivkrttjLd.png, 35%)

&ref(https://image02.seesaawiki.jp/i/o/i-school-memo/ixoVsR8OeJ.png, 35%)

----

**ScrollView

&ref(https://image02.seesaawiki.jp/i/o/i-school-memo/mrOnap_t9d.png, 35%)

&ref(https://image01.seesaawiki.jp/i/o/i-school-memo/4wUJGYNQTR.png, 35%)

----

**Viewport

&ref(https://image01.seesaawiki.jp/i/o/i-school-memo/r6ggf9UxwD.png, 35%)

&ref(https://image01.seesaawiki.jp/i/o/i-school-memo/qb2g_2It61.png, 35%)

----

**Content

　VerticalLayoutGroup と ContentSizeFitter をアタッチし、適宜な設定を行います。
今回の場合、下方向から上方向に向かって整列させたいため、Pivot の Y を 0 に設定しています。

&ref(https://image01.seesaawiki.jp/i/o/i-school-memo/bCOT7C4UAE.png, 35%)

&ref(https://image02.seesaawiki.jp/i/o/i-school-memo/3GHwfGA4VO.png, 35%)

----

　この手順は終了です。

　次の手順では、ログ用のプレハブの生成位置の確認や、アニメ挙動の確認などを行います。

　　=>　''%%%[[アイテム獲得時のログ表示機能の実装例②>アイテム獲得時のログ表示機能の実装例②]]%%%''

i-school

アイテム獲得時のログ表示機能の実装例①