Learn Godot UI Control Nodes

Ready to take your Godot UI skills to the next level? In this video, we'll delve into the powerful world of control nodes and show you how to master them for creating dynamic and interactive user interfaces in Godot. Watch now and elevate your game development!

🌐 Check out the blog post for this video:

🗋 View the ControlVisualizer source on Github:

🌐 You can also view the source within the blog post:

💬 Join our growing Discord Community:

☕ Support my work by buying me a coffee:

🎶 Music:

Chapters:
00:00 Intro
00:22 Sponsor
01:25 Control Layout Properties
02:27 Anchor Points, Offsets, Grow Direction
06:39 Review Anchor Presets
08:06 Customizing Presets Further
09:32 Visualizer Tool Script
10:52 Anchor Move Mode
11:29 Container Nodes
13:00 Container Alignment and Anchors
15:07 Container Sizing Flags
16:46 Buildinng a Basic UI Scene
19:16 GridContainer
21:22 VBoxContainer
23:46 Review

#godot #godot4 #godotengine #gamedev #gamedevelopment #indiedev #godotdevlog #godotui

This video was sponsored by Brilliant

[newmicro]

This is very helpful. I've spent hours trying to figure out Godot's UI system and this tutorial filled in several gaps.

[adelatorremothelet]

The first 10 minutes have been pure gold.
You have helped me clarify something that before this video seemed to be black magic or witchcraft.
The anchors and alignments are now crystal clear !

[RShakes]

This was incredibly helpful and well put together! UI has always been one of those things I've never really wanted to mess with but you've demystified it - time to spend some time actually doing it to solidify the knowledge.

[comradecid]

just stumbled across this, and i have to say i'm relieved. mastering godot's particular approach towards layout has been nothing short of aneurysm-inducing.

[lopsidedpolygon]

Crisp, clear, succinct. Excellent tutorial for getting your head on straight! Many thanks! :3

[dueddel]

Never played with the customization of existing presets which up to now have always been sufficient to me. But now that I see the additional control of Control nodes when selecting "Custom" for Anchor Preset I think I just only scratched the surface for how to deal with UIs. This is pretty cool! Thanks for sharing! 😘👍

[georgepitoy]

Thank you so much for this! I could never understand how anchors work so I was mostly just using Full Rect and using MarginContainers everywhere. This makes so much sense now.

[deadlymetix]

High quality content. Learned alot from that tutorial. Thank you so much <3

[GenericInternetter]

The UI nodes are pretty straightforward and very well documented/tutorial'd.
But what is still a complete mess in my mind is anchors, margins, resolution limits, etc.

[SilentscufflE]

I really appreciate what you're trying to do, but it's still insanely hard to wrap my head around this without this being in relation to the viewport it's going into and the UI element that I need to put there. Like, yes, I can offset a box. What is it in relation to? What does the anchor actually do? What if it's at a larger resolution? What would I need to do to just keep something in the center or a specific offset if not just ticking the Center option and dragging it around? What about with its parents? I keep listening to this over and over again and it's like I'm just hearing math equations. I cannot comprehend why these control nodes are so infuriating.

[wukerplank]

Such a helpful channel, thank you for the hard work!

[redshepard]

nice video, thanks. also, cool channel logo yo

[FoxyFernAnimation]

Super helpful video, thank you! Made me understand better how vbox, hbox etc work and how to utilize them properly.

[malandr]

Extremely useful, thank you so so much !! <3
May I ask, could you please develop a bit on which is best practice between using that anchor offset method compared to the Margin node ?

[savmass]

Great video. I'm still kind of confused as to why you'd use Vbox and Hbox Containers when control seems to do it all? Do those give you more flexibility with layout I'm not seeing? Maybe if the case of wanting to have multiple boxes evenly spaced out?

[garya]

at 9:25 you got my big question answered "why the heck would I want offsets in pixels if I can deal with percentages from anchor points, because %s are easy to understand but I've never deal with graphics like pixel art

[mq]

Thanks! I just started using Godot, so this was almost impossible for me to wrap my head around.
The Docs are not that useful in that respect either. Thank God for tutorials like this! great one

And as you said in a comment, yes, next one should be Viewport/Canvas/Windows and all that jazz.

[davidfall]

Do you have any videos on Plugins? I found myself stuck trying to programmatically add child nodes from a scene script instead of the plugin initialization script 😅

[TheRealAfroRick]

Your control script needs to be the default behavior. It is extremely useful.

[hellblazer]

wait, so you mean to tell us that theres a way to understand Godot UI? haha. loved this tutorial.
thank you!