【UE5】アイテム取得表示Widgetを作成しよう【Widget】

要するにこれを作る

ドロップアイテム表示処理を実装
経験値は表示する必要はないけど、にぎやかしに今は表示。（アイテム扱いではある）
手癖で作るから同じようなものができちゃうけど、ままえやろ#UE5 pic.twitter.com/rgbqerhmAa
— ネリスさん (@NelisLuna) 2023年9月30日

アイテムを入手した時にニュっと生えてきてシュっと退場するやつ。

とりあえずWidgetを作って
アイテムを表示するためのリストを作る（名前はWBP_DropItemList）

今はImageを仮で入れているが、VerticalBoxに登場・退場演出を持ったWidgetを追加していく。

個別のアイテム表示Widgetはこんな感じ（こちらの名前はWBP_DropItem）

気を付けないといけないのは、ここのHorizontalBoxのサイズを設定するところで
SizetoContentを使ってはいけないということ。
ここのYサイズは後で使うのでいい感じの高さにしておく。（今回は50としている）

右下の矢印を掴んでいい感じのサイズに。（必須ではないが見栄えのため）

まずは入場アニメーションを作成

シンプルに最上位のパネルのTransformの
TranslationのXを-50→0へ
RenderOpacityを0→1へ
するだけの簡単な入場アニメーション

これは特に言うこともないので次は退場アニメーション

退場アニメーションも基本的には入場と同じような感じだが
ここで大事なのは最初に設定していたサイズY。これを減らす

見えにくいけど、全体がフェードアウトした後にサイズYを減らしている
※これはScaleの変更では代替できないので注意

で、なんでこんなことをしてるかというと
VerticalBoxに物を追加していくとこんな感じで並ぶが
使い終わったアイテム表示を消すとその部分を詰めるためガクっとなる。
これは非常に見栄えが悪いのでなんとかする

じゃあどうするかというところでこれを見てほしい

当たり前と言われれば当たり前だが、VerticalBoxで高さのサイズを変えればその高さになる。
そしてその高さが０になれば、実質２番目の要素が１番目の位置に来るということ

そうなれば１番目の要素が消えても位置が変わらないため、違和感なく入れ替えが完了するというわけ。

これがサイズYをアニメーションで0にしている理由。

入場し、自主的に退場するだけの単純な処理（WBP_DropItem）

VerticalBoxを持つリストの方（WBP_DropItemList)は、アイテム表示を生成してVerticalBoxに追加していく

ゲームで使うなら、アイテム追加時に生成、追加をしていく感じ。

自分で使ってる時はこんな処理を書いてしまっている
ため込んで最大４つずつ表示されるように色々している。参考にはならないなぁ。

こんな感じになるはずなので、それぞれのプロジェクトに合わせていい感じに調整してみてほしい

ネリスさん備忘録