How to Make a Functional Game Menu in Godot 3.2 | Godot UI Tutorial

in this goda tutorial I'll teach you how you can make a game menu that pops up when you press escape and we'll have a look at the first functionalities of a options menu where you can change options of your game at runtime let's get started now to finish this tutorial we'll need three things first we need a game menu for which I made a start already and we'll run over that together secondly I mean options menu in which we have an option that we can change thirdly when we change that option we need to manipulate something in the world will be new be manipulating the mode of the experience bar that we've created in the last episode in this UI series so let's get cracking first of all we got this new game menu right here basically what I did I made a control node and rename that to game menu I've had a nine patch rectangle for my background but you can just use a texture rectangle as well if you prefer to do that then I have a feed box container which will order all our elements a title and the buttons that we'll be adding and I've added 30 margin from the top to make sure that it doesn't interfere with my border and it's nicely lined out I've had the label with of course a font resource in there and I've added a margin container of 35 pixels to make sure that the buttons don't hug the title and have a little bit of space from the game menu that's more visually appealing to the player now all we'll need to be doing is we need to add the texture buttons for that we're going to have these textured buttons with expand on we can drag all these textures in here and these structures will be shown based on different states that the button is in and that will all go automatic so for us in this situation we're gonna go with a normal and a pressed texture and these look almost the same but 1/2 shadows and the other has not that creates a kind of effect that I'm after so for the rectangle size I'm gonna go with 220 by 50 but as you can see it's a it's taking the whole horizontal space to make sure it doesn't do that we're gonna say to shrink to the center horizontally so now we'll only be that 220 pixels that we have said that now what we'll do is we'll also add a label to this button we'll set it to full rectangle and we'll set the align to Center and the V align Center and we'll say this is the button for new game of course the phone is way too small and it's not a very nice phone the standard gold font so under the customs phones I will load my phone's resource for a size 25 now I have preset that if you don't have any of those presets what you'll have to do is you have to go to new dynamic font then when you click it open under phone data you can load your phone up you'll need a phone tree schools for that you can use your standard Microsoft phones for that you can set the size you can set filter arm depending on whether you got a pixel II kind of title or a more smooth title and then what you can do closing all this up you can with this mouse button right here you can then save that preset and then you will save a phone to resource that go to this able to reload again and again and again so you don't have to set all those options every time so with this button done let's quickly have a look at how that those two different textures work so now when I click the button you see that these two textures are switching between each other and that creates the visual feedback to the player that yes you have actually pressed this button now I'll also be renaming this button to new game and now we can simply duplicate a couple of these buttons and of course we'll have to rename this to load game and save game and etc etc so I'm at these buttons in now see you in a blip so I finished all the buttons basically I've renamed them in the note structure to the functions that they actually have of course I've changed all their labels so they represent the right text now what we want to do they're a little bit too crammed together and we got a little bit more space in our menu so on the custom constants of the V box container we'll turn on the separation initially that puts them closer together by increasing this we can set how much space things should be apart inside this V box container and we'll make sure that we use about the same space up till the bottom here as the game menu here the title is using from the top I think nine is probably gonna be the right amount there now of course what we want to do if you're not going to program the new save or load game buttons yet those will be future episodes what we'll want to do is we want to hook up the options button so that we can open up another UI panel that will have to be creating as well so with the option button selected we're going to go over to note signals and we'll connect the the press signal to our graphical user interface and we'll connect it right there this will give us a new function underneath our graphical user interface node and that is where we'll be opening up the options button and making sure that things are connected properly so now we have to create that options user interface panel let's get working on that now for the options menu that needs to pop up when you click the bottom options I've already made a start and we're gonna finish it together let's first go over what I did so far again I've made a control node and rename it to options menu I that in a nine patch stretch for my background you can use a texture rectangle as well other than H box container with margins that put the H box container in the borders off my texture thereby whatever I add to the H box container cannot interfere with the background texture and next I've added one column and I've set that column to expand horizontally with the option right there in the inspector thereby it takes the maximum size that it can take so the full H box container I've renamed it to column one and have duplicated two into it so that now they share the space that is available so they're all free them will always be exactly the same size now to not have these columns hug each other too much I've added separation ten pixels between those two columns free column sorry then in the last column I've added a exit button exactly the same style as we just added to the game menu and this exit button I've been able to push this down to the end by using the alignment and right here by default that's at the beginning if you said to end the elements will be added from the bottom instead of from the top probably if you are making a real options menu you don't want to use that option you probably want to set this back to the beginning and you'll simply add functions in there and maybe a margin container that will then push that exit button down for now we'll just leave it like this to make sure it looks a little bit visually appealing or looks more like an options menu now I've added these three different columns because in an options menu you usually have quite some options obviously maybe a game options sound options visual options graphical options you name it you could put them in different tabs but usually for the games that you and I will be creating that we don't have that many options to do so usually one screen is enough and with three different columns you can make some organization so it's easier for the player to look for the options that he's actually looking for now we'll be finished in da four we'll need to add whatever we need to finish or to change the experience bar so what first add a label and I'll simply call this experience bar and under the custom fonts again we'll be loading my font this is 25 it's probably good idea to align this vertically in the center now our also add this is a new one a option button this base is going to be a drop-down menu and this option button will have a limited amount of options and since we got three modes is exactly what we want we don't want the free player input we simply want to serve our player three different options choose between these three that's it now we'll be adding the options of this option button through the code before we come to that let's first make sure that this exit button is also connected up through a signal and before we can do that we first have to look at our game structure later our node structure so right now we got this graphical user interface it has of course the skill bar the health globe the experience bar and the game menu now the game menu is not going to be open all the time we'll be programming the escape button for that and the game menu we can have that loaded in the background and simply make a hide show function to make it pop up but the options menu it'll be used very rarely very rarely the player is inside the options menu every game session only happens a couple of times when you play a game how often they you press the options menu so having it loaded all the time in the background while being hidden is not very effective it's actually much easier if we'll be making this options menu its own scene and instancing it into the graphical user interface whenever it is requested by the player that way we free up some resources and we don't have that loaded up on the background all the time to do that we'll simply going to be right-clicking the options menu and we'll save this branch as a scene then we can simply save that I already had one before as I test it around a little bit so yes I'll override it because the scene is still open okay then we'll close this scene and we'll save the branch as options menu safe yes I want to override it now with that done you can see here from the icon we now have an innocent scene and that means we can literally just delete it now we don't need it anymore inside the standard load of notes structure now we simply have this options menu as a separate scene now of course we need to this to be able to communicate a little bit and what's a generally good practice is to make sure that every scene by itself can handle as much as possible it by itself so it means we're not going to be linking this exit button to the graphical user interface on the on the main map scene will simply be linking this exit button to the options menu itself and will then propagate the signal to close this screen into the graphical user interface I'll show you exactly how to do that as we will turn to coding in just about a minute so right now we already got a script here we need to delete this that's from the previous test I did with the exit button so active so that's the exit button on the bottom right right there we're going to go to node signals pressed connect and we'll connect it to the options button and that will create that function now of course we need to add some code to that so let's start beginning made by the exit by mapping the XK buttons at the game menu can pop open and then will go all the way back and forth into making sure that we can close and open all the screens and once all the screens are closing and opening the moment that we want them to then we can program that experience bar options button make sure that is filled with the right options and that when we select one of those options that actually our experience before really changes mode well you're in the same game session so let's continue okay so the first thing we got to do make sure that this menu this game menu pops up when we press escape and of course we needs it to load when we the game is loaded hidden so we're gonna hide it by the fall now on the project project settings under the input map will create a new action called game menu and we'll add it with this little plus here we'll add a key and we'll link it to escape now escape is also a button up here under the UI cancel so I'm gonna remove that button away from there because I'm not using it in this project now with that we're going to go to the graphical user interface script and here at the top just before ready we're going to be pasting in the code for the input so the underscore input is a standard function meaning gold up and it will receive any event that's happening that's usually player input so if that event is equal to the action press game menu we're gonna get the note game menu and we're going to show it so if we will now play the game we can now hit escape and we can now access this menu of course we want this X both exit button to function so that we can also close this menu again once it has popped open so let's program that next to make that exit button functional we're gonna go into our game menu will search for the exit button and indeed note on the right side here we're gonna connect the press function to the graphical user interface script that will give us this new function on exit press and we'll paste in get note game menu hide there by we hide the menu again so right now we can access the menu and we get ax again by clicking the button next thing we have to do is we at the beginning of this tutorial connected our own options pressed button already so we already have the signal going into this script we're just not doing anything yet so the next thing we have to do is program that options button to open up the options menu to open up that options menu when we press the button we need two lines of code and I'm pasting in free here but we don't need the third one yet we define a new variable options menu it's going to load the scene options menu itself so it's going to be loading this scene right here got it selected and it's going to make an instance out of that that instance will then be added as a child of course this code is under the graphical user interface so that options menu will actually be added as a child underneath here and it will come on their game menu now under the options menu script we have already added the exit press function for the exit pressed buttons of this button right here if you go to the script as I told at the beginning of this tutorial we're going to propagate this signal further into the node tree up to the graphical user interface so what we'll do here will define a signal and that the signal is going to be the closed options menu and then on the when exit is actually pressed will emit that signal closed options menu now when you look at the graphical user interfaces third line is gonna get that options menu node and it's gonna connect the closed options menu to itself so to dis script and it's gonna run a function called closed options menu now that doesn't exist yet so we got to make sure that that is right here now the reason why we connect the note here and up for example on the ready function like we do with many other connects is that there is no no's options menu until we have added it to the node tree and we added this line above here so you can only connect this signal once you've added a child if you're making use of instance seams so with that we can now play the game we can add escape you can close this menu we can also go to the options menu and when we press this escape button it's not working yet because of course we still have the program this closed options menu okay so what we're going to do is we're going to get the node options menu and we'll leave free the options menu now when we play the game we can go to the options menu you can escape this egg exited options menu and we can exit this menu so now we have everything fixed as in show the screens when you want to show them now of course what we have to do is make sure that this bar actually holds some values and whenever we change this bar to a different modes that our actual experience bar also changes mode so let's get working on that to populate our drop-down menu the options button the first thing I've done is I've renamed the options button to experience bar mode this way we'll be a little more recognizable in the codes which items we are adding to which element back to the script of the graphical user interface where we add the child options menu to the world we'll add these four lines of code these are going to be a note reference to the experience bar inside column one of the options menu and then with that variable will use the function add item to add the items compact percentage and value those will be the three names of the free items the player can select from in the drop down menu now of course when the player selects something we want something to happen so back to the experience bar mode under need note signals the option button has two specific signals to its own type that's the item focus on items elected and of course we want something to happen when the players select something so we're going to connect the signal to the options menu script where we had already previously connected the on exit function or your own exit signal now right here there's a couple of things we can do to set the state of the experience bar before you can really appreciate or understand what we're going to be doing we first have to revisit a little bit of the previous tutorial so for that we're gonna go back to the graphical user interface script in the last tutorial where we make the experience bar and you don't have to have have done that tutorial to follow along with this if you're if you know goaded a little bit and know coding a little bit you'll see what's going on we have an experience bar state that can have three different modes the three different straights percentage percentage value or compact now those are also in a state machine when we set the experience bar at the start of the game and it's also in a state machine whenever we get experience when the experience bar needs to be updated whenever we got a kill so it has a state machine that takes the same elements compact percentage value so we need to change the state of the experience bar when a option of that option button is selected now there is a downside though because when we look at the documentation of the option button we can with the ID that we get from the signal we can return a string with the get item text the problem is that once the option menu opens up we want to pre-select that option with the current state and you can't push back a string to a button you can only push back a ID to a button so it's actually much easier to change our state machine to use the integer IDs of the option button then it is to work the other way around it's much more effective that way so we're making a couple of changes to the state machine and making that option button functional so on the script of the option button where it is on experience bar items selected signal comes in this signal comes in with an ID that d is which is basically an array of the different options the button has now going back to the graphical user interface these three options we have added this compact will be ID number zero percentage ID number one value on D number two basically these are added as an array and the IDS are equal to whichever got at its first so knowing that going back to the options menu we can simply say that we get the parent as it will be an immediate graphical user interface and the experience bar State is a variable that lives on the script of the graphical user interface and we're going to set that variable to the ID that was selected so 0 1 or 2 then going back to the graphical user interface that means that his experience bar is going to be not a value as a string but for example value is State number 2 or ID number 2 I should say then we need to change these state machines so they were not going to match with compact we're going to be matching with 0 and then we'll add this compact as a note as a text note so we can still remember what's actually going on in the background so we'll do that for all of these also have a percentage here and we'll have a value here so now we can still understand the code with these notes we're adding for ourselves and if we can understand that we can understand the code but at the same time it's functional so we're gonna do it exactly the same here and I'm doing it wrong this needs to be a 0 and this needs to be a one and then we'll change this into a note and we can remove that column at the end now just like that we have changed the state machine and now our code is able to handle this of course one thing we still have to do is that the the player changes the ID or changes the mode you of course have to load that up because we want this change to happen at runtime inside the same game session now the experience bar when the game starts up has this set experience bar which loads when the game is already loading this basically recollects the player level the player - required experience current experience and set the bar now of course the bar already has these items but this will take a minimum amount of resources to simply reload again so we can call this function in the options menu by simply saying get parent and then run with a space there run the set experience bar function so let's see how far we are with that and maybe we have to make some last changes - so right now ok first we see that the experience bar is in value just like we said ID number - value and so the spirit experience bar says 650 out of 800 now we go into the options we go change it to percentage for example let me now exit visa now that it has 81 downside though is that whenever we go to this option menu compact is pre-selected and it's always pre-selected and even when we want to get compact when we click this one we haven't actually changed it so we also didn't change the experience bar you would have have to select value and then compact before it actually switches to its compact mode so what we have to do is whenever we have a mode selected for example percentage that when we open the option button up that the percentage value is pre-selected this will be much better feedback to the player and we can select both of the other states without having to make a weird workaround that we don't want to explain to the player so to do that we have one more add item to add and that will wrap up this tutorial so the last items add is only one line of code on a de graphical user interface underneath here when we have that option you load it up we add to the world we set the states that the drop down are the options at the drop-down menu should have what we do then is we take a same extreme experience power option and we select integer and we input the ID and the ID is of course what we had saved to the experience bar State in the first place so now we have a select integer experience bar state we select the right integer to be pre loaded when the option menu opens up and in this this function that does not have an alternative to push text or push the possible value it only accepts an ID we can only pre select based on an integer ID and we can't do that with text and that's the reason why it's easier to change your your match command your state machine to make use of those integers because otherwise you would have to run a loop here you have to run loop through every option so with that done let's run it one more time demonstrates all working currently its value so that will be integer number two and we go to options you can see value is now pre-selected if I were to go to percentage X it goes to percentage open it up a is percentage still when I go to come back it switches to the compact mode and with that we have a working options menu we can change an option at runtime and we have this all game menu with options for us to expand this tutorial series on so in the future tutorials we'll also be looking at this Save button at this low button how you can save and load games and we can also have a look at maybe how you can create a new game all together so there will be tutorials for in the future if you're curious about those tutorials and make sure you subscribe that was it for today guys hope you liked it if you did smash that like button hit subscribe don't forget that little bell I can to make sure you don't miss out on those future episodes now as always I've also got a live stream going on every Tuesday and Thursday where a live stream the game development on the game I'm developing myself we've had a good 30 40 people in the stream every single day so if you want to talk with other Gilda game developers just have a chat or want to have a look what I'm working on myself feel free to drop in I'm gonna link and my schedule down in the description box below I hope to see you that one day and until then keep on gaming keep on going see you later guys

Channel: Game Development Center

Views: 28,821

Keywords: Godot, Godot Tutorial, Godot game menu, Godot menu, Game menu godot, Godot menu tutorial, Godot game menu tutorial, Game menu godot tutorial, Godot tutorial game menu, godot tutorial menu, Menu godot tutorial, Game menu, Godot UI tutorial, Godot UI, Tutorial, Godot beginner tutorial, Godot 2d tutorial, Godot engine, Godot game engine, Godot 3.1, Godot 3.2, Godot 3.2 tutorial, GDC, Game development

Id: p1l0M8u5EVc

Length: 26min 14sec (1574 seconds)

Published: Fri Apr 24 2020