5 Must-Use Godot UI Nodes Explained

hello guys this is the polyglot programmer and today we're going to talk about UI nodes and more specifically we're going to talk about the five most used UI nodes in my opinion so we're going to talk about the five most the five UI notes that I use the most for at least 80% of the time right do you know about the the 8020 rule meaning that like uh 80% of the time you're going to use 20% of the nodes or the classes or whatever this this rule kind of applies to a bunch of different aspects of life and today we're going to apply them to UI noes and which are these notes which are the notes that I use most of the time at least the five ones on top of my list the five noes on top of my list are a panel we're going to get into it and second second one is a v box container third is H box container uh fourth is a label of course and fif last but not least a button and if you master these five nodes uh you can pretty much do a lot trust me you can do a lot with only these guys right and we're going to see that in action right now so let's go get into G right and right here we have an empty project with a 2d scene and I already added here canvas layer which uh in one of my previous videos I explain why you should have a canvas layer but it's kind of a good practice so try to add your UI nodes all inside of a canvas layer um yeah let me just save this uh great main scene so now we're just going to create a simple menu it could be like a could be like a pause menu it could be like whatever you want right so for now let's just call it a pause menu right so let's add so what I would do here is that I would add a panel right um usually I like to keep my UI noes uh kind of using the single responsibility principle so I create like several layers of different UI nodes each UI node doing one thing but one kind of lay it on top of the other one and a lot of times I just have a panel in the back um just stretched out to the entire viewport and if you don't want to your background to be grayed out one thing that you can do with your panel is that you can come here to theme overrides Styles and empty there you go so then you do have a panel here but you can't really see it right or of course if you want to have some sort of style you can also use a texture or flat is really common and so on and so forth but this is a panel a panel is just a container uh with uh let's say a free um free transform inside so you can so anything that you add inside your uh let's say your panel in here uh let's add a text Direct uh and let's just add an image right inside your P it can it can it can place things however you want they're not particularly organized except that if you want to inside your panel you can still use the anchor so for example I want to Anchor this to the middle and this to the blah the bottom the the corners and so on and so forth right and and there you go so this is what a panel does it's basically a container of other uh UI nodes inside right okay but this is not what we're going to do so the next guy that we're going to they're going to use is a vbox container so let's add a vbox container vbox container and I want this guy in the middle right and why is because uh the vbox container basically it's a virtual box so as you can see here in the little icon here right it's like everything that you add in here it's not like the where you can pick and choose where things are going to go with the v-box container uh things are going to go one on the top one on top of the other right so for example here if I uh I'm going to add a button right uh actually before I add a button uh no no no no I'm going to add a label actually let's add a label uh my menu great and this is here uh I let's just give it a let's just make it bigger great and now I'm going to add a button uh you can see that the label for example I don't really have the anchor options just like for example if I if I pick my vbox container since that the parent the direct parent of that guy is a panel I have my anchor presets over here if I click on my label in my button um I do not have the anchor presets I do have the alignment ones which are not exactly the same but everything that I add in here they're going to be one on top of the other so let's just make this um yeah button one right and uh again let me just make this a bit taller not this is much this is yeah and now I'm just going to add another button right I'm just duplicated this guy button two right so for now what do we have here we have a panel right we have which we can place things inside freely basically we have a vbox container which we everything that we add are going to pile up on top of each other basically right respecting the alignment and also respecting the minimum size of things that you adding here so for example I can have a but this button can have minimum of 75 but uh this other button here can have a minimum of 50 so there they're different sizes but they're still uh stacked on top of each other right and now inside my box my vbox container I'm actually going to go ahead and I'm going to add a hbox container an hbox container is the same as a vbox container but instead of uh piling up things one on top of the other they're going to set things one next to to to the other right so they're going to set things here uh so I have a vbox container um yeah and let me just duplicate this button I'm going to use another button again I'm going to I'm going to drag this third button here inside my vbox container right and now and I'm just going to duplicate this guy right so what this as as you can see here this guy started to organize things one next to each other and since I do not have since I do not have in my layout here I do not have a minimum uh x value for this that it's taking the value of the the text right but uh this is not pretty so one thing that you could do here is is that you could play with the alignment right so for example if I have this horizontally aligned this would be beautiful right and the same I could do here uh yeah and this uh yeah and now this guy instead of this I'm going to have this there you go so now I have my buttons uh let me let me just run this select current um now I have my buttons aligned to these sides because I I told them to do this with the alignment properties I have here a panel in my back I have a as my background I have a label on as a title of my menu I have a button uh inside a vbox container everything's inside a vbox container and the last item of my vbox container is hbox container which inside of it I have two diff two buttons uh both of them align to the the left and the right so now you can just extrapolate on this and imagine all the different menus that you can do right uh and with only this five UI nodes over here you can build 80% of everything that you can do if not more um so I hope you guys like this video leave the comments down below if you have any questions don't forget to like And subscribe and I'll see you next next time

Channel: The Polyglot Programmer

Views: 3,588

Keywords: godottutorial, godotengine, ux, uinodes, gamedev, userinterface, design, gamedevelopment, tutorial

Id: bsPN0ut0tyI

Length: 9min 31sec (571 seconds)

Published: Wed Jan 31 2024