Drag and drop in Godot part 1, UI Control nodes

Подписаться 1,7 тыс.

Просмотров 13 тыс.

50% 1

An explanation and demonstration of the built in UI control drag and drop capability in Godot. Godot has drag and drop built in for control nodes. This video will cover the functions involved and provide a functional example you can use as a starting point for drag and drop in your own game's user interface.
☕ Buy me a coffee ► www.buymeacoffee.com/exploreg... Support is greatly appreciated!!
#gamedev #godot #godotengine #UI #drag_and_drop
⏱ TIMESTAMPS
00:00 Intro
00:24 Demo final example
01:37 Introduction to concepts
05:00 Minimal example walkthrough
07:40 Final example walkthrough
Get all the source code for this demo at github.com/exploregamedev/God...
Subscribe to this channel:
/ @exploregamedev
👋🏾 Social
Mastodon: mastodon.gamedev.place/@explo...
Twitter: / exploregamedev
Follow me on SubStack
Website: exploregame.dev
Check out my itch.io page
exploregamedev.itch.io/
My current active project in Tilth studio: exploregamedev.itch.io/tilth
-------------------------
My current equipment set up. Theses are some good choices if you are looking
-- Audio --
Shure MV7: amzn.to/3Bm0gC3
Blue Microphones boom arm: amzn.to/3HtYMcK
-- Video --
Sony A6400: amzn.to/3W6VH6v
-- Display --
Dell 27in ultrasharp 4k monitor(x2): amzn.to/3uGD0ed (high pixel density displays)
Quntis Computer Monitor Lamp: amzn.to/3iMOcDf (reduce eye strain)
-- Input --
IQUNIX A80 mechanical keyboard: amzn.to/3hfgUwb
Logitech MX Ergo Wireless Trackball Mouse: amzn.to/3YiXMOO

Игры

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

8 июл 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 45

@rightbraingames7418 2 года назад

Awesome Tutorial! Thank you for sharing your knowledge!

@ExploreGameDev 2 года назад

Hey thanks, glad you found it useful.

@ExploreGameDev 2 года назад

Let me know if you would like a more advanced example of drag and drop. Happy to provide that. Cheers

@gavinbarnard2220 Год назад

yes please

@luism9886 Год назад

This code snippet is awesome, I could copy paste it to save time.

@mdlsvensson 2 года назад

Absolutely terrific tutorial, subbed

@ExploreGameDev 2 года назад

thanks Wilmer

@Foxerski 2 года назад

This video helped me with my game, thanks!

@ExploreGameDev 2 года назад

Hey thanks, glad it helped.

@d.c.oculos9284 Год назад

un grande, gracias

@papazedyt4846 2 года назад

This is exactly what i was looking for! Many thanks man, and please prepare more of drag and drop tutorials :)

@ExploreGameDev 2 года назад

Thanks, really glad you found it useful. I do have a part 2 planed, subscribe to get notified :)

@ExploreGameDev 2 года назад

Let me know if there are specific things about drag and drop you'd like to see

@papazedyt4846 2 года назад

@@ExploreGameDev Im doing card game right now, but im newbie to Godot. So another vid with card viewing and positioning on panel (depends how cards we have) and dragging would be helpful. Thanks and good luck with ur channel

@ExploreGameDev 2 года назад

@@papazedyt4846 Very cool, Godot is a great game engine for that. The next vid will add dropping into indexed positions which could be helpful for a card game. In the meantime Game Dev Center has a video that might also apply ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-dZYlwmBCziM.html

@papazedyt4846 2 года назад

@@ExploreGameDev already viewed :) cant wait for yours new vid, cheers!

@LunaticEdit Год назад

Thanks for this. I now have tibia style window dragging and reordering! If you're like me and you have a parent class for all draggable windows, you can load the parent class with load(), set the window title and size, and bam you have a great preview window for the drag as well!

@ExploreGameDev Год назад

hey, you are welcome. Thanks for the tip on utilizing parent classes. I've been thinking of doing a GDScript video on just object oriented topics.

@LunaticEdit Год назад

@@ExploreGameDev Good idea. A friend and I are doing an online game similar to Tibia and we utilize OO scenes a whole lot. It makes things a thousand times easier to manage and keeps our code from getting complex. Especially when you have networking involved.

