アイテム獲得時のログ表示機能の実装例��
最終更新：
orika_ex_miyako 2024年04月03日(水) 10:06:30履歴
複数回の手順に分けて、ログ表示機能の実装を学習します。
なお、C# と Unity の基礎知識＋アルファの学習(中級者クラス)が必要になります。
これらの機能の実装例になります。
設計
UI には VerticalLayoutGroup を活用します。
アニメーションは DOTween を利用します。
ログ用オブジェクトをプレハブにし、アイテム入手のタイミングで画面外で生成して DOTween で画面内にスライドインして移動させます。
所定の位置まで移動後、VerticalLayoutGroup のアタッチされている ScrollView 内の Content の子オブジェクトとして、縦方向に整列表示させます。
これにより、複数のログが表示された場合にも、縦方向に積みあがる(あるいは下に並ぶ)ように一列に並べてログ表示させます。
その後、一定時間待機の後、今後は画面外に向かってスライドアウトさせて移動させます。
アイテム入手のタイミングでログ用のオブジェクトを生成することになりますが、これはゲーム内でも頻繫に発生する機能となるため、
オブジェクトプールの機能も併せて活用し、ログ用のオブジェクトはリサイクルして利用し、負荷軽減と効率化を図る設計とします。
オブジェクトの移動アニメのイメージ作成
実際にどのような挙動になってほしいかを、事前にエディターにおいて確認しておき、イメージをつかみます。
ToastSlot の仮配置
実際にどのような挙動をゲーム内で実現したいかを、事前に画面に配置して確認を行います。
整列位置の確認
Content ゲームオブジェクトの子オブジェクトにすることで縦方向に一列に整列する設定になります。
実際に子オブジェクトにして、サイズや位置などを確認します。
ゲーム画面とも合わせてみると、どのように見えるかわかりますので、作りたいイメージがわきます。
生成位置の確認
ログ用のプレハブは GenerateToastTran ゲームオブジェクトの位置に生成します。
そのため、このゲームオブジェクトの子オブジェクトにもログ用のプレハブを配置し、ゲーム画面には映らない位置にあるかを確認します。
また、ゲーム画面内までの位置や Content の高さも確認します。位置が離れているほど移動距離が増えることになります。
ゲーム画面内まで移動後、Content の子オブジェクトになりますので、高さが同じ位置になるか確認しておきます。
移動後の位置の確認
DOTween を利用してゲーム画面外にあるログ用のプレハブをゲーム画面内に移動させます。
その際の目標地点となりますので、このゲームオブジェクトの子オブジェクトにもログ用のプレハブを配置して位置を確認します。
先ほどの GenerateToastTran と同じく、Content の高さや位置を合わせておく必要があります。
ここに移動後、そのまま Content の子オブジェクトになりますので、もしも、このオブジェクトの位置と
Content の最初に配置される位置がずれていると、スライドしてきたログが予期していない位置に移動してしまい、画面上での整合性が取れなくなります。
複数のログを配置
Content ゲームオブジェクトに複数のログ用のプレハブを配置し、縦方向に積みあがっていくことを確認します。
最初に配置したログ用のプレハブがどんどんと上に移動し、最後に配置したログ用のプレハブが一番下に来ることを確認します。
テキストを編集し、番号などを振るとわかりやすくなります。
自分でデバッグや制作しやすい工夫を常に考えるようにしていきましょう。
次回以降 アサイン時
テスト動作を行うためのクラスを作成し、動作確認を行います。
そのうえで、実際のプロジェクトの適宜なタイミングで呼び出して実行するように修正をしていきます。
この手順は終了です。
次の手順では、スクリプトを作成し、ログの動的生成や、ログの移動アニメの設定などを行います。
=> アイテム獲得時のログ表示機能の実装例��
なお、C# と Unity の基礎知識＋アルファの学習(中級者クラス)が必要になります。
これらの機能の実装例になります。
設計 
UI には VerticalLayoutGroup を活用します。
アニメーションは DOTween を利用します。
ログ用オブジェクトをプレハブにし、アイテム入手のタイミングで画面外で生成して DOTween で画面内にスライドインして移動させます。
所定の位置まで移動後、VerticalLayoutGroup のアタッチされている ScrollView 内の Content の子オブジェクトとして、縦方向に整列表示させます。
これにより、複数のログが表示された場合にも、縦方向に積みあがる(あるいは下に並ぶ)ように一列に並べてログ表示させます。
その後、一定時間待機の後、今後は画面外に向かってスライドアウトさせて移動させます。
アイテム入手のタイミングでログ用のオブジェクトを生成することになりますが、これはゲーム内でも頻繫に発生する機能となるため、
オブジェクトプールの機能も併せて活用し、ログ用のオブジェクトはリサイクルして利用し、負荷軽減と効率化を図る設計とします。
オブジェクトの移動アニメのイメージ作成
実際にどのような挙動になってほしいかを、事前にエディターにおいて確認しておき、イメージをつかみます。
ToastSlot の仮配置
実際にどのような挙動をゲーム内で実現したいかを、事前に画面に配置して確認を行います。
整列位置の確認
Content ゲームオブジェクトの子オブジェクトにすることで縦方向に一列に整列する設定になります。
実際に子オブジェクトにして、サイズや位置などを確認します。
ゲーム画面とも合わせてみると、どのように見えるかわかりますので、作りたいイメージがわきます。
生成位置の確認
ログ用のプレハブは GenerateToastTran ゲームオブジェクトの位置に生成します。
そのため、このゲームオブジェクトの子オブジェクトにもログ用のプレハブを配置し、ゲーム画面には映らない位置にあるかを確認します。
また、ゲーム画面内までの位置や Content の高さも確認します。位置が離れているほど移動距離が増えることになります。
ゲーム画面内まで移動後、Content の子オブジェクトになりますので、高さが同じ位置になるか確認しておきます。
移動後の位置の確認
DOTween を利用してゲーム画面外にあるログ用のプレハブをゲーム画面内に移動させます。
その際の目標地点となりますので、このゲームオブジェクトの子オブジェクトにもログ用のプレハブを配置して位置を確認します。
先ほどの GenerateToastTran と同じく、Content の高さや位置を合わせておく必要があります。
ここに移動後、そのまま Content の子オブジェクトになりますので、もしも、このオブジェクトの位置と
Content の最初に配置される位置がずれていると、スライドしてきたログが予期していない位置に移動してしまい、画面上での整合性が取れなくなります。
複数のログを配置
Content ゲームオブジェクトに複数のログ用のプレハブを配置し、縦方向に積みあがっていくことを確認します。
最初に配置したログ用のプレハブがどんどんと上に移動し、最後に配置したログ用のプレハブが一番下に来ることを確認します。
テキストを編集し、番号などを振るとわかりやすくなります。
自分でデバッグや制作しやすい工夫を常に考えるようにしていきましょう。
次回以降 アサイン時
テスト動作を行うためのクラスを作成し、動作確認を行います。
そのうえで、実際のプロジェクトの適宜なタイミングで呼び出して実行するように修正をしていきます。
この手順は終了です。
次の手順では、スクリプトを作成し、ログの動的生成や、ログの移動アニメの設定などを行います。
=> アイテム獲得時のログ表示機能の実装例��
コメントをかく