目次
はじめに
注意
UE5.0.0の現在の情報です。
今後のアップデートによりUIや機能が変更される可能性があることをあらかじめご理解ください。
この記事を作成するにあたり以下の内容を参考にさせていただきました。
[UE4] ドラッグドロップで操作できるアイコンの作り方｜株式会社ヒストリア
Unreal Engine でドラッグ アンド ドロップの UI を作成する | Unreal Engine ドキュメント
解説
①アイテム用の構造体を作成
アイテムの情報をやりやすくするためです。
構造体DS_ItenDataを作成します。
構造体の変数を追加します。
デフォルト値もセットしておきます。
②アイテム用のUIを作る
ユーザーウィジェットからWBP_Itemを作ります。
開いてフルスクリーンからCustomに変更して幅と高さを128にします。
③アイテムUIのコンポーネントの追加
SizeBoxを追加して
レイアウトを100、ビヘイビアのカーソルをHandにします。
オーバーレイを追加してその子に２つのimageとtextを追加します。
それぞれ名前をItemIcon,NameBack,NameTextにしてきましょう
ItemIconの詳細からalignmentを変更します。
NameBackはalignmentとTintとSize
NameTextはalignmentとFontSizeとJustification、
クリッピングを変更します。
こんな感じになったらOKです。
ItemIcon詳細からバインディング関数を作成します。
名前をGetItemIconに変更しましょう。
NameTextの詳細からバインディング関数Get Item Nameを作成します。
アイテム用に作成した構造体の変数を追加します。
スポーン時に公開とインスタンス編集可能にチェックを入れます。
それぞれの関数に接続します。
④アイテムUIのイベントの編集
イベントのオーバーライドからButtonDownとDragDetectedを追加します。
ButtonDownにはこのUIが任意のキーで押されたかどうかを設定します。
DragDetectedはドラックが開始されたときのイベントです。
ドラッグアンドドロップの動作を仲介するDragDropOperationを作成します。
イベントグラフに戻りOnDragCancelledを配置します。
このイベントはドロップ処理が失敗したときに呼ばれます。
⑤アイテムスロットUIの作成
ウィジェットブループリントUserWidgetからWBP_ItemSlotを作ります。
これはアイテムUIの受け皿です。
同じように設定します。
⑥アイテムスロットUIのコンポーネントの追加
Border、SizeBox、NamedSlotを追加します。
NamedSlotはItemSlotにリネームしておきましょう。
SizeBoxはPaddingとレイアウトを変更します。
こんな感じになればOKです。
⑦アイテムスロットUIのイベントの編集
イベントオーバーライドからOnDropを作成します。
OnDropはこのUIにドラッグアンドドロップされたときに呼ばれるイベントです。
Dropイベントを編集します。
OperationからはDragDropOperationの結果が返ってきます。
DragVisualはWBP_Itemのことです。
やっていることは非常にシンプルでこのウィジェットのItemSlotの子になにかある場合はドラッグされたアイテムの子と交換し、ない場合はそのまま配置しているだけです。
ここでのリターンノードでFalseになるとWBP_ItemのDragCancelledが呼ばれます。
⑧スケールボックスでラップする
ウィンドウのサイズによってUIが破綻するのを防ぐためスケールボックスでラップしましょう。
パレッドの詳細はコチラの記事で解説されています。
⑨Inventoryに配置
WBP_InventoryにUIを追加します。
こちらのサイトから素材を使用しました。
WBP_ItemSlotをドラッグして配置します。
（ここら辺はお好みで）
WBP_ItemSlotの子のItemSlotにWBP_Itemを配置します。
WBP_Itemの詳細から設定できます。
実行してみましょう。
こんな感じになったら成功です。
最後に
UE4やUE5向けの記事を書いています。
皆様の応援が投稿のモチベーションになりますので
コメントやTwitterのフォローなどしていただけるとありがたいです。
それではよきゲーム開発を。
