I am trying to simply move a User Widget back to the start position after mouse release. This is part of an inventory system. The user releases the mouse but the widget is not at a location to fit anywhere, so it travels back to the original position, on its own.
I know how to set the position instantly. But I would like to do this over time. I am using the drag drop operation for the movement by the user. When the mouse drag is over, the main canvas of the main widget gets the drop event but I guess there is no built in function to just move the widget in 2d space between two points over a given time.
There is not. You normally fake something like this. Let the drag cancel do its thing of not reparenting the widget. Make a copy of the widget’s visual and interpolate its slot position inside the canvas (not sure how your inventory works exactly but you do have a canvas there, so that’d work well!). Since you know the coords already, feed the interp desired target location:
This should (ideally!) be done inside the widget that is moving. So you can have multiple fly to where they’re needed in case the user drag & drops frantically in frustration. Once they reach their destination, destroy them - they were fake visuals in the first place anyway… Have a look at this:
The icons travel to a specific 2d coord on the screen. It’s not that different from what you need.
I know how to set the position instantly. But I would like to do this over time.
Not sure what you mean by time here, but!
Were you to employ a widget animation here to make it time-based, it would not work well. Think about it - if you drop something 1000px away vs 100px - do you still want the movement to last 2s in both cases? That would look quite inconsistent. You could then speed that animation up based on the necessary traverse distance, of course, but that’s like doing rigid interpolation with… extra steps.
May work OK in some fringe case scenarios if you’re after some very specific type of movement.
What a detailed reply. Thank you! I was able to make it work.
I have some follow up questions:
Am I right to assume the accepted best practice for dragging is then to create an image, instead of dragging the actual widget? I see this in the drag drop tutorial in the docs.
If so, how do you handle the original image still in place on the UI? I mean if you try to create the illusion that the actual item is being dragged. I have tried to fade the widget out in the On Drag Detected override but it also fades out the copy, the image being dragged.
You can’t see the drag because the dragged widget, who happens to be our visual, is also hidden. That’s why having a discrete visual can be useful:
Having a separate visual means having full control over it. if you create a custom drag operation, you also get access to both there in order to handle more elaborate scenarios.
the accepted best practice for dragging is then to create an image, instead of dragging the actual widget?
One can get real cheeky, though; rather than creating a separate visual widget, feed the visual only the critical element that you want the visual to represent:
The illusion (still!) is convincing but way less labour intensive. The dragged widget gets hidden, sure, but the elements that are the visual bits are not…
