Hi, I’m a beginner Unreal Engine 5 developer currently working on a 2D cozy management simulation game set in a bookstore.
One of the gameplay features I’m trying to implement is a “clean the messy bookshelf” interaction, and I’m using only 2D images (UMG widgets) for this.
Here’s what I want to do:
Feature Description:
- The player clicks on a bookshelf actor in the level.
- A popup UI appears, showing a bookshelf in a messy state.
- Several draggable book images appear on the left side.
- Empty book slots appear on the right (representing the bookshelf).
- The player should be able to drag a book to the correct slot:
- If the book is placed in the correct slot:
- The slot image changes to a “organized” version (clean look).
- The book gets locked in place and can no longer be dragged.
- The draggable book disappears from the UI.
- If incorrect, nothing happens.
- If the book is placed in the correct slot:
ChatGPT’s following:
BookShelfActor (Actor Blueprint) – triggers the popup UI on click.
BookShelfWidget (Main UI) – contains:
DraggableBookWidget (book image you can drag)
BookSlotWidget (where the books go)
In DraggableBookWidget:
implement OnDragDetected and OnMouseButtonDown
Set up Create Drag and Drop Operation with Payload = Self and Default Drag Visual = Self
In BookSlotWidget:
I implemented OnDrop and check if Payload.BookID == CorrectBookID
If match: change the image, disable the slot, and remove the dragged widget
This image represents the kind of UI and interaction I’m trying to achieve.
With the help of ChatGPT, I’ve tried to implement the above system using UMG, but it hasn’t worked as expected.
Is there any alternative to doing this with UI Widgets (UMG)? Or is using UMG the only practical way to achieve this kind of 2D drag-and-drop behavior in Unreal Engine?
/ English is not my native language, so I wrote on the forum with the help of a translator.