@gavinbarnard2220 Год назад

Thank you!!

@ExploreGameDev Год назад

You are welcome, glad you found it useful

@a_soulspark Год назад

just a heads up, in Godot 4 the get_drag_data() function was renamed to _get_drag_data() (notice the underscore!) hopefully will save some people from headaches ^^

@alpacapico 7 месяцев назад

just figured this out on my own after 15ish minutes of thinking I was going crazy -_- as an addendum to this, you have to implement BOTH _get_drag_data() and _drop_data() in order for it to even detect if you're trying to drop something on it

@dueddel 2 года назад

…aaaaaand subscribed. 😊

@DrNabeel20 Год назад

Thanks ❤️

@ExploreGameDev Год назад

You are welcome, glad you found value in this video!

@wait.whatwhy2689 2 года назад

Really one of the best tutorials I've ever seen. Just fantastic explanations! *subscribed* --Really minor suggestion - you might consider changing the color of #commented script text .. the yellow-green color now looks very similar to the "string" yellow, and it could be confusing for a very beginner - though probably it's not a big deal

@ExploreGameDev 2 года назад

Wow, that's amazing praise, thank you 😀. Also, thanks for pointing out the changed color on the # comments. I had forgotten I'd changed that. Next video is filmed be we'll get it corrected after that.

@mahsanmehdi 2 месяца назад

very nice way of delivery, Thanks for sharing! I would appreciate other tutorial it with conditions implementations if the element is not dropped on required position like player leave the mouse on anywhere except the target dropped area then it should goes back to their original position thanks again

@ExploreGameDev 2 месяца назад

Thanks, great ideas for future tutorials

@timetorelaxfocus9642 2 года назад

Thanks

@ExploreGameDev 2 года назад

You are welcome

@josmarpinheiro2589 2 года назад

Top vídeo , playlist godot please.

@ExploreGameDev 2 года назад

thanks for the reminder, I created a Godot tutorials playlist

@harshsidhu51 2 года назад

Hey , can you make basic tutorial about UI nodes . There is basically very less content about basics of control node and ui in godot . I liked ur style of explaination thats why i am requesting you .✌By the way great explaination !👏

@ExploreGameDev 2 года назад

That's a great suggestion Harsh, I'll add that to the queue of video's I'm working on. I agree, compared to other topics, not as much recent stuff out there for UI nodes.

@beamaybelarmino3437 Год назад

Amazing, but i have a question sir, is it possible to change the data/values inside the button? which will come from the database specifically firebase. Thank you in advanced for answering my question.

@ExploreGameDev Год назад

Thanks, that's certainly possible. It would all be done in script. I've not done that myself. You might start with @FinePointCGI ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE--ybnJ8CXScQ.html they've done some tutorials in that regard.

@stillprophet7529 11 месяцев назад

Amazing video, just have one problem. I have set it up the same way you have (as far as i can tell) and it works but when i drag something onto the target container it seems like its getting "blocked" by the margincontainer and vboxcontainer inside it. It will only let me drop the node in the area around the outside that isnt "blocked" by the children

@ExploreGameDev 11 месяцев назад

hmm, have you checked the mouse filter settings for all controls "above" the target container. They should all be set to "Ignore" (MOUSE_FILTER_IGNORE). (discussed here: docs.godotengine.org/en/stable/classes/class_control.html)

@stillprophet7529 11 месяцев назад

@@ExploreGameDev ah ofcourse, I knew there was something I missed, my bad, thank you!

@ExploreGameDev 11 месяцев назад

@@stillprophet7529 great, glad that worked out.

@RajanSingh-zj2eo Год назад

Can you please make a video on drag and snap to grid for isometric tilemap with touch controls not mouse. A request from a subscriber.

@ExploreGameDev Год назад

Thanks Rajan, that's a great idea for a video. I could do something like that at some point, I've not worked with touch controls before, could be interesting.

@cz_czan 22 дня назад

I'm not quite sure why these built-in virtual function are not called when I try to drag and drop a Panel control node? As a workaround I will just use a different control node type for a parent but I have no idea why it works on TextureRect and ColorRect, but not for example Panel