概要
Unreal Engine 5 でドラッグ＆ドロップできる UI を作成してみます
UE で用意されている「Detect Drag if Pressed」「On Drag Detected」「CreateDragDropOperation」「On Drop」などのノードを使う事でドラッグ＆ドロップを実装する事ができます
環境
- windows 11
- Unreal Engine 5.1.1
- エディタ言語 英語
参考URL
以下の記事を参考させて頂きました。
最小サンプル
まずはドラッグ可能な UI を作る
1. 新規 Widget Blueprint を作成
名前を DraggableIcon とします
2. DraggableIcon をドラッグできるようにする
作成した DraggableIcon を開いて Event Graph を編集します
- FUNCTIONS の Override をクリック
- 出てきたウィンドウから On Mouse Button Down を検索して追加
On Mouse Button Down を開いて以下のようにノードを接続します
- 再び FUNCTIONS の Override をクリック
- 出てきたウィンドウから On Drag Detected を検索して追加
On Drag Detected を開いて以下のようにノードを接続します
これだけでドラッグの機能は完成です
3. DraggableIcon の見た目を作成
DraggableIcon の Designer を開きます
- 左下の Hierarchy に「Canvas Panel」と「Image」を追加
- 追加した Image を選択して、右側の Details から以下の様に変更する
- Position X と Position Y を 100.0
- Size X と Size Y を 200.0
- Color を 青に
4. DraggableIcon を表示する
レベルブループリントから DraggableIcon を表示させます
- World に戻りレベルブループリントを開く
- 以下のようにノードを接続する
5. 実行
Alt + P などから Play をします
青いアイコンが表示され、そのアイコンをドラッグする事ができます
ドロップ可能アイコンを作成
次はドラッグしたアイコンをドロップする場所を作成します
1. 新規 Widget Blueprint を作成
名前を DroppableIcon とします
2. DroppableIcon にドロップできるようにする
作成した DroppableIcon を開いて Event Graph を編集します
- FUNCTIONS の Override をクリック
- 出てきたウィンドウから On Drop を検索して追加
On Drop を開いて以下のようにノードを接続します
ここでは単にドロップされたら文字を表示するようにします
Return Node の Return Value を True にします。ここが False のままだとドロップした場合も DraggableIcon で Event On Drag Cancelled が呼ばれてしまいます
3. DroppableIcon の見た目を作成
DroppableIcon の Designer を開きます
見た目の作成は DraggableIcon と同じで、色だけ青ではなくピンクにします
4. DraggableIcon と DroppableIcon を同時に表示する
- 新規 Widget Blueprint を作成
- Designer を開く
- 左下の Hierarchy に「Grid Panel」を追加
- Column Fill を２つ追加 (Index[0] = 0.5, Index[1] = 0.5)
- Row Fill を１つ追加 (Index[0] = 1.0)
- 「Grid Panel」に「Named Slot」を２つ追加
- 片方の「Named Slot」の Slot(Grid Slot) の Column を 1 に
- それぞれの「Named Slot」に「DraggableIcon」と「DroppableIcon」を追加
レベルブループリントから表示させる Widget を変更する
5. 実行
Alt + P などから Play をします
青アイコンをピンクアイコンへドラッグ＆ドロップすると Hello の文字が表示されます
発展
ドラッグ元からドロップ先へ情報を伝える
Create Drag & Drop Operationノードを使う事でドラッグ元からドロップ先へ情報を伝える事が出来ます。
1. DraggableIcon の Event Graph を編集
Create Drag & Drop Operationノード の Tag 文字を変更します
- Class ... Drag Drop Operation を継承したクラスを自身で作成している場合は、ここから選択出来る
- Tag ... Drop先へ文字列を渡せる
- Payload ... Drop先へ UObject を渡せる
- Default Drag Visual ... ドラッグ中の見た目
- Pivot ... ドラッグ中のUIの位置を調整
- Offset ... ドラッグ中のUIの位置を調整
2. DroppableIcon の Event Graph を編集
On Drop を以下のように変更します
On Drop の Operation ピンから Drag & Drop Operation ノードの内容を取得する事ができます。
3. 実行
これで実行すると DraggableIcon の Create Drag & Drop Operation で設定した Tag 文字が表示されるようになります
その他のドラッグノード
- On Drag Cancelled ... ドラッグしたけどドロップしなかった場合に呼ばれる
- On Drag Enter ... ドラッグしたアイコンが自身のUIに重なった瞬間に呼ばれる
- On Drag Leave ... ドラッグしたアイコンが自身のUIから離れた瞬間に呼ばれる
- On Drag Over ... ドラッグしたアイコンが自身のUIに重なっている間呼ばれる
ドラッグ＆ドロップでアイコンを移動
こちらのブログ記事にとても分かりやすくまとまっています
- ドラッグ開始したらアイコンを消す
- ドラッグキャンセルしたらアイコンを戻す
- ドラッグ元から CreateDrag & DropOperationノード の Payload でドロップ先にアイコン(UObject) を渡す
- On Drop の Operation ピンから上記のアイコン(UObject)を受け取りドロップ先へ追加
ドラッグ中のアイコンを半透明に
こちらのブログ記事にとても分かりやすくまとまっています
DragDropOperation を継承したクラスの利用方法についてもまとまっています