Smooth Drag N Drop: Godot Guide

I've been hard at work on a game about repairing and refurbishing handheld consoles and as a part of that I had tools and parts that I needed you to be able to drag with your mouse and for them to point at where your mouse was I also needed them to be able to then return to pre designated locations when you let go I'm going to show you how to achieve this effect today I'm RAM and today I'll be your God o guide we're going to start by creating an ode to D adding the Godot icon as a child and centering it we're then going to add an area to D as a child of that and we're going to add a collision shape with a circle as its shape we're going to set the radius to be something reasonable and we're going to use this to detect when we've clicked on the object we want to drag we're then going to attach a script to our route and call it something reasonable we can then dive into our project settings head over to input map and add an action called click if we add a default mouse button event to this it will be set up to trigger on a left-click we can then head back to our scene tree click on area to D click the node tab in the top right and we can see all the signals the area to D can send one of these is input event which triggers whenever Mouse inputs or other kind of inputs occur on the body in question this includes clicks like the one we just defined so we can click connect in the bottom right and connect this signal up to the script we added to our route moments ago this will set us up nicely to check when the objects been clicked on so we can start dragging so in that event we can check if the click action we just defined has occurred if it has we can set a boolean variable called selected to be true let's define this as false just above now we know when our objects been selected we can make it move towards our mouse position what we'll do here is in physics process you will check if selected is true if it is we will lurk our global position towards the result of the function get global Mouse position we will do this at a rate of 25 times Delta what that will do is it will fix it to our frame rate so it won't move at different speeds depending on the machine and for completeness sake loop is a function that interpolates one value the first parameter to a second value the second parameter at a rate determined by the third value so if our third value is 0.5 it would set our value to be halfway between the two numbers but if it was 0.75 it would be 3/4 of the way from the first value to the second value now we can save the scene and check that in action and as you can see if I click on the object it then starts following the mouse around it doesn't snap exactly where to the mouse is it interpolates its way there so you get a smooth motion instead of a sudden one now let's handle dropping the shape we can do that by checking for generic input events within our script this will capture all input events unlike the area 2d input event which will only capture ones that are on the collision shape in question so now we can just listen for an event where it's button index is the left button and it's not pressed in this case the mouse button has been lifted up in this event and so we can select it to be false and when selected is false physic process will no longer loop its position so the shape will be left where it is as you can see here when I click down it moves as before but when I let go it gets left where it is we're then going to create the positions where we can drop our object when it's at rest so we're going to create a new position to D and call it crop zone and then attach a script to that we're going to want to draw the area where we can drop our shape we're going to do that by overloading the draw function within this we're going to use the draw circle method to draw the area surrounding the shape draw circle takes three parameters the first is a local coordinate of where to draw it so if we want to draw it where this position 2d is will pass in vector 2.0 the second parameter is the size of the circle to draw let's go with 75 pixels and finally we're going to want to choose the color of our shape I'm going to pick Blanche almond out of a hat following this we're going to want to choose a group for this shape this will allow us to look up all of the possible drop-off zones in a scene so we're going to add a group and call it zone and now for our finishing touches we're going to need to implement a select and deselect method our select method is going to iterate over every zone in our scene and it's going to deselect it and then after that is going to apply a selected color we're going to go with web maroon and we're going to apply that to our module eight field then in our deselect method what we need to do is set a module eight field to be empty which is done by setting it to be white now we can save what we've done and create a new scene for testing and this is going to contain our drag and drop object and a couple of the drop zones we just created and if we run that we can see we get our two circles being drawn but they're not hooked up to our drag and drop object yet so let's dive straight into that in order to implement this we're going to need to set up a couple variables at the top of our drag and drop script we're going to set up rest point which is going to store the position that we're going to return to at rest and then the list of all of our rest nodes which are all the objects in the group zone so then in our ready function week do exactly that we can get all the nodes in the group zone and assign that to be a rest nodes list and then we can set our rest point to be the first item in that lists global position we can then also run the Select method on that to color it appropriately if we now run this you can see it getting colored appropriately but we're still not returning to that point at rest we're going to return to that point at rest by adding an extra bit to our physics process in there we're going to say if we're not selected we're going to loop our position towards our rest point rather than a global Mouse position and I'm also going to do that at a slightly slower rate for aesthetic reasons now we're going to want to update to actually use the rest point if we drop our draggable object within range so we're going to add a bit more to our input function in here we're going to keep a track of the shortest allowable distance which is 75 pixels as we defined when we were drawing the circle in our rest owns and then we're going to loop over every item in our rest nodes we're then going to find distance from our current object to the rest node we're looking at and we're going to find that using the distance to method so we're going to do global position distance to child or global position and that will return the distance between the two objects in pixels we can then check if our distance is less than the shortest distance we defined moments earlier if that is the case we're going to select that child we're going to update our rest point to be that child's global position and then we're going to update our shortest distance to be that new distance the reason we use this shortest distance approach is because it means that we don't just use the first object we come across that's within range we will actually set our s point to be the most applicable circle if there say overlapping and one's closer than another and just like that the effect is done if we have a look at it in action we can drop our shapes and they will update to use a circle if it's within range and if we drop it outside of the range of any circle it will return to the last rest point finally we want to look at our mouse position as we drag the object around and this is very easy to do no two DS have a method built into them called look at and what look at will do is it will point your node to D towards a vector to you've passed in so if we pass in the global Mouse position as a parameter to look at our node to D will point at the maps so in physics process when it's selected we can do that we can look at get global Mouse position and it will be nice and it will work as we want however when we let go of it we want it to return to its rest position which is at a rotation of zero and the way we do that is in the elf's clause of this physics process we want to lower our rotation however if you lower rotation it won't do quite what you want there's a special version of lerp built-in specifically for angles and that's low angle which I'm going to talk to at a bit more length at the end of this video as an easter egg but that's all you need to do you need to set your rotation to be equal to low angle and pass in the off parameter your first parameter as being your rotation and the second parameter is being zero and then the rate at which you want to return to rest and just like that we have a look at it in action we can drag a sprite around and it will point at our Maps and that's everything we can now go to some examples of it in action here is a rendition of a painting by semi canon called Topol Geist which is playing as a puzzle if you put the candle in the right spot Topol Geist topples it and of course my handheld console repair game I mentioned at the start I'll show you a few more tools that actually use this feature the screwdriver points towards positions whenever it's dragged over a screw it unscrews it and the toothbrush can be used to clean parts of the kit and cartridges can be moved around as well the easter-egg I mentioned here I'm gonna use some Linux magic to go ahead and find the lerp angle function within the c++ of Godot itself so I'm gonna quickly grep where it is and then we're gonna dive into the math func store H file and we can see what it does behind the scenes so it does two very important things first of all it modulus --is the angle so it's within the range of positive and negative towel for anyone who likes using radians you can tell that that means it locks it to be within the minimum maximum angle and the largest maximum angle and then it calculates the quickest direction to travel to get towards that angle and it moves itself in that direction using that distance equals F mod line on 219 and that's the end of the video that's all I've got for you thank you very much for watching if you want to see more content like this please do like and subscribe and all that jazz it really helps the channel out thank you very much for watching and Cheers

Channel: Bramwell Williams

Views: 12,503

Keywords: godot, gamedev, dragging and dropping, drag and drop, tutorial, guide, godot guide

Id: iSpWZzL2i1o

Length: 9min 28sec (568 seconds)

Published: Tue Jun 30 2020

Reddit Comments

[u/fastdeveloper]

Awesome! I loved how elegant this is, without using Godot's own `get_drag_data`. The way you did it allow for more customization.

[u/Squidreece]

Drag ‘n’ drop was one of the first things I tried to do when learning Godot, and it wasn’t as straightforward as I expected! I like your method, I’ll keep it in mind if I ever revisit that first project.

[u/golddotasksquestions]

Great video, really well explained tutorial!! Thanks!

How would you solve picking up only the object which is visually underneath the cursor in 2D when multiple object may overlap?

[u/idoleat]

Nice one! Subscribed :D