今回はTileViewの準備、別でInventoryの機能を追加します。
ここでいうInventoryの機能は以下としています。
表示されたSlotをdrag,dropで入れ替える
まずはTileViewの準備です。
Inventory化はこちら
準備
データ
インベントリの中身の情報の構造体の作成
このあたりは作りたいものに合わせて設計して大丈夫です
このデータをもとにTileViewに表示をおこなったり
Dropした時のデータの入れ替えなどに使用します。
InventoryStructとつけて作成
InventoryStructを持ったObjectを継承したBlueprintの作成
先ほどのInventoryStructをSlotDataと名前を付けて宣言
Widget
Slot
WBP_Slot
Frame
WBP_Frame
インベントリの表示内容データ作成
何をいくつ持っているのか先に作成しておくとWidgetに組み込む際にスムーズです。
というか、途中で作成する羽目になるのでここまで準備できたら作成しておくとよいです。
InventoryComponentの作成
何を持っているかのInventoryStruct、BP_InventoryDataを作成
BeginPlayでInventoryStructの配列からBP_InventoryDataの配列を作成します。
作成するnodeはNew ObjectででてくるConstruct Object from Classノードです。
所持させたいキャラクターにComponentをAddする
サンプルなのでとりあえず、BP_ThirdPersonCharacterにもたせます。
組み込む際は適切なBP、PlayerStatusなどに設定してください。
InventoryのWidgetを作成
ようやくここでInventory用のWidgetを作成します。
TileViewもここで作成していきます。
WBP_Inventoryを作成しTileViewをAddします。
このTileViewに表示するデータをセットする関数を作成しておきます。
WBP_FrameをTileView用のWidgetに調整していきます。
Implemented InterfacesでUserObjectListEntryをAddします。
UserObjectListEntryを追加するとWBP_InventoryにあるTileViewのEntryidgetClassに追加することができます。
WBP_Inventoryの表示
先にWBP_Inventoryを表示して結果を確認しながら進められるようにAdd to Viewportをしてしまいましょう
WBP_FrameにOnListItemObjectSetが継承されているのでそこにListの作成時処理を追加します。
赤い枠部分でBP_InventoryComponentで設定したデータをWBP_Inventoryにセットします。
一度確認してみる
ここまでの結果はこんな感じです。
設定した↑が反映されていません。
WBP_Frame,WBP_Slotにデータを設定する
WBP_FrameのOnListItemObjectSetでデータを設定する
WBP_InventoryでTileViewにSetListItemsで追加されたデータがここで渡されてきます。
Slot側へInventoryStructのデータを渡します。
WBP_Slot
Slot側のデータとセット関数
Imageの設定
今回はBindで設定
結果確認
色はちがいますが…
設定したデータと表示されているデータが一致しました（はず
基本実装はできたので適宜必要な実装個所に実装してください