アイテム獲得時のログ表示機能の実装例��
最終更新：
orika_ex_miyako 2025年06月05日(木) 10:39:10履歴
複数回の手順に分けて、ログ表示機能の実装を学習します。
なお、C# と Unity の基礎知識＋アルファの学習(中級者クラス)が必要になります。
最近のゲームでは、アイテム類を入手した際に獲得したアイテムの情報が画面の端に表示される機能があります。
複数のアイテムを入手した場合には、それらがログのように複数表示されます。
例えば、ゼルダの伝説などで、キノコなどを入手した際に表示されるようなものです。
これらの機能の実装例になります。
設計
UI には VerticalLayoutGroup を活用します。
アニメーションは DOTween を利用します。
ログ用オブジェクトをプレハブにし、アイテム入手のタイミングで画面外で生成して DOTween で画面内にスライドインして移動させます。
所定の位置まで移動後、VerticalLayoutGroup のアタッチされている ScrollView 内の Content の子オブジェクトとして、縦方向に整列表示させます。
これにより、複数のログが表示された場合にも、縦方向に積みあがる(あるいは下に並ぶ)ように一列に並べてログ表示させます。
その後、一定時間待機の後、今後は画面外に向かってスライドアウトさせて移動させます。
アイテム入手のタイミングでログ用のオブジェクトを生成することになりますが、これはゲーム内でも頻繫に発生する機能となるため、
オブジェクトプールの機能も併せて活用し、ログ用のオブジェクトはリサイクルして利用し、負荷軽減と効率化を図る設計とします。
ログ用 UI
アイテムのアイコン、名称、背景フレームのセットです。
こちらを制作後プレハブにし、アイテム入手のタイミングで生成して DOTween で移動させて利用する形です。
他に表示させる情報がある場合(取得個数など)には、任意に追加してください。
＜構造＞
ToastSlot
imgFrame
imgSlot
imgIcon
txtItemName
ログ一覧表示用 UI
生成されたログ(ToastSlot プレハブ)が画面内に移動後に整列されて表示するための一覧表示用の UI です。
ScrollView と VerticalLayoutGroup を活用して表示管理します。
＜構造＞
Canvas_Toast
Canvas を複数利用する前提になっています。
そのため、Render Mode は Screen Space - Camera を利用します。
各 Canvas に優先順位(Sorting Layer、Order in Layer)をつけて表示順位の管理をしてください。
TransformSet
複数の Transform 用のオブジェクトを管理するコンテナ役のゲームオブジェクトです。
GenerateToastTran
ログ用(ToastSlot)プレハブを生成する位置を指定するためのゲームオブジェクトです。
ログ用プレハブですが、最初はゲーム画面外に生成し、それをゲーム画面内に DOTween を利用して移動させる(ゲーム画面外から画面内にスライドイン)ようにします。
そのため、このオブジェクトはゲーム画面外に配置します。
TargetTran
画面外から移動してきたログが停止する位置です。(DOTween の目標座標)
位置については、実際のゲーム画面で調整しながら決めてください。
ScrollView
ログ用(ToastSlot)プレハブが生成可能な範囲の指定になります。
大きめに用意しておくとよいでしょう。
画面のタップやクリックを阻害しないように Image の Block Laycast はオフにしておいてください。
Viewport
Content
VerticalLayoutGroup と ContentSizeFitter をアタッチし、適宜な設定を行います。
今回の場合、下方向から上方向に向かって整列させたいため、RectTransform の Pivot の Y を 0 に設定しています。
また VerticalLayoutGroup の Child Alignment を Lower Left、Reserve Arrangment にチェックを入れてください。
この手順は終了です。
次の手順では、ログ用のプレハブの生成位置の確認や、アニメ挙動の確認などを行います。
=> アイテム獲得時のログ表示機能の実装例��
なお、C# と Unity の基礎知識＋アルファの学習(中級者クラス)が必要になります。
最近のゲームでは、アイテム類を入手した際に獲得したアイテムの情報が画面の端に表示される機能があります。
複数のアイテムを入手した場合には、それらがログのように複数表示されます。
例えば、ゼルダの伝説などで、キノコなどを入手した際に表示されるようなものです。
これらの機能の実装例になります。
設計 
UI には VerticalLayoutGroup を活用します。
アニメーションは DOTween を利用します。
ログ用オブジェクトをプレハブにし、アイテム入手のタイミングで画面外で生成して DOTween で画面内にスライドインして移動させます。
所定の位置まで移動後、VerticalLayoutGroup のアタッチされている ScrollView 内の Content の子オブジェクトとして、縦方向に整列表示させます。
これにより、複数のログが表示された場合にも、縦方向に積みあがる(あるいは下に並ぶ)ように一列に並べてログ表示させます。
その後、一定時間待機の後、今後は画面外に向かってスライドアウトさせて移動させます。
アイテム入手のタイミングでログ用のオブジェクトを生成することになりますが、これはゲーム内でも頻繫に発生する機能となるため、
オブジェクトプールの機能も併せて活用し、ログ用のオブジェクトはリサイクルして利用し、負荷軽減と効率化を図る設計とします。
ログ用 UI
アイテムのアイコン、名称、背景フレームのセットです。
こちらを制作後プレハブにし、アイテム入手のタイミングで生成して DOTween で移動させて利用する形です。
他に表示させる情報がある場合(取得個数など)には、任意に追加してください。
＜構造＞
ToastSlot
imgFrame
imgSlot
imgIcon
txtItemName
ログ一覧表示用 UI
生成されたログ(ToastSlot プレハブ)が画面内に移動後に整列されて表示するための一覧表示用の UI です。
ScrollView と VerticalLayoutGroup を活用して表示管理します。
＜構造＞
Canvas_Toast
Canvas を複数利用する前提になっています。
そのため、Render Mode は Screen Space - Camera を利用します。
各 Canvas に優先順位(Sorting Layer、Order in Layer)をつけて表示順位の管理をしてください。
TransformSet
複数の Transform 用のオブジェクトを管理するコンテナ役のゲームオブジェクトです。
GenerateToastTran
ログ用(ToastSlot)プレハブを生成する位置を指定するためのゲームオブジェクトです。
ログ用プレハブですが、最初はゲーム画面外に生成し、それをゲーム画面内に DOTween を利用して移動させる(ゲーム画面外から画面内にスライドイン)ようにします。
そのため、このオブジェクトはゲーム画面外に配置します。
TargetTran
画面外から移動してきたログが停止する位置です。(DOTween の目標座標)
位置については、実際のゲーム画面で調整しながら決めてください。
ScrollView
ログ用(ToastSlot)プレハブが生成可能な範囲の指定になります。
大きめに用意しておくとよいでしょう。
画面のタップやクリックを阻害しないように Image の Block Laycast はオフにしておいてください。
Viewport
Content
VerticalLayoutGroup と ContentSizeFitter をアタッチし、適宜な設定を行います。
今回の場合、下方向から上方向に向かって整列させたいため、RectTransform の Pivot の Y を 0 に設定しています。
また VerticalLayoutGroup の Child Alignment を Lower Left、Reserve Arrangment にチェックを入れてください。
この手順は終了です。
次の手順では、ログ用のプレハブの生成位置の確認や、アニメ挙動の確認などを行います。
=> アイテム獲得時のログ表示機能の実装例��
コメントをかく