Godot UI Basics - how to build beautiful interfaces that work everywhere (Beginners)

Hello Godotneers! Building a nice-looking user interface Godot that works across screen sizes and aspect ratios can be quite a daunting task. This video will provide you with the basics that you need to build your very own user interfaces with the Godot game engine that work everywhere. With it you get a good foundation on which you can build in your future adventures.

00:00 Introduction
00:50 Scene setup
01:27 Building a small dashboard
04:17 Setting up a reference resolution
06:09 Separating the UI into a separate layer
07:16 Introduction to containers
07:56 The GridContainer
08:48 Replacing sprites with TextureRects
11:22 How containers do their work
14:33 Auto-resizing with PanelContainer
15:36 MarginContainer for adding borders
16:37 Why using containers is important
17:05 Using themes for a custom look
17:56 Creating a custom look for labels
18:47 Applying the theme to the UI
20:18 Creating a custom PanelContainer
22:10 Applying theme changes
22:35 Creating a mission dialog
23:20 Auto-wrapping label text
23:41 Stacking components with VBoxContainer
24:29 Creating a variant of the PanelContainer
25:50 Using a variant in the UI
26:09 Overriding built-in variations
26:51 Centering label text
27:08 Creating custom buttons
29:25 Horizontal controls with HBoxContainer
29:54 Controlling the size of controls
30:57 The "expand" flag
32:36 Dividing available space
35:00 Sizing flags explained
36:55 Centering controls
37:17 CenterContainer
38:15 Using spacer controls
40:18 Handling changes in window size
40:43 Anchoring UI elements
42:01 Handling different resolutions
43:44 Handling different aspect ratios
45:45 Conclusion

Useful links:
-----------------------

[WarrenMarshallBiz]

Hands down, this is the best video I have ever seen on Godot's UI. Just top shelf work, well done! Your channel already deserves to blow up. Keep it up!

[georgeml-o_o]

Me watching the video: wow SOOO simple, what an awesome teacher.
Me in godot: Let me watch the tutorial again.

[iatheman]

This "story line" approach of showing the UI features of Godot is great. This video is much appreciated.

[voodinator]

This is one of the best tutorials that I've seen in a long time from a didactical standpoint. And I watch a lot of tutorials. You don't just show how to do things correctly right from the start but instead show how you might approach certain things as a beginner and the flaws of doing so. This way you can really understand the flaws of one approach and the benefits of the other approach.

I just started to learn Godot as an alternative to Unity and these kinds of tutorials help me a lot. Hope to see much more content from you in the future.

[Asguardian]

Another great video! The quality of your teaching is some of the best I've seen. You cover topics clearly, and you are not afraid to dive into some of the nitty gritty details, which many videos lack.

[mellowminx]

I'm now imagining my control nodes having polite chitchat every time I set up sizing :)) thank you! Excellent tutorial, it answered a lot of my questions especially about using styleboxtextures, spacer controls, and avoiding letterboxing.

[elalexable]

I've never seen a tutorial like this. It is like a proper classroom. It is very satisfying watching even I already know some of the explanation. Thanks for share your knowledge, Master 😁.

[JohnWizard]

Awesome video! A follow up tutorial showing how to interact with the UI elements via code, like a dialogue system with yes/no variants, an options menu or an inventory, would be super useful!

[mickeystix]

I honestly feel like this tutorial - while it is focused on something that some might not find exciting - is an AMAZING intro to how Godot works with its nodes and inheritance. You kept it simple, spoke on topics that are sure to arise without getting too in depth (which can scare people away) and delivered easy to follow instructions and results! It's always good when you feel comfortable enough after a tutorial to start tinkering with other things to see what happens. Great stuff!

[Tokaint]

Hands down best godot tutorial I've watched that is actually easy to understand for beginners. Please keep up the use of simple words and simple situations for people who have no idea what all these technical terms mean yet. I'm not needing to ask myself what the heck does [Insert Technical Term] Mean every 2 minutes. (Instantly subscribed)

[austinderrow]

I appreciate how you start with a quick-and-dirty solution and build up to demonstrating how one may not want to do it that way. This style helps teach the usefulness of the extra complexity and the *reason* why we do it that way. Not just that we *can* do it that way.

For example, when you set the panel container's theme I thought to myself... I guess I need to create multiple themes if I want different reusable panel containers. But then later you demonstrated the issue, which is wanting a slight change to the theme's setting and showing variants. Thank you! 😁

[acevfx]

Literally started with Godot yesterday. Your tutorials are some divine timing! Cheers

[UitzUitz]

This is hands down the best UI tutorial for Godot out there. I was really struggling coming to Godot from Unity because the UI systems are quite different, but after your tutorial I understood it and started to really like it. Please make more tutorials, because your other tutorials are also amazing. Also, I love the humor with all the speech bubbles. Keep up the great work 😉

[flora]

I got into Godot about 6 months ago and didn't understand much about Control nodes, so my UIs were annoying to use and didn't scale properly. I learned a lot from this tutorial which will definitely be helpful when i start making a UI for my game. You explained everything very clearly and i never got bored watching this tutorial, which is a big problem for tutorials i have watched from other youtubers. Would definitely like to see more great content from you.

[timothycalco]

This is just such a good video. Explaining every part of the UI and inspector settings as if they "want to do this, and they tell each other this, and this decides to give them this" is so intuitive and easy to pick up. Can't possibly sing enough praise for this video.

[OnyxIdol]

It's rare that hour long videos captivate me start to finish, but your's manage that every time. You're the best Godot teacher on YT.

[AliKandirr]

Especially after the recent Unity events and more people coming to Godot, this channel will absolutely blow up. You just covered every topic in my mind. I'm looking forward to new lessons, thank you so much!

[codybrock]

Your tutorials are excellent. I can't quite put my finger on it, but your delivery keeps me engaged with basic topics like very few videos can. Generally speaking, content teaching the fundamentals seems to drag on forever, but this was paced so well and it did a great job of conveying the high level view one should have when using these tools. I've watched several videos on Godot UI that seem to just be an information dump about the types of nodes one should use and how to structure them, but this video gave motivations and underlying logic that made it all snap into focus for me. In less than an hour, this got me closer to understanding the design paradigm of Godot UI than I got after several hours of the most popular tutorials on the subject. Other videos just wave their hands and say "margins are confusing, just do it this way", but this video actually spent a couple of minutes explaining how containers interact and why certain results can be confusing or unexpected.

Two things you did that worked really well:
- Anthropomorphizing nodes to quickly and clearly show relationships and interactions, ie "The container asks the button how big it wants to be"
- Editing in visual highlights and "thought bubbles" for elements, which tied in perfectly with the voice over.

Please keep going! This is the perfect moment, what with Unity shooting themselves in the foot (in the face?) and the Godot exodus that is just beginning. Strike while the iron is hot!

[charlythompson]

I’m coming from Unity, and I gotta say that Godot’s UI tools are pretty danged slick. Your tutorial was thorough and foundational, so exploring what you didn’t cover will be fun rather than frustrating. Thanks!!

[Zuap]

You are a gifted teacher. One of the best tutorials I ever followed in Youtube (not just Godot) and I am a senior dev I watched a lot. Usually I get bored and jump out or read the transcriptions, but you are so good and informative that I ended up watching all (and it is huge 40m long). This just to say: you are doing an awesome job to game devs everywhere, thanks.