Godot Top-down Shooter Tutorial - Part 17 (Godot UI Basics)

hey everyone my name is joe and this is part 17 of the godot top down shooter tutorial in this video we're going to cover how we add ui elements to our game and you're going to get a really broad overview of all the graphical elements that come as part of godot's ui engine all the goodness you can use them for the different layout styles and different containers and just how to use it in general to add ui to our game [Music] okay so just as a note this first video that we're gonna do is just gonna be setting up our ui elements we're not actually going to connect them or do anything fancy with them yet i'm going to do that in a follow-up part 2 video just because there's a lot to cover with that so with that let's get started so the first element that we're going to talk about as part of the gui system in gdo is actually called a canvas layer so i'm going to add one to my game now so canvas layer right here and so roughly what a canvas layer does is it creates a separate render layer for your game so when you create a canvas layer any children that you add to that canvas layer are going to get drawn separately from other canvas layers you can pretty much think about your game itself as being on its own canvas layer by default you don't have to add one so like our main scene is its own canvas layer and then any canvas layers we manually add later on are separate layers that we can bring forward or backward or move around as needed and the nice thing about canvas layers is that it doesn't matter where they're positioned in the in your game in your scene they automatically match your viewport or whatever viewport they're part of and so you can have multiple canvas layers and you can bump their layers up or down like this um you can also by default they'll draw an order if if they appear on the same level of the scene tree so if we added another canvas layer you know this one would draw in front of this canvas layer here but so a canvas layer is a really good way when you want ui elements to exist alongside non-ui elements which we have in our game here a canvas layer is a good way to make sure that your ui will stay at the top of your in front of your game elements and that your player will always be able to see it and it'll automatically track alongside the screen as your player moves and your camera changes so it's a really easy and good way to create built-in heads-up displays like we're going to make here now you don't have to use a canvas layer say if we had a like a menu scene and it was its own scene here and we weren't going to have any other scenes playing with it like when we went to our menu we got rid of our main scene you wouldn't necessarily need to have a canvas layer there but the rule of thumb i follow because you almost never know when you're going it's very frequent that you'll make a scene or like a menu scene and then be like oh maybe i want a lighter version of that that will appear in my game like all the players playing i pretty much always just make ui scenes uh start with a canvas layer at least at the top level so you know if i've got a main menu all the individual scenes i used to compose it will just be regular ui elements but i'll almost always have my uh my main menu scenes top node be a canvas layer so just a bit of explanation on what a canvas layer is and what it does and if it doesn't make sense don't worry it'll make way more sense once we actually add some things to it in just a second okay so now that we have our canvas layer i'm going to name this and just call it gui for now if you don't know what that means it's graphical user interface it's just a common word to describe what ui elements the player can see also a heads-up display in this type of game in hud but we'll just call it gooey for now and so now i want to talk about how you can lay things out in godot how you can create layouts for your your ui elements excuse me so let me open up the add node screen here and this is worth exploring on your own just to get familiar with all the types of nodes that godot offers but if we look into control so spatial nodes are all 3d nodes node2ds are all 2d nodes those are what we've been using extensively and then control nodes are all of godot's ui based nodes so if we look into our control nodes that are available to us you'll see a lot of stuff that are pretty easy to understand right off the bat you've got things like a pop-up which is just what it sounds like color rectangles also just kind of what it sounds like you've got ranges like scroll bars you've got separators which are just you know separator elements you've got some lists you've got text labels panels tabs etc so it's pretty straightforward but where you really want to look at are these containers here whenever you have kind of a parent element of a ui area or section or menu you're almost always going to have a container at the top so there's three main ways in godot that you can lay things out obviously there's lots of nuances with these but it's easiest for me at least to think of three main ways the first is that you can manually position things so you can just manually drag individual elements somewhere on the screen and then you can set anchors and margins to try and keep them there typically i don't do that and i find that even though it's not that hard to do you just don't really need it and it's a lot less flexible the second way is to use a very strict grid-based layout you can use a couple different containers for that the grid container is the most obvious but that is very strict like you have to define how many columns there are and it automatically sets it out so a grid container is like a very inflexible version of css grid if you've ever used it so when you have a grid container every thing by default is as uniform length and height every grid square so that's the second way i like to think about it is a very uniform grid layout and then there's the third way which is my favorite way it's the way i almost always do things and i think for most people it is the way they almost always do things and that is using box containers and basically box containers you can think of very very similarly to css flexbox if you've ever used it basically you basically have like a parent container where you define which direction it flexes in it either goes vertically or horizontally it's either columns or rows and then when you put every child of that container is going to stack that way so if it's a horizontal flex box what every child you add will keep piling on top of each other like left to right same with the vertical it'll go top to bottom so box containers are awesome i use them all the time really just this hbox and vbox container i will have tons of them in my ui elements and for me that's the thing that has worked best and now obviously you can use any of those three the free placement the grid and the flexbox or the box containers you can use all of them interchangeably and you can use them within each other so it's not like you're picking one or the other but just a quick overview of all the things you can do and i'll go over just some of these other containers because they're really useful a margin container basically acts as a container but you can define margins on all four sides um to keep your elements not right at the edge so what i'll usually do is have a panel container as my overarching parent because panels let you add a background and add some styling to it then i'll have a margin container immediately as a child of that so that i have margins on my panel so that my actual ui elements won't touch the edge of my panel and then i'll have box containers underneath those two to actually fill out and lay out the rest of my panel so a lot of talking we're going to get into some examples in just a second that will make that make more sense but as always to feel free any questions you have uh let me know in the comments below and we'll get to those and we can help make sure that we've got a good understanding of how to use ui elements in godot so with that said let's start actually building our ui so i'm going to close out of this for a second and what i'm going to do is actually take our gui and i'm going to save this as its own scene we don't have a ui folder so i'm going to create that i'll just say ui this is where we'll put all of our ui scenes and everything um oh i guess all right let me just save our gui in here i guess we're doing the lower case thing so let me rename it to be consistent a file or are you serious is it not okay well whatever lowercase uppercase doesn't matter i'll probably change it afterward but so now we have our our gui scene here and if we open it up you'll notice there's nothing there but we can still see our camera um layout here and the cool thing about canvas layers like i said it doesn't actually matter the camera size they will scale to match whatever and we're going to show you how to make a responsive layout that will also scale to match whatever size or shape your camera is obviously you want to design your layout for the orientation your game is going to have so if it's going to be landscape like here then you want a gui that makes sense to be more of a wider rather than taller and vice versa if you're doing portrait but all that say let's start adding some elements so i'm gonna follow the exact same thing i mentioned before um oh except so we we've got to think firsthand of of what we want to add to our gui so this is our game right if i open it up in my mind there were two big things i wanted to add i wanted to add a bullet count probably down here so that you can see when you need to reload and then also a health bar down here so that you can see how much health you have left another cool thing i want to add which i don't know if we'll get to in our first gui videos but is adding an indicator probably in the middle down here about the bases and like which bases are captured and then maybe also some kind of an animation for when a bass is starting to be captured so that the player always has up-to-date information about the status of all the bases in the game so i think that would be cool but we're definitely for the the first part we're really just going to focus on the health bar in our ammo so let's think about how we want to lay this out um typically i like to make it easy to change things later on so what i'll normally do uh when i'm doing a gui is i like to think about things in terms of parts of the screen and if you think of most graphical user interfaces you'll see that like there are usually elements at the top and elements at the bottom and then maybe there's some stuff in the middle but it's usually pretty empty and it usually takes up most the screen so maybe there's like you know some elements around the crosshair or whatever but really most of the things that you care about happen at the top and the bottom and so what i'm going to do is come into our control nodes here and i'm going to add a hbox container or a v box jeez i knew i was going to mess that up so v box containers and the h for horizontal v is for vertical obviously v box containers stack vertically so every child element of a v box container will go from top to bottom they'll keep piling in that way and for some reason i always get these mixed up even though i've used them all the time so the icons are actually really helpful here you can always go back and reference those but so we're going to add a vbox container and i'm going to call this rose because it just helps me think about like i can look at the names of the scenes or the nodes in my scene and it's easier to think about what's actually going on and the first thing i need to do here is actually add change the layout so you'll notice now that we have a control element we get a couple new buttons up here that we can do things with so this layout button is huge and what you're doing here is you are setting the anchor and the position of your node and so i can set my rows my container here to be top left and what that means is not only will the this element itself be in the top left it'll also be anchored to the top left so if i were to move my uh i guess i can't because i don't really have anything here but if this were to move around in game our rows would always be pinned to the top left here because i've set the anchor now you can set anchor without position and so this is how if you were going to manually position things you could do you could do that so i could move my rows right here and i could set anchor only to the top left and so now my rows are still anchored to this top left so if our gui moves around this will move around the same amount that our top left corner moves so if our top left corner moves up by 10 this will move up by 10 but it'll still maintain this distance right here again i don't really use that ever i pretty much always just let godo's layout engine handle it for me and i find it's much better but just an example of how you can do that so our rows here is pretty much going to be our parent container element so i'm just going to set full rect and what this means is that it will not only take up the full width and height of our parent of our canvas layer in this case it's also going to match all the corners of that as they move so it'll always take up the full width and height of the screen and because this is our parent container we that's exactly what we want so now we have our parent container and our rows set up now we can actually add some children and start to see those fill out and so for right now what i'm gonna add um are just some placeholders so let me um actually what we can do i'm gonna add a another box container and this is gonna be an hbox container and i'm going to call this bottom row and so one thing you could do i'm going to show you two ways to do what we want to do is we want to get this bottom row to the bottom of the screen right well there's two ways we can do it one is we could take our rows and because it takes up the entire screen here we could just say alignment end and that will move our bottom row to the end which is fine but again we're trying to make this flexible for later on if we end up having more ui elements even though we might not and because of that i think we want to keep this as begin and so something i usually do is i'll just say top row middle row and bottom row here whoops and so now we've got all these three things and you'll see that they are all vertically stacked on top of each other they don't really take up much room so it's hard to tell but you'll see that they're all stacked on top of each other um the problem though is that they're only taking up the amount the amount of height they need which is zero right now because they have nothing in them and so we want a way to say take up as much height as you can even though you don't need it and godot provides really easy ways to do that and so remember how i was talking before that typically in most user interfaces the middle section of the screen is where the user has the most visibility you don't want to clutter that with a lot of information and so we want our middle row which is probably probably going to be empty for the foreseeable future to take up the most amount of room so what we're actually going to do here is set its size flags so size flags are ways where you can tell an element how to determine what size it takes up the only two you really need to know are fill and expand and there's a vertical and horizontal option so fill is almost always on by default for most containers and it just means it will take up the amount of size that it needs it will fill the full size that it needs however like we said we want our middle row to take up more size than it needs we want it to take up as much size as it can so we're going to hit vertical expand and as soon as i do you'll see that our middle row expands to take up almost the entire screen because there's nothing else that's taking space so it can do that so what we're going to do as well is do the same thing for our top and bottom row i'm going to say expand here and i'm going to set expand here and you'll see godot will do the calculation under the hood to say oh we have three elements and they're all expanding to take as much room as they can so we'll divide this element in three so they each take up a third of our overall rows the overall height of our rows which is exactly what we want so with that said how can we make our middle row take up more than an equal amount of space and that's where this stretch ratio thing comes in down here you'll notice that they're all set to one right now they all have a stretch ratio of one and again if you've used flexbox before this is going to look super familiar because it really is a very very similar system to flexbox and if you haven't used flexbox before with css definitely worth checking out because i think that is very transferable knowledge from web development that will help you understand godot's ui engine if you are having some trouble doing it so anyway what we can do to make our middle row take up more is we can set our stretch ratio to be two and so what this is gonna say is it's gonna try and take up twice as much space as both of these and that's pretty good it's it's a lot better but again not still i think we want more so if we do three maybe four and now we can see that our middle row is taking up four times the amount of space as both of our top rows and i think this is a little bit more of what we were looking for and again we'll be able to tweak and adjust as necessary when we actually get some things we can see in here but i think this is really good so now that we've got our general ui layout set up we can begin adding the actual elements to our ui like our health bar and our reload count okay so let's start with our health bar um and i'm i'm pretty excited for this because i think godot's progress bar which is what we're going to use comes with a lot of really cool things that you can do by default so you don't actually have to import any fancy textures or whatever so we're going to try and make our health bar without any outside textures just using godot's built-in uh progress bar so let's add a child to our bottom row and i'm going to search for progress bar but if you can also find that that is in our range here and then progress bar you can also use a texture progress which is pretty much similar but it's from it gives you a little bit more control over actually adding in textures you can also add textures with the progress bar so i don't really use texture progresses that much but okay we've got our progress bar and so you can't really see anything right now let me go to the size flags and if i hit horizontal oh let's do vertical fill so vertical fill is not enabled by default for progress bar and so you'll notice that it's not taking up any space vertically pretty much but if we do fill again we're telling it to fill the the height that it can and we can do expand here and we'd see our progress bar take up the whole bottom screen which is obviously not what we want but what i'm actually going to do here let me um i'm actually going to add i think so one thing that's kind of weird um is like we never want elements to be right on the edge of the screen and so what i'm going to do is actually add a margin container and again i talked about this before this is just kind of the layering of containers you can do in godot and i'm actually going to make our rose be a child of it so what we do is we set our margin container to be a full rect again which will cause our rows to be a full rectangle and real quick actually i forgot to mention this but this is really important when you have a container in godot a container determines the position and size of all of its child elements so you'll notice that once we added a margin container i can adjust its layout here but now because our rows are a child of our margin container i cannot adjust the layout of our rows anymore if i click on it you'll see this warning here children of a container get their position and size determined by their parent so we used to be able to adjust this for our rows but now because it's a child of our margin container the margin container handles all of the positioning for it and it means you have less fine grained control over manually positioning things but you're letting the godot ui engine take care of that for you which again like i said is what i would recommend 99 of the time unless you have an actual reason to manually position things and you know what you're doing so now that we have that um we set our margin container to be full rectangle and our rows automatically take up the full screen and you'll see that we've still got the same exact dimensions for everything else and what we can do with our margin container is if you come down to our custom constants this is the area where most control elements like most ui elements will have special custom constants you can adjust for that are unique to that specific type of ui element and for a margin container those custom constants are our margin values and so let's add a margin value of say 40 in each direction and you'll notice now that our rose has a margin of 40 in each direction of our margin container so what it does is it decreases the size that our rows like our child elements are able to take up and you'll already see that our progress bar now lives not at the edge of the screen which is really cool that's exactly what we were hoping for and we might even be able to bump this up a little bit i kind of want this to be yeah let's do 50. i'll just make it a bit more uniform but okay sweet so we have a margin container and especially now we have um because of that a progress bar that isn't sitting right at the edge of our screen and i'm going to rename this health bar real quick and what i'm going to do i'm going to try and go over as many of these control options as possible real quick first off anchor and margin again i almost never set these manually you can usually set these from this layout here or in this case the parent container will set it so usually you can ignore anchor and margin grow direction sometimes you'll end up using it basically determines like which way it grows like if it needs more space it'll right now by default they'll always elements will always add more things to the end so you can change that if you want it to get bigger at the beginning so like if we added if our progress bar needed more width it would grow this way instead of at the end so again i don't usually mess with that but it is there if you need it and then there's the rect option here which i do use a lot so position and size again these get set by our parent container so you'll notice that it'll let me set this to whatever i want but then if i actually hide this and show it again it'll reset to a default value so it's kind of misleading when you have a ui element that's a child of a container it looks like you can change the size and position but you actually can't because it's determined by your parent container so what you can set though and what we are going to set is our minimum size so let's say we want our health bar to be 200 pixels wide so i'd say if we zoom out that looks pretty good we can do that and let's say we want a minimum size of i don't know 50 pixels that's a little high maybe 30. that looks pretty good so you can set your minimum size here and you'll see that if we hide our bottom row and show it again it'll keep that size so parent containers use minimum sizes of elements when they're determining the position and size of that element so minimum sizes are a great way to keep an element being at least a certain size and this is definitely something you can use sometimes it's hard to get things to look correctly just using the godot ui engine sometimes you need to give it some manual override so minimum size totally fine and then rotation and scale pretty self-explanatory i think clip content just determines uh yeah so it's like an overflow basically it prevents like uh overflowed content from being there and then we can do a quick run through the rest of these i don't use most of these much i think the hint is like a yeah if you mouse over it it's a tool tip um and then you can determine for the focus like for people that need to use keyboards or tab or screen assistants to move around and navigate navigate your ui you want to assign you basically are designing like your map for your ui from like if you go left from this element which element is to the left for example so you can override how navigation happens via keyboard or some other way besides just clicking around um mouse i think we're going to talk about this later so i'll leave that for now we already talked about size flags and then again there's like custom styles fonts and colors for our health bar we'll we'll talk about these in a second and then quickly themes are a type of resource and godot that you can create that cause styling to be applied automatically to all child elements so typically what you want to do is take your parent container and you can add a theme to it and then all of its child elements will be styled appropriately so themes are really good ways to create a consistent style in your game and have all of your screens and ui elements instantly apply that style by just adding a theme to parent containers around your game we're not going to make a theme as part of this tutorial because we just don't really need it and it's a little complicated at first but i use themes all the time and in my devlog for seagull team 6 which you can see on my channel i'll post a link to that you'll notice that i use a theme for pretty much all of my styling and it's really helpful because it just means you don't have to create specific elements that are already styled and you don't have to recreate your styles all around you just define it in your theme and your theme takes care of it for you so i think that's pretty much the quick overview of all of the control properties that you can adjust and i hope that this doesn't seem overwhelming and it's seeming pretty easy to understand like i said godot's ui system can be a little bit complicated at first and it definitely takes people a while to learn it some people just click some people they just i really struggle with it it definitely took me a while to feel really comfortable with it but i do promise that if you stick with it and try and learn it it is very flexible and really awesome to use it really does mimic flexbox and other really popular web dev style layout engines which are just time tested and work really well despite some of the flaws inherent to css and so i think trying to learn how to use godot's gui engine and the control elements that it provides is really going to help you create awesome layouts for your game really quickly so now as i'm actually editing this video i realize i lied earlier about this being two parts i think i'm actually gonna break this video in half and make it a three part video where we're going to be doing ui just because we're getting to about 30 minutes and i want to keep this at a reasonable size so this video is going to focus mostly on general ui overview and then we're actually going to finish our ui in the next video and then after that we'll put it all together and actually connect to our game so thanks for watching sorry that we're cutting this one short but i'll have the next video up in a couple days you

Channel: jmbiv

Views: 1,723

Keywords: godot, godot engine, godot 3.2, godot tutorial, godot top-down, godot 2d, top-down shooter, how to make a game in godot, game development, game development tutorial, game development for beginners, godot for beginners, how to make a top down game in godot, how to make a top down shooting game in godot, game dev, indie game dev, indie game development, how to make video games, how to godot, hobby game development, gamedev, godot game engine, godot ui, godot ui tutorial

Id: Yr2Lz-LWofg

Length: 28min 28sec (1708 seconds)

Published: Wed Jul 29 2020

Reddit Comments

[u/josephmbustamante]

Hey everyone! This is part 17 of the top-down shooter tutorial I'm making in Godot. In this one, we give a very broad overview of the different control nodes in Godot, how to use them, basic layout options, and using canvas layers. It's within the context of the TDS game but I hope it's generally helpful to anyone that is learning the UI system. Thanks for watching!