Drag and drop the right piece in place

Development Programming & Scripting UI
, , , , ,
1

I want to make this “drag and drop the right piece in place” puzzle but I don’t know how to set up the blueprint in the widget interface (UI) since I want to achieve this game in a popup style. Anyone can help me with how to set collision in WI and when the piece hits the collision it snaps in the picture?

347090-find-the-right-piece-jigsaw-puzzle-game-for-childr.jpeg
347090-find-the-right-piece-jigsaw-puzzle-game-for-childr.jpeg944×1390 161 KB

2

347096-screenshot-4.png
347096-screenshot-4.png788×337 209 KB

  • the whole thing should sit in a Canvas
  • create a UserWidget anchor (a border will do), ensure it’s transparent but Visible
  • place 2 anchors for each missing piece
  • when the drag OP is taking place, keep track of how many and which anchors drag enters & leaves
  • if you detect 2 simultaneously, we’re hovering over the correct spot
  • the anchors can be made smaller / larger to control difficulty / required accuracy
  • once we have 2 anchors dragged over & drag is cancelled (or perhaps just detecting 2 anchors is enough), snap the dragged widget to the centre of the anchor in the upper left corner
3

When OnDragDetected is triggered in UserWidget (and Operation created) You can check on any element (image) OnDragEnter, OnDragExit and OnDragOver. Then use Operation pin to get Target->Drag Visual and Target->Drag Payload (Variables->Drag and Drop->Get Visual or Get Payload). You define what is Visual and what is Payload widget when creating DragDrop Widget and use those in OnDrop.

4

Can you show me how to set up the blueprints? I am new to Unreal so I’m quite lost…

5

Which part? The whole thing is a couple of hours of work… that’s for the base interaction, significantly more for any additional features. Longer if I need to to prettify, take screenshots, and even longer if I need to comment the script so you know what’s going on. How far have you gotten with this?

  • prepare the board with slots
  • prepare the draggable pieces
  • prepare the anchors
  • implement the drag & drop

One step at a time.

I am new to Unreal so I’m quite lost…

May I suggest you cover some basic tuts first, especially drag & drop and the fundamentals of how widgets work.

And if you need it done by someone else, there’s also this section:

It will cost you a penny, ofc.

6