UE5 TileVIew,Inventoryの作成メモ

# 
今回はTileViewの準備、別でInventoryの機能を追加します。

ここでいうInventoryの機能は以下としています。
表示されたSlotをdrag,dropで入れ替える

まずはTileViewの準備です。
Inventory化はこちら

https://qiita.com/mintiatian/items/fff4f6371decaa7e024f

# 準備
## データ
### インベントリの中身の情報の構造体の作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249684/3f7570d1-ee69-252a-6095-f1d97478ffd6.png)

このあたりは作りたいものに合わせて設計して大丈夫です
このデータをもとにTileViewに表示をおこなったり
Dropした時のデータの入れ替えなどに使用します。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249684/840725cc-309f-ab45-e3cc-2b270677cd64.png)
InventoryStructとつけて作成

### InventoryStructを持ったObjectを継承したBlueprintの作成


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249684/4e76c44f-2d86-26c6-86f4-4db6b83f707d.png)

先ほどのInventoryStructをSlotDataと名前を付けて宣言

# Widget
## Slot
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249684/d6841a66-98b1-34bf-3193-8793d5fdadb2.png)
WBP_Slot

## Frame
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249684/be94dc37-4006-0171-a4e2-35755d44931a.png)
WBP_Frame

# インベントリの表示内容データ作成
何をいくつ持っているのか先に作成しておくとWidgetに組み込む際にスムーズです。
というか、途中で作成する羽目になるのでここまで準備できたら作成しておくとよいです。

## InventoryComponentの作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249684/f46ef2bf-8b2e-1f9e-00c0-56973005be36.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249684/8fff6427-ea91-92a0-8a56-dab9a59203db.png)

何を持っているかのInventoryStruct、BP_InventoryDataを作成

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249684/41f240a3-411c-91ad-1cbd-bd46bcf42af3.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249684/c835bb12-a051-0a2e-169e-7b9b77cd17b8.png)

BeginPlayでInventoryStructの配列からBP_InventoryDataの配列を作成します。
作成するnodeはNew ObjectででてくるConstruct Object from Classノードです。

## 所持させたいキャラクターにComponentをAddする
サンプルなのでとりあえず、BP_ThirdPersonCharacterにもたせます。
組み込む際は適切なBP、PlayerStatusなどに設定してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249684/ab9bcd8d-6e99-2285-2c2b-89ac354524e8.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249684/8235793a-6d3d-a8ae-a83f-65fba9e41f1f.png)

## InventoryのWidgetを作成

ようやくここでInventory用のWidgetを作成します。
TileViewもここで作成していきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249684/8c7987c7-81f0-2d33-9939-0791f5eb160c.png)
WBP_Inventoryを作成しTileViewをAddします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249684/ba69e644-87a4-6fed-ee2d-3bd36557b942.png)

このTileViewに表示するデータをセットする関数を作成しておきます。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249684/470fab7d-1721-1733-964e-f611c7ce8921.png)

WBP_FrameをTileView用のWidgetに調整していきます。


Implemented InterfacesでUserObjectListEntryをAddします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249684/246a1507-da8a-3304-b3bb-d140a27f098c.png)

UserObjectListEntryを追加するとWBP_InventoryにあるTileViewのEntryidgetClassに追加することができます。

## WBP_Inventoryの表示

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249684/1bc4c4f2-8530-edf6-a465-4f7c54b0a59a.png)


先にWBP_Inventoryを表示して結果を確認しながら進められるようにAdd to Viewportをしてしまいましょう

WBP_FrameにOnListItemObjectSetが継承されているのでそこにListの作成時処理を追加します。
赤い枠部分でBP_InventoryComponentで設定したデータをWBP_Inventoryにセットします。

# 一度確認してみる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249684/85111af0-a152-af8d-bebc-3f8b3035ffee.png)

ここまでの結果はこんな感じです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249684/bb97d7b2-4ca2-9a56-c30a-ffe001d2a540.png)
設定した↑が反映されていません。

# WBP_Frame,WBP_Slotにデータを設定する

## WBP_FrameのOnListItemObjectSetでデータを設定する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249684/ee9f7d21-9f84-4576-be7a-2f54b0324857.png)
WBP_InventoryでTileViewにSetListItemsで追加されたデータがここで渡されてきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249684/64579994-99a4-4511-40c4-ef355d48e6c8.png)
Slot側へInventoryStructのデータを渡します。

## WBP_Slot
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249684/40f46855-2b16-53dc-b8bf-8798ce70ac17.png)

Slot側のデータとセット関数

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249684/cb1dc336-566f-1f44-38c1-cb6225e552b4.png)
Imageの設定
今回はBindで設定


# 結果確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249684/240b3d4b-49a8-8c28-97cb-7cd9b5415e38.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249684/04dbc8fe-df6c-4af8-0fbd-8e1f97e0eb82.png)

色はちがいますが…
設定したデータと表示されているデータが一致しました（はず

基本実装はできたので適宜必要な実装個所に実装してください