UE5:スクロールボックスを使ったWBPを作成してみよう!備忘録
Uncategorized今回はの記事では、スクロールボックスを使って、ショップなどで見かけるウィジェットを作成してみたいと思います。

こんな感じのやつです!
CSVの作成

まずはエクセルを開いてCSVを作成しました!
各項目を1行目に設定し2以降から数値や名前を記入。
出力するときは、UTF-8形式のCSVで出力しないと、UEでは日本語部分を読み込むことができなかったので、ご注意を!
加えて「ItemImage」はテクスチャ2Dを設定するため、コンテンツドロワーから対象のテクスチャのリファレンスをコピーして貼り付けてみました!
右クリックから簡単にコピーできます!
構造体の作成

CSVだけでは、変数の型を指定できていないため、UEに取り込む前に構造体を作成!
これにより、CSVを読み込んだときに各種項目に型を設定することができました!
データテーブルの作成

構造体が作成できたら、CSVをコンテンツドロワーにドロップして読み込みます!
読み込んだときにポップアップが出てくるので、構造体を指定する必要がありました。ちなみにCSVと構造体の項目が一致しない場合、その項目はNoneになります。
子ウィジェットの作成

下準備はできたので、ウィジェットを作成していきます!まずは、子ウィジェットから作成してみました。
とりあえず、テクスチャの表示部分とアイテム名、アイテムの料金が表示されるように設定しています。イメージとしてGを入れてますが、数字のみしか今回は表示されないです。

イベントグラフに移動して、ノードを組みましょう!
とりあえず、データテーブルを元にした変数を作成したいので、それさえできればいいかな程度で組んでおります。

ItemNumberの変数は後ほど、親とするウィジェットから値を渡して更新してあげたいので「インスタンス編集可能」と「スポーン時に公開」をTrueにしています。



変数が作成できたので、それぞれバインディングを設定しました!
親ウィジェットの作成

親ウィジェットの作成に取り組んでいきます!
といっても、簡単に範囲やらを決めて、子ウィジェットを追加しただけですが・・・

関数を追加して一定回数ループして値を流してあげる処理を組みました!
これで実行ピンの通知があるごとに子ウィジェットが親に追加されていき子の内容は、ItemNumberを参照して、対応している値を表示するようになったのかな
ブループリントの設定

今回は表示できればいいかと思い、キャラクターではなく、ブループリントクラスを作成してイベントグラフにウィジェットの表示とマウスカーソルを使えるようにしてみただけ
というわけでここで以上!
んな記事もあるよ!
YouTube
YouTubeなどでも、時おり活動をしていますのでよかったらチャンネル登録しておいて貰えると嬉しいです!
上の動画は、Widgetのスライダーを利用してカメラの距離を変更する!という動画です。
その他過去にはゲーム実況やゲーム制作に関する動画など投稿しています!