Тёмный

Godot 4 Drag-and-Drop Tutorial: Create Interactive Games with Ease 

Dicode
Подписаться 4 тыс.
Просмотров 29 тыс.
50% 1

Welcome to our drag-and-drop tutorial! 🚀 Learn how to create an interactive drag-and-drop system in Godot that will captivate your audience and boost your game's engagement. In this comprehensive Godot tutorial, we cover every aspect of drag-and-drop implementation, including droppable areas, draggable objects, and smooth drag logic.
Our step-by-step guide ensures you'll grasp the concept, whether you're a beginner or an experienced developer. You'll discover how to use Godot's powerful tools to make your game objects snap into place effortlessly while maintaining high-quality gameplay. This tutorial is packed with practical examples and expert tips, making it perfect for game developers of all levels.
🔥 Key Highlights:
Creating droppable areas in Godot
Making objects draggable and responsive
Customizing drag-and-drop behaviour.
Handling object snapback and animations
Perfecting your game's user experience
Join us on this game development journey, and let's make your games more engaging and interactive! 🔮 Don't forget to like, subscribe, and share your thoughts in the comments below. Let's dive in and elevate your game development skills! 💫
📌 Timestamps:
0:00 Overview
0:24 Creating Droppable area.
1:30 Creating Draggable object.
5:32 How to use it.
5:47 End talk.
#godotengine #gamedevelopment #indiegamedevelopment #draganddrop #gamedesign #tutorial #interactivegames #godottutorial

Опубликовано:

 

2 июл 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 55   
@woozyyidk860
@woozyyidk860 12 дней назад
Great tutorial, did exactly what I needed. Thanks! Not sure if I just messed something up, but if anyone else is having issues with the object not snapping into place when released inside the slot, reduce the slots 2D area size. Worked for me.
@samuelleal4250
@samuelleal4250 5 дней назад
ColorRect can interfere with mouse interactions because it captures input events by default. To ensure that the ColorRect does not interfere with your other game mechanics, you can set its mouse filter to "Ignore". Steps to Set the Mouse Filter of a ColorRect to Ignore 1. Select the `ColorRect` Node: - In the Scene tree, select the `ColorRect` node that you are using as your background. 2. Access the Inspector: - In the Inspector panel, look for the `Mouse` section. 3. Set the Mouse Filter: - Find the `Mouse` section, which contains the `Mouse Filter` property. - Change the `Mouse Filter` property from `Stop` (default) to `Ignore`. Godot Version: 4.2.2
@rcjvet
@rcjvet 8 месяцев назад
I did not implement the same solution as you, but your solution sparked a thought which allowed me to get past a hurdle in my code. Thanks!
@syncr0904
@syncr0904 7 месяцев назад
This was EXACTLY what I was looking for! Thanks so much
@origenydestino13
@origenydestino13 2 месяца назад
Fantastic. Simple and clean, and opening lots of doors for various stuff for interactable interfaces. Thanks a lot!
@MagicCubeWorld
@MagicCubeWorld 2 месяца назад
This is the best Godot drag and drop tutorial I've seen. Thank you.
@KuroNekoji
@KuroNekoji 9 месяцев назад
Easy to follow and understand what is coded and why Very nice, thumbs up!
@Kriinsch
@Kriinsch 6 дней назад
In the Object script I would add another condition or a seperate condition to check if the body_rev is the same as the body that is left. For me the two "slots" are very close together and the Object left the first slot while in the second slot, so the left function triggered and set the draggable flag to false. So instead of func _on_area_2d_body_exited(body): if body.is_in_group("dropable"): use func _on_area_2d_body_exited(body): if body.is_in_group("dropable") && body_ref == body:
@canaldocoalhada9905
@canaldocoalhada9905 4 месяца назад
You've saved a lot of work, thank you!
@morpheeze
@morpheeze 6 месяцев назад
If you come here wondering why suddenly opening the project in Godot 4.2 does not appear to do anything check the BG colorrect mouse setting. For some reason that gets flipped. You want it to be Ignore or Control.MOUSE_FILTER_IGNORE in code.
@user-hj8mb6yc2k
@user-hj8mb6yc2k 6 месяцев назад
Hey in case you have problems and your drag and drop doesnt work -> but the object changes scale: check if you added the 'click' action in the inputmap (located in the project settings tab) -> but you cant move it around because it doesnt detect the click (but it works in the secondary scene) (set the mouse filter to ignore on the color rect in the main scene)
@user-hj8mb6yc2k
@user-hj8mb6yc2k 4 месяца назад
Oh yeah, in case you can click through multiple objects when using this script you need to use get_tree().get_root().set_input_as_handled() (Again working with godot has made me lose my mind)
@Anna-Mashiro
@Anna-Mashiro Месяц назад
@@user-hj8mb6yc2k Hi! Maybe a bit late but I have a simple canvas modulate with a colourrect over it for a shader. I am however unable to click through this (everything works fine if I hide it for a second) where whould I add this so I can click through it?
@user-hj8mb6yc2k
@user-hj8mb6yc2k Месяц назад
@@Anna-Mashiro that sounds like its catching mouse events. Did you set the mouse filter to ignore on that canvas object? I might be wrong, sorry for the late reply
@rluis
@rluis 4 месяца назад
Using areas to detect the mouse over is falible... why not use transparent buttons?
@dobleve_walas
@dobleve_walas 4 месяца назад
Very well explained, simple and usefull tutorial. Keep it going!
@Crisisdarkness
@Crisisdarkness 9 месяцев назад
Oh this is very useful, it is just what I need to learn, but I would like to use this in a 3d approach, but I feel that with this logic I could know how to do it, thanks friend, your channel is very valuable
@user-zi4wc9oi2d
@user-zi4wc9oi2d 7 месяцев назад
This is SOOOOOOOO useful. Thanks
@vizikey
@vizikey 9 месяцев назад
Very nicely done.
@metinovadilet
@metinovadilet 8 месяцев назад
You're fantastic mate
@mortiphago
@mortiphago 9 месяцев назад
Great tutorial
@valthalin7613
@valthalin7613 8 месяцев назад
Great tutorial, thank you! one bug is on quick mouse movement the item is "dropped". Might you have a fix for that? Thank you.
@mrussogamedev
@mrussogamedev Месяц назад
Thanks a lot!
@soirema
@soirema 2 месяца назад
for anyone else stuck the object and background are two seperate scenes and there is one more that combines them
@trovestove6886
@trovestove6886 9 месяцев назад
Thank you
@manuelribeiro8136
@manuelribeiro8136 7 месяцев назад
Thanks for sharing, could you also post or share the complete code.
@DennisRevy
@DennisRevy 9 месяцев назад
Thank you so much for this tutorial. I initially tried 16bitDev's tutorial but realized the icon deletes when dropped in non-droppable areas.
@dicode1q
@dicode1q 9 месяцев назад
Glad it helped
@rgstudio7272
@rgstudio7272 2 месяца назад
I am trying to create a card swipe. Any suggestions?
@tobydanieljones
@tobydanieljones 2 месяца назад
⚠There's a problem with the logic if the platforms are too close together, and the object can be touching two platforms at the same time. When the object is dragged from the first platform over the second platform, is_inside_dropable = TRUE, but then, if the user drags the object further, leaving the first platform, is_inside_dropable gets set to FALSE. That means, when the object is dropped, it returns to the first platform. Nevertheless, this video taught me a lot, thanks!
@jornlamb7271
@jornlamb7271 Месяц назад
Yea I noticed this bug too. Would you know how to fix it?
@tobydanieljones
@tobydanieljones 15 дней назад
@@jornlamb7271 Sorry it took me so long to reply, I was busy with another part of my project. What I've done is set up an array of bodies, appending a body when entered, and removing it from the array when exited. That way, if a body is entered, then a second one, then that body is exited, the first body is still in the array, and you can use that to move to.
@tobydanieljones
@tobydanieljones 15 дней назад
extends Node2D var draggable = false *#REMOVED* var is_inside_dropable = false *#REMOVED* var body_ref var offset: Vector2 var initialPos: Vector2 var array_of_bodies = [] *#ADDED* # Called when the node enters the scene tree for the first time. func _ready(): pass # Called every frame. 'delta' is the elapsed time since the previous frame. func _process(_delta): if draggable: if Input.is_action_just_pressed("click"): initialPos = global_position offset = get_global_mouse_position() - global_position global.is_dragging = true array_of_bodies.clear() #ADDED to clear array if the original location was added to the array when using tween back to the initialPos if Input.is_action_pressed("click"): global_position = get_global_mouse_position() - offset elif Input.is_action_just_released("click"): global.is_dragging = false var tween = get_tree().create_tween() *#REMOVED* if is_inside_dropable: *#REMOVED* tween.tween_property(self,"position",body_ref.position,0.2).set_ease(Tween.EASE_OUT) if not array_of_bodies.is_empty(): *#ADDED* tween.tween_property(self,"position",array_of_bodies.back().position,0.2).set_ease(Tween.EASE_OUT) *#ADDED* array_of_bodies.clear() *#ADDED* else: tween.tween_property(self,"global_position",initialPos,0.2).set_ease(Tween.EASE_OUT) #NOTE this will add the original body to the array func _on_area_2d_mouse_entered(): if not global.is_dragging: draggable = true scale = Vector2(1.05, 1.05) func _on_area_2d_mouse_exited(): if not global.is_dragging: draggable = false scale = Vector2(1, 1) func _on_area_2d_body_entered(body): if body.is_in_group('dropable'): *#REMOVED* is_inside_dropable = true array_of_bodies.append(body) *#ADDED* body.modulate = Color(Color.REBECCA_PURPLE, 1) *#REMOVED* body_ref = body func _on_area_2d_body_exited(body): if body.is_in_group('dropable'): *#REMOVED* is_inside_dropable = false array_of_bodies.erase(body) *#ADDED* body.modulate = Color(Color.MEDIUM_PURPLE, 0.7)
@annabelleowl9586
@annabelleowl9586 2 месяца назад
Heya i'm an absolute programming beginner and i managed to get through with a bit of trial and error (mostyl had problems with the autoload, i didn't know what it was) Now i finished both prefabs and on their own they work fine but as soon as I put them into a scene the draggable object becomes unresponsive. Do you know why that could be?
@thefufuu3157
@thefufuu3157 7 месяцев назад
thanks for the tut ... ! is there an easy solution if your item is bigger then 1 slot ? i tried with two slots into two inventory slots it kinda does a thing but not really you maybe got an idea how to challange that ? or anyone else
@syncr0904
@syncr0904 7 месяцев назад
If the collision shape is the proper size it should activate the body entered function on both. The main thing will probably be to make an array of body_ref to track all currently overlapping bodies. And on release you will probably need some logic to figure out which body to tween to. Which would include ensuring that it isn't hanging off to one side. Hope that helps if I'm not too late
@kylestan5874
@kylestan5874 8 месяцев назад
I'm not quite sure how to make it work for 3D any ideas?
@Anna-Mashiro
@Anna-Mashiro Месяц назад
Hi I am having some issues and I was hoping I could get some help. When I hover my dragable object over the area it does not change colour not does it snap to it when released. I made sure it's a staticbody2d and it's grouped in the group called 'dragable'. Somehow it doesnt regonize it at all. It however does appear as soon as I pick up my dragable object. Any ideas? Thank you so much!
@PainCrazyClub
@PainCrazyClub Месяц назад
maybe you forgot to connect the signal "$Area2D.body_entered" with "_on_area_2d_body_entered"
@Galoline
@Galoline 6 месяцев назад
Hey, for some reason whenever i place my object it goes straight down? Any idea what this could be?
@benkimball9388
@benkimball9388 6 месяцев назад
Possibly you used a RigidBody2D and gravity is affecting it?
@user-gu8qv9cv7w
@user-gu8qv9cv7w 5 дней назад
"I can't follow along because there are omissions from the beginning"
@muerteplay3
@muerteplay3 5 месяцев назад
mmmm, i tested but are varius problems to resolve: -if the player move fast, the tween not work correctly -any cases the cursor capture the object but the platforms not showing -the droping any cases not work but literal the platform is in area - if the platforms are very nearest the object cant be moved(inventory problem)
@soirema
@soirema 2 месяца назад
i dont think this is for noobs o.o 2:00 where did you get these signals from ?
@tobydanieljones
@tobydanieljones 2 месяца назад
Click on "object", right click, Attach Script (creates blank script) Click on "Area2D", click "Node" (on the right hand side) to list signals, double click on a signal, the 'object' node is pre-selected, click Connect, it adds the function to the script.
@soirema
@soirema 2 месяца назад
my object snaps to the center no matter what i do, any tips?
@soirema
@soirema 2 месяца назад
i didnt assign dropable to the platform! it works great now! TYSM! great code!
@u1over
@u1over 6 месяцев назад
Dear people, how can i prevent multiple objects placed in one slot?
@Quaffyson2
@Quaffyson2 2 месяца назад
Did you by chance find a fix? If so, slide me the answer, good sir! 🙏
@u1over
@u1over 2 месяца назад
@@Quaffyson2 Hey! Yes i managed to do it with help of my friend. You make a script for your slots(Areas2d or whatever), there you place var occupied = false. In object script after tween func you wright body_ref.occupied = true, and in on_item_area_body_entered you say if not body_ref.occupied, is inside dropable = true. And you tell body no to be occupied when you drag item out of it. Hope this will help!
@Quaffyson2
@Quaffyson2 2 месяца назад
@@u1over Thank you! You saved me many headaches!
@Mehmet_Xan
@Mehmet_Xan 6 месяцев назад
*Easy
@Nelcia1
@Nelcia1 6 месяцев назад
But you didn’t show the code to actually drag the object
@scottmurphy6030
@scottmurphy6030 8 месяцев назад
☹️ "promosm"
Далее
I recreated Balatro's effects in Godot
8:04
Просмотров 23 тыс.
I Made the Same Game in 9 Engines
16:12
Просмотров 270 тыс.
DO NOT Dunk Here ❌🏀
00:20
Просмотров 6 млн
Smooth Drag N Drop: Godot Guide
9:28
Просмотров 44 тыс.
Optimizing my Game so it Runs on a Potato
19:02
Просмотров 451 тыс.
I made a game using Godot for the first time
7:35
Просмотров 1,1 млн
A new way to generate worlds (stitched WFC)
10:51
Просмотров 512 тыс.
Math for Game Programmers: Building a Better Jump
25:43
The 7 MOST Useful ADDONS for Godot 4
4:05
Просмотров 19 тыс.
Do THIS Before You Publish Your Godot Game
3:33
Просмотров 146 тыс.
Godot 4 - Tiled Dungeon Environment From Scratch
26:24
Просмотров 386 тыс.
DO NOT Dunk Here ❌🏀
00:20
Просмотров 6 млн