Introduction to UI Containers in Godot 3 (tutorial)

container notes in the dough gives us out-of-the-box functionalities that helps us determinate how things should be arranged it we have three types of nodes in the dough the blue ones which have to do with 2d gameplay the red ones which have to do with a 3d environment of your game and we have the ring notes which are control nodes used to create UI for your games the container nodes can take control of said control nodes and also rearrange them not only buttons labels textures but they also can rearrange and take control of other containers this whole scene right here was created using only three types of containers the horizontal and vertical box containers as well as margin containers before we dive into this scene we're first going to take a look at this demo right here as you can see the root node of our scene is a vertical box container a vertical box container works pretty much like a list it's going to order the children on the same order that it has them on the inspector so as you can see here in the Sentry we have two direct children of this vertical box container which are two horizontal box containers the horizontal box containers work as the opposite of the vertical box container so they're going to arrange their children in a horizontal manner you can see that we have four buttons and again this is just for demo purposes so if I decide to add another horizontal box container here so I'm going to select this one and press control D to duplicate it you notice that it everything gets rearranged by our vertical box container and the same is going to happen if I decide to duplicate one of the buttons right here everything gets rearranged accordingly and again if I decide to hide this button they get rearranged it again these two containers are the main ones that you're going to use throughout your game with then you can create pretty much any type of UI and it's a really good practice in grow three to use them instead of using the default container our containers have a signal that is emitted when the container to rearrange its children as you can see here by selecting this horizontal box it has the sort children signal and you can use this to implement your own custom container by creating a scripted and hybrids from the container but we are not going to do this in this tutorial here we have a different type of container which is a margin container the margin container keeps all of its children inside a given margin that can be configured in the inspector going down to the inspector and open up the custom constants you see that we have been pre-configured to be 75 on each side of this margin container we can change this value and you notice that everything inside is going to be rearranged it accordingly so if I increase this value to 120 for instance you notice that the panel container gets shifted to the left because we are adding more margin to the right you don't have to use all of these constants you can use only the ones that you want so if we deactivate some of them everything gets rearranged it accordingly again because we're using a margin container as a direct child of this margin container we have a panel container a panel container is a simple container that just have a background on it and this background is going to have the same look as set it on the theme so if you want to change the look of this default container you can go to the theme and create a new one and there you'll be able to change the look of this panel container and as a child of it we have a dummy text which is just there to showcase how everything works when we change the values at the margin container here on the game scene we have a GUI scene and here we have the most complex scene of our game you notice that all of this scene is pretty much made by horizontal and vertical box containers as well as some margin containers the root node is a horizontal box container that has the same size of the screen and is anchored as a full rect you can see this by pressing H on your keyboard you'll be able to see these green dots too visualize where your control is anchored to we will start off by taking a look at this panel which is a margin container that has 20 of margin on each side of it this way we don't have the nine patch rect touching the edges of our screen we then have a margin container which is used to keep the contents of it not touching the border of the background that we are using for this stats panel and again we are using a V box container to keep everything arranged as lists and this is really useful because here you can see that we have a demo of a Carter select but if we had a character that didn't have an attack property or had another type of property if we decide to remove the attack for instance you notice that the defense goes all the way to the top again it gets rearranged by the vertical box container and we don't have to do anything and we don't have to worry about it so if we wanted to add more types of stats to our character or remove some because the character is a mage so it doesn't have an attack it has a SKU stats we wouldn't have to worry about arranging everything and make it making everything look pretty because the V box container is already taking care of that for us if I open the defense in you notice that it is an inherent sin and it inherits from the attack scene and again we are pretty much just using vertical and horizontal box containers so you can really see how powerful they are to create really good-looking UI elements and you can mix and match them to get to your desired look so for instance if I decide that I don't want to use an icon anymore here I can just expand this horizontal box container as you can see it holds the icon and the label and if I remove the icon again everything gets rearranged accordingly because we are using containers now back to the GUI scene the second part of the UI that we have here is a cartridge selector and this is just a vertical box container it has an horizontal box container that holds the two buttons that we need to select our character and has our character in the middle and right below it we have the select button and everything is arranged it correctly because of the vertical box container if I play this scene you notice that everything looks the way that it was here in the inspector but if I decide that I don't want this to be the way it is right now I want to change the way something looks and I take this next button right here and I place it little bit to the top and I decide to play the game again you can see that it goes back to the correct position so again the containers are going to take control of your control nodes and you have to make them look the way you want them to look by using their functionality you not be able to change their position because they all get rearranged it when the game is played and another thing that you should keep in mind is the size flags of your controls here you notice that this panel container is taking out the space that it can and that is because that's how it was configured to to behave for instance if I go to the panel container open the size flags and I remove the few and I decided to expand you notice that now it's only taking the space that it needs for the demo text to appear the same applies to the boxes demo that we had on the beginning of this lecture you're all taking as much space as they can because the size flags are configured to do that so that's why when I show this button they get arranged it correctly if I were to bring some select all of them understand instead of using few I decide to use expand you notice that they are only taking as much space as they need to and again the same applies for these horizontal box so I'm going to remove the few and there you go I really hope that this gave you a basic understanding of how containers work on the dough if you have any questions please feel free to comment them on the comment section below and also every feedback is appreciated you can find this project on the github link that's going to be on the description of this video as well as the SVG's that were used to create the UI for this tutorial so thank you so much for watching I'll see you next time

Channel: GDQuest

Views: 57,625

Keywords: godot interface tutorial, godot ui, godot control, containers, container nodes, control nodes, user interface design, ux design, godot game engine, godot 3, godot 3 tutorial, godot tutorial, gdquest, game design

Id: YL8apqN6IJM

Length: 9min 35sec (575 seconds)

Published: Thu May 24 2018