Godot UI Basics - how to build beautiful interfaces that work everywhere (Beginners)
Vložit
- čas přidán 31. 05. 2024
- 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:
-----------------------
Godot UI documentation: docs.godotengine.org/en/stabl...
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!
totally agreed. What a good starting point tutorial, covers all the major concepts and common 'how do I get it to do XXX' questions.
Yep. 100%. This video of fantastic. Thank you so much!
Very high level quality!
Seconded! The production is great but more than that, the very clear intentional thought that went into the explanations and examples. You cut to the heart of it without distracting tangents and helped teach me how Godot *works*, not just some copy/pasta recipe.
So, to make it clear, Do I need to create a bunch of nodes of different containers and the result depends on their order? You don’t need to configure individual buttons as needed, but make a lot of necessary nodes? If, of course, you understand what I mean.
This "story line" approach of showing the UI features of Godot is great. This video is much appreciated.
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.
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.
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.
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!
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 😉
Literally started with Godot yesterday. Your tutorials are some divine timing! Cheers
You are a gifted teacher. One of the best tutorials I ever followed in CZcams (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.
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 😁.
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!
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.
Thanks! I haven't yet seen any other videos explaining UI in Ggodot, but I fell like I don't need them) Everything is looking crystal clear from this one.
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.
Incredible tutorial, I've been working on a little toy game lately and up until now I've been aligning my labels manually by using the guide functionality in the 2D editor to draw reference lines lol. I finally decided to learn how to actually do it and I found this awesome video. 45 minutes gone in an instant. I watched this without ever opening Godot and I still retained every piece of information, you're a really great teacher. I hope you keep producing content of this quality.
Thank you immensely for your effort. Just a couple of days ago, I stumbled upon another one of your videos on Godot Components. I was instantly captivated by your calm teaching style and the way you simulate errors and subsequently rectify them. I returned for another video because I realized, upon going back to use the engine, that I had genuinely absorbed valuable insights. I sincerely hope you continue producing more of this quality content.
I love that you show buttons and things that we might try and why they don't work and what they do. UI is the worst but this video makes it much easier to understand
I've seen many Godot UI Videos, and this is hands down my favourite one. Excellent, clear and giving proper insight into some of the inner workings.
Many thanks.
Great video. Personally, I'd love more intermediate level videos.
I suggest content on:
- inheritance vs composability in godot
- overall architecture
- signals
- animation players
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!
I've watched this video at least 5 times. As a Unity refugee, I'd have really struggled to learn the Godot way. But this video hits all the important UI points and explains them very clearly. So many thanks!
I liked how you also showed options even if it was not what you were going for! This helps people see all the options in case they DO need it in their situation. Great video on a part of Godot which is under represented in the tutorial space.
I just started learning Godot and wanted to get an understanding on how a UI should be build and configured. This video was incredible, love the approach of starting small and building upon it. It helps us understand why things are done in a certain way rather than just giving the correct way out, saving us hours of independent learning. Thanks a lot and keep up the good work!
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!!
The best tutorial I've seen. I always said to myself what's the point of this canvas layer. Today, I realized this practically.
No one gives a good explanation about these
God bless you 🙏
Your tutorial is absolutely incredible. I've been struggling so much to get UI working. And you basically gave the tools to understand all of my issues. The explanation on how controllers work was crystal clear, and helped me understanding the problems rather than giving a solution that would've not helped in the middle/long term. Thanks for having taken the time to do this video. It's the best I've seen on this topic
I just switched from unity and making UI responsive in godot was pain but this clears things up a lot. Thank you
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!
I am quite comfortable with Godot and by far not a beginner, but well, what can I say? - I learned something new in one or another of the details you've been talking about.
So far I can tell, I love your videos due to the content alone, its presentation, the pace, your explanations. Really, really cool! I subbed a few days ago already and I am sure I won't ever regret it.
That's some high quality tutorial.Keep up! 😘👍
This is, by and away, the best Godot UI tutorial video out there! I've learned much of what is presented here through trial and error as well as other tutorials, but seeing it all presented so clearly and simply has been absolutely fantastic. I strongly believe that anyone who touches UI in Godot should watch this video first.
Dude you answered literally every question I had about UI in a single easy to follow video. Thank you so much!
I'm a little less versed with all of the UI container options in Godot, this is a good demo of what most of the elements do -- great video!
38:26 you can use Hseprator node for same.
In hbox add 2 hsep. Node 1 in top 2nd in bottom and have there size as expand.
Same in vbox also add vsep. And have it expand.
Your tutorials are some of the best I've seen around CZcams on any subject. I've been meaning to pick up Godot and your channel feels like I found a gold mine. Thank you!
Your videos are super high quality, I see a bright future for your channel if you keep it up!
Excellent tutorial!! Perfect level of detail, and explained a bunch of things I was struggling with in Godot.
Just wanted to say that your tutorials are some of the best I've seen. They are thorough and i really appreciate how approach in the same way a newer user would and showing better ways to approach the subject. Thank you so much for these!
I really like the way you teach! You show how to do the basics while also showing alternate ways as well as pitfalls you might counter. Great job!
After hours and hours spent on testing and trying to figure out how UI elements REALLY works this video definitely took me a great step forward. Great overview and explanations. Thanks!
I'm truly impressed! If only I had the option to give this more than one thumbs up. It's concise, straightforward, informative, and a delight to watch!
Expand settings are "how much space", fill settings are "what to do with space" is a great explanation of these things. I've never intuitively grasped the relationship between them, why "fill" by itself didn't make controls larger, and how/why to use them together or separately. Thank you! Gamechanger.
This is a very helpful tutorial! Great explanation of how the controls work together to get a result that's aspect ratio agnostic. I think everyone in the community would benefit from watching! Keep up the good work.
Time-stamped tutorials are also super cool, more people need to do it
Your Godot tutorials are the best I've seen by far! Keep it up and your channel will be known wide and far among Godot devs, I'm sure of it.
I really love how you explain a lot of the tangential things. Only 10 minutes in and really enjoying this tutorial.
Thanks for explaining theme variants, that is what I was missing in my project. Keep'em coming !
I've been using Godot since 2019 and it can still catch me off guard with the UI controls, this is by far the best UI tutorial I've seen, thank you for making this!
Your tutorials are so good.
What you do specifically very well is supply a lot of knowledge around choices you made.
F.e. in the beginning, Mentioning the Steam Hardware Survey is such a good idea.
This is the type of information missing in many tutorials, and the user will miss it but never know.
This was the first video I watched as Im trying to learn Godot from scratch...I was pretty confused, but after watching a few other basics tutorials, I watched it again and it is very informative once I had a grasp of the basics...definitely need to watch it even if your game only has the most basic of ui...just get to know a few basic tutorials if your an absolute beginner then watch this and you will learn a lot!
This feels like what you'd expect to get when you buy a course at some outlandish price. Only the courses are usually a let down and this is an absolute steal. Big Thumbs Up! Hands down, best explanation on the topic I've seen so far!
Simply fantastic. Something as dark as Godot's containers and themes, brilliantly explained. Awesome job!!!
Excellent video, you also go through building immediately and making mistakes. This is vital for the viewer. People learn from mistakes, not perfect explanations and you incorporated that well with controlled "mistakes". Great job!
How is your channel not bigger? Your content is amazing! Simple to follow, highly polished, includes only the stuff that matters.
Your videos are simply the best tutorials I've ever seen in my life. For the first time ever, I used the notification bell on CZcams. Thank you so much for sharing you knowledge that way
I'm moving from Unity UI Toolkit to Godot UI, thank you for this
Also thanks for being a great teacher!
As someone just getting into game dev for the first time and coming from a tech background your tutorials hit that lovely middle ground between too little and too much information. Excellent work, best godot tutorial I have seen yet.
Wonderful tutorial. I keep coming back to watch it as I progress with buliding my game's UI, and it's SO helpful!
This is the best Godot UI tutorial on CZcams, well done!
Great primer for anyone getting started doing GUI work, I read the manual but kept making elementary mistakes with a Custom Control class. Pulling my hair having themes not apply and such.
Watching someone go through the base stuff and building the base stuff helped me figure out how to use it all properly. It's quite a good GUI system once you make the conceptual leap.
Thank you for the video
Just discovered your channel while preparing for an upcoming game jam. Thank you for this amazing video ❤
this is great! looking forward to the growth of your channel!
Really good video on ui making in Godot. Very clear and easy to understand. Thank you, and looking forward to more videos on Godot stuff!
I absolutely love everything from your videos!
Especially the sometimes funny text arrows. But also how you explain everything.
This video was incredibly useful, and made me discover your channel. Thank you for helping the Godot community with great quality videos, you sir, just earned my sub 👌
Keep up the good work !
This is an amazing tutorial! I'm just starting with Godot for... reasons... and this just answered so many of my questions. Can't wait to watch more of your videos.
“Reasons.” 😉
Single most useful channel when learning Godot. Keep it up!
Amazing tutorial! You covered a ton of concepts so clearly and really made UI click for me. Please make tutorials for every concept in Godot ha
Wow, what an exceptionally nice tutorial! Everything is clear, entertaining, interesting, and straight to the point.
Great work. This was an awesome video. And even if I already did several things with the UI system, I learned some new stuff, I didn't know before. Keep going
Thanks for this extremely well thought out and pleasantly presented tutorial. Using loads of chapters like you do means one can come back to this video every now and then for a refresher on something specific. You earned a sub from me and I'm looking forward to your next videos!
Great approach to exploring and learning about a big topic. Have a small step goal, point out when things go wrong, pose a question, then get to the next step. I try to learn most things this way.
such an awesome tutorial. you've just enabled me to build my own UI which i was struggling with till now. Thanks!
Thanks for this! Really clear and organized presentation.
I'm new to this engine and this tutorial was really what i was looking for. Thank you for making this video, it was easy to follow, you have a nice way to explain things!
This video's awesome.
Mobile game and desktop app UIs with godot can also be interesting for the future! (just some ideas)
I’ve found my Gadot tutorial series, this is fantastic, thank you:D
Thanks for this new very useful video. With such great content and presentation, I expect this new channel to have tons of views in no time !
One really happy subscriber
This was such an amazing tutorial! Thank you so much for making it and I am so excited to check out all your other tutorials
This is exactly the UI tutorial what I really needed. Thank you!
Extremely well done video. Exactly what I've been looking for
This is the best video I've ever seen on UI creation (in general, not just Godot). Though I have to say Godot's UI tools also seems surprisingly straightforward.
I know this sounds childish... but I really appreciate how you explained things by personifying the elements it actually helped me to understand this all that much better. So thank you. Great Tutorial... I didn't realize how fluent the UI system was in GODOT.
I got this video as a random suggestion, and I'm saving it and subscribing to you. Your content is outstanding, your explanations are perfect and I enjoy your animations!
This is a lot of work, greatly explained and illustrated. Thank you sooo much !!!
Great video! Clearly explained, demonstrates and corrects potential pitfalls, and the production is excellent. I particularly enjoy the way you use visual aids like at 7:50 and 8:55 ; subbed.
This was a great video! I'm new to Godot and had been struggling with the UI. This helped immensely! Thank you!!
The best godot UI video. Such a good video, filled with information and easy explanations for all the UI features. Thank you very much! Looking forward to more videos.
I've been working with Godot for awhile now and built a few games and followed classes and tutorials. This is by far the best teacher I've come across and answered so many questions I've had. Would definitely follow if he had Patreon tutorial channel!
I rarely comment videos, but I gotta say, I watched MANY videos on Godot UIs, and this is by far the best one, that actually explains it in a clear and concise way (and don't overfocus on anchors).
I hope we get a part 2 sometime converting other types of control/UI nodes and their use cases
Incredible tutorial. Thanks
Good video!
(4:42) Technically, that would be the "aspect ratio". Godot also refers to it as "base size". The "resolution" would be the DPI, which is usually 72, but can change based on various devices. Because different devices have different outputs, that's why Godotneers recommend never manually scaling any sprite elements except for animation purposes.
(8:59) For those of you curious, he deletes those three non-container elements and replaces them as a way of explaining Godot via tutorial, however you can also simply right click on each element and "change node type" to the same and it should automatically convert everything just right.
Actually good tutorial compared to the other youtube videos I went through! Nice job Godotneers!
Congratulations and thank you so much. You are doing the best Godot's tutorials on CZcams. Step by step, clear and without repite yourself. ❤
Please keep it up with the clear and concise topics.
Good work!
This was a great tutorial. I hope you have more. Going to subscribe right now.
Another amazing video and teaching! Would love to see an inventory system taught by you with drag and drop to and from a chest interface! Keep up the amazing videos!:)
Great tutorial! Before whacking this I didn't really understand how flexible this system is.
This helped me out a lot. Thank you for making it.
Awesome tutorial! Coming from web dev, I had some nightmarish flashbacks to flexbox with this one :D Helped a lot with the gist of it though, so I could focus on how Godot handles this stuff, pretty neat imho.
thanks, I just got the humble bundle Godot learning and I'm totally new at this stuff... you have helped 1000%
Thanks for the awesome tutorial! The latter part with expanding/filling has always been the most confusing to me. Also, the tip with learning spacer-controls is what I always needed.