Is there any possible way so that when this widget opens, you can click and drag images to a specific area in the widget?
Oh, and if possible, is it also possible to implement a point system when they’re dragged to that specific area?
(Kind of a newbie here)
Very possible and thoroughly documented over the years:
https://www.youtube.com/results?search_query=ue4+drag+and+drop
Also:
they’re dragged to that specific area?
You’d create User Widgets that implement onDragEnter and onDrop functionality. The former could serve as an indication that we’re hovering over a widget and the latter is a data delivery method - the drag operation is a payload carrier.
Currently your question is too broad to answer but once you have a more specific query, do tell! Since you’re new, it may pay off to follow a tutorial to get the hang of the UMG, which can be an unruly beast.
once you have a more specific query, do tell! Since you’re new, it may pay off to follow a tutorial to get the hang of the UMG, which can be an unruly beast.
So the widget looks kind of like this.
The waste inventory labelled there would contain many different 2d objects (images). The goal is to drag those from the waste inventory into the correct area [aka. the blue square, green square, or red square.]
I hoped it could all work in just a single widget, if possible.
You’d need 2 widgets here. Create a widget that represents a waste drop box, something simple may suffice:
Text is padded so it appears outside:
Add an Instance Editable linear colour variable and run the PreConstruct to preview changes in the editor:
Create a main widget that will house those three boxes:
Since we have an Instance Editable variable, we can use it to colour the boxes:
You can do the same with text, this way you can create custom reusable widgets. You can now script the drop functionality only once and all 3 boxes will behave the same. You will want to add some filtering regarding which box accepts what. Enumeration would work well for this, something along the lines of (an instance editable variable of the enumeration type):
Next the time the drag operation interacts with such widget, it can use those values to identify the dropbox’ purpose.
I see! How about the part where the objects can be dragged and dropped?
Should I just follow this?:
https://www.youtube.com/results?search_query=ue4+drag+and+drop
If you’re doing the whole thing for the very 1st time, I’d suggest following a tutorial (even though it may not be 100% what you need - just to get an idea of the logic behind it) as what I’ve posted may not contain every detail needed.
How about the part where the objects can be dragged and dropped?
As a kickstarter, consider the following:
- this would go into the widget that we’ll be dragging around - called wRubbish here
- the override dropdown is full of useful functionality
- here we’re detecting whether a specific mouse button is attempting to drag the widget about
- below, still in the same wRubbish widget, we override what happens when the dragging actually starts
- the above would create a Drag & Drop Operation that will handle most of the dragging process
We would then need to implement what happens when the abovementioned drag & drop operation terminates over a widget. You’d implement onDrop in the boxes mentioned in the previous posts.
The payload is the reference to dragged widget, here you’ll decide what happens to it and what other logic triggers.
Should I just follow this?
Whenever you see content by Mathew Wadstein, it’s pretty much guaranteed to be short, sweet, void of bull$ & straight to the point. Highly recommended if all you want is to learn core functionality behind a feature rather than follow a 36 episode tutorial series replicating creation of a MMO inventory.
Regarding this:
I hoped it could all work in just a single widget, if possible.
It could be done in a single widget but we don’t know how far this needs to be taken. If you’re planning on having more than the most basic functionality, it’s much more convenient to have widgets that can encapsulate the desired behaviour their parent does not need to know about.
It’s a pretty standard approach that allows you to stay a bit more flexible further down the road.
Thank you very much!
One problem I’ve encountered. Whenever I drop it to the widget and play an animation of it getting smaller, it plays it on the waste inventory and not the trashcan widgets.
A clone of it also stays on the waste inventory whenever I drag it.
When you drop:
- add the payload to a new container (a border / named slot in the recycle widget)
- play the animation
- once the animation has finished, Remove (the dropped widget) From Parent
It would look close to this:
- expose the desired container as variable (here, a border):
- create a custom event to handle the animation and removing the widget after.
- when you drop:
Untested but should work a.k.a. famous last words…
Essentially a widget can only have a single parent, adding a widget to new container reparents it.
The above can be made work better with a custom Drag&Drop operation.
- add the payload to a new container (a border / named slot in the recycle widget)
I’m a little confused with this one. Do I add a new container on the trash bin widget or the waste widget? Also, if it’s on the trash bin, does it mean it’s a replacement for the other border?
Sorry, a bit confused here.
Also, if it’s on the trash bin, does it mean it’s a replacement for the other border?
You can use the existing border in the widget representing where the garbage is supposed to go:
In short: in order to display an animation, the dragged widget needs a new parent (otherwise it will play in the old parent, where you dragged it from). There are other ways of doing it but that’s the most straightforward and reasonable.