Better Drag-and-drop Sprite

An asset by JuankyTheMan
The page banner background of a mountain and forest
Better Drag-and-drop Sprite hero image

Quick Information

0 ratings
Better Drag-and-drop Sprite icon image
JuankyTheMan
Better Drag-and-drop Sprite

Easy way to drag and drop in Godot without using Collision Shapes. This is based on the Drag-and-drop Sprite demo by brylie.

Supported Engine Version
3.2
Version String
2.0
License Version
MIT
Support Level
community
Modified Date
3 years ago
Git URL
Issue URL

Better Drag-and-drop Sprite

Easy way to drag and drop in Godot without using Collision Shapes. This is based on the Drag-and-drop Sprite example by Godot Garden.

Improvements:

Issue 1: Sprite's center moves to the mouse position on click

First issue I found was that when a sprite was clicked, the center of the sprite moved to the mouse position. That causes some problems when trying to drag multiple sprites, and also, it didn't look good. I fix it using vectors:

The `mouse_pos` vector, is the position where we first click the sprite to move it around, and the `mouse_to_center` vector is a static vector that represents the distance between where we are grabbing the sprite to the center of it. To calculate the `mouse_to_center` vector I did the following: First, when we click the sprite, we calculate the `mouse_to_center` vector using the sprite position (at the moment when we clicked). So, `mouse_to_center = sprite_pos - mouse_pos`. Then, when dragging the sprite, we calculate the "new" sprite position as the `mouse_position` plus the `mouse_to_center` vector. That's it!

Issue 2: Using multiple sprites (Overlapping sprites)

When we have multiple sprites in one place, we always want to move the sprite on the top. To get the top sprite, a lot of drag and drop examples use a picker object that is "attached" to the mouse (It's actually following the mouse around). Now, that method requires the use of Collision Shapes and Area2D nodes, and I didn't want to use them. So I figured out another way to do it: When the mouse enters a Sprites area, is added to a sprites array, so then, when we click, we order the list by z_index and get the top sprite that we want to move. Really easy!

Help me improve this example

My brain was not working at a 100% when I made this example, so I think a lot of code can be improved. Please feel free to help me improve this example, so we can help more people.
Thanks cezuriku for simplyfing the code and updating it to Godot 3.2!

License

MIT License - see LICENSE for more details.

Easy way to drag and drop in Godot without using Collision Shapes. This is based on the Drag-and-drop Sprite demo by brylie.

Reviews

0 ratings

Your Rating

Headline must be at least 3 characters but not more than 50
Review must be at least 5 characters but not more than 500
Please sign in to add a review

Quick Information

0 ratings
Better Drag-and-drop Sprite icon image
JuankyTheMan
Better Drag-and-drop Sprite

Easy way to drag and drop in Godot without using Collision Shapes. This is based on the Drag-and-drop Sprite demo by brylie.

Supported Engine Version
3.2
Version String
2.0
License Version
MIT
Support Level
community
Modified Date
3 years ago
Git URL
Issue URL

Open Source

Released under the AGPLv3 license

Plug and Play

Browse assets directly from Godot

Community Driven

Created by developers for developers