Main Menu & UI Tips Godot Tutorial

all right welcome to this tutorial first i'm gonna change the layout because i like when my c node are near my inspector and i can split my file system so drag the tab on the next side then the file system i click this button here so the folder and files are separated here i'll go and select the inspector and move it at the bottom here this icon and the same for the node and there so when you select your scene 2d scene so the node properties are near the nodes and your file are easy to access you have your folder and the files inside so that's a layout i like and if you go in editor editor layout you can save your layout and give it any name that you want and save it so i already have mine and then when you start a new project you can just come here and load it if i click on mine clam that's my layout so next i'm going to change the project settings so project project settings in here i'm going to go down and find display window and then here for the width and height i'm going to divide them by 2. i'm going to do pixel art later so lower resolution is pretty nice for pixel art then if you go down stretch mode i'm gonna put it to 2d and aspect is going to be keep if you resize the window so now it's not going to squish or stretch anything like that all right now we can start adding some nodes to the project so the first node here i'm just going to call it root and inside here i'm going to add a canvas layer this one this will be the node that will contain all the ui then i'm going to add another node a i'm going to add a 2d node and this one will be the game and i like to have a third node this one can be simply a normal node and this will contain the managers but i don't think i'm going to add any for this tutorial but if you have like the player manager or world manager anything like that i would put them in here and instead of changing the whole scene i would only insert my scene inside the game node kind of easier to control like that and in here i'm gonna add a control node and this could be my main menu this could this could be the the ui i know that i'm gonna have a option menu and i'm gonna add another control node and this one will be like the info and in this i'm gonna have like the info over the game like the health of the player or resources that you have so that's it for the main nodes now i'm gonna try to block out the menu that i want to have so to begin main menu i'm going to change this control layout and put it full red so it cover all the screen and inside this main menu i'm going to add a color erect i'm going to put it also full wreck and this one what i think about adding is a kind of a background with the castle forest sky so i'm just gonna put a color in here then i'm gonna have a title for now i'm gonna put a label but later it's gonna be a texture wrecked but for now let's do a top white then this could be the name of the game super cool dude put this centered and now let's add a small panel here and add buttons in it like start game option and quit so add i'm gonna do a color wreck i like using color rec to place my stuff since it's faster i'm gonna hide the info and option for now okay so let's put it like this the color i'm gonna put it dark and transparent something like this zoom in now i'm going to add buttons to it so add buttons just put it there and start i will duplicate it and if you hold down shift you can lock the control on a axis so if you want to move your control precisely you can do that and when i do my blocking i don't really use the other layout nodes just to not complicate the task i just want to lay out the buttons approximately and later if i want i can add more so start option and quit that's looking good and that's it for the main menu now i'm gonna do the option menu i'm gonna hide the main menu and show the option so i'll do the same layout full rack this one will only contain a fading effect so i use a color rect i'll put it full rect put it black and 50 about yeah that's about right and i'm gonna add a back button add button back and i will center it so layout center that's a pretty simple option menu the last one is the info so i'm going to hide the option show the info yeah this one i'm going to put full rack to and for this one i think i'm gonna have a live bar at the bottom and a resource bar at the top just for some examples so yeah right click add node i'm gonna add a control but this one i'm gonna shrink it completely down and then i'm gonna go layout and center bottom and in this one so this one would be the live bar and inside of this one i will add a progress bar for now i'm gonna add a pro normal progress bar then i can do layout uh i will do about a center bottom and then click on it hold shift to move it up a bit and by having the anchor point at the bottom like that if i select my live bar and i go in rec i can change the scale for it so if i put two so yeah it will scale from this bottom point here so an option you could have a scale option for the ui using the anchor point so that's pretty much it for the live bar now i'm going to add a resource bar so add child node control this one i'm gonna shrink it down layout and this one i'll put it in the top right and then this one will be resources and add child node i'm gonna put a color erect change the color dark fade a bit there and zoom in on it and inside of this one i'm going to have smaller panel that has a icon and number tell how much of a resource you have so add child i'm gonna add a another color ray make it smaller like this and inside of this one i'm going to add a texture rack and to test i could use the default icon put it in here you need to check expand and then you can get it smaller if you hold shift you're going to keep the ratio when you scale i'm going to put it on the side like this and then i'm going to add a label and let's say 5 i'm going to change the color of the panel let's put it some kind of color blue and then i'll move it in place i'm not really gonna play with the font right now later i'll change all the panels and stuff for pixel art and i'll change the font too and then i'm gonna play with the size of the font and stuff like that so that's pretty good for one resource node so this one i can call it a resource node and i'm going to save this one as a scene but here i will create a folder the new folder this will be the ui and inside of here i'm going to have it another folder this will be the component okay and resource node will be a component then this uh resource node i know that i'm gonna have four so i'm gonna duplicate this one so yeah that's pretty good i know that my first will be would the second one will be stone then i'm gonna have gold and the last would be crystal so i could now save my resource resources info save branch as c i'm going to save it in component live bar to save branch as scene in component then i'm going to have the info this one i'm going to save it as scene but this one will go in ui in here info tscn that's good then i'm gonna have the options i'm gonna save branch as seen in the ui and the main menu too save branch as seen in the ui save now we can just play to see all of those uh so if you go up here play it's gonna tell you that you need to select a basic scene but yeah we didn't save this one so just save the main scene let's call it root and this one will be at the base of the folder save that and then if i play the game play it's going to ask you to select the starting scene so select it's going to be root open that and there you go this is the main menu with the option and the resource everything is shown at the same time so the next part will be to add code to all of this so the first thing i'm going to do i like to have a main script which is only responsible for signals so here i'm going to create a new script i'm gonna i'm gonna call it signal manager like this in here i'm only gonna have signals so i can emit them or listen to them from anywhere in the game this is going to avoid too much code spaghetti so let's say that i start with the first signal start game pressed so that's pretty simple i'm going to save this script and to use it everywhere what i'm going to do is go in project project settings auto load and here i'm going to choose this script here signal manager open and it's going to use this name signal manager add so this one i can use it in my code and it's going to refer to this script from everywhere in the code what was that so let's say that i go in my main menu here i'm going to click on this icon and this is only the main menu and now i'm going to rename those nodes here so this is start this is option this is quit right this is the menu panel title and this is the background and the main menu so i'm going to add a script to the main menu with this icon there my menu gd that's correct create and i like to hear template i like to select no comments so the script is clean and in here i'm going to select start go in the node tab and pressed double click this and just connect it's going to by default select the main node and it will create the unstart pressed connect that and do the same for the other buttons pressed and quit pressed all right so when i click start what i'm gonna do is call my signal manager and then emit the signal start game pressed and when i do this i also want to hide the main menu so this will hide the main menu node save this and i also want to let's say start the game so what i could do is go in my route and let's say i add a script to my game so add a script game yeah and in here i will have to listen to the game start pressed so to do it i will just signal manager and here i'm going to connect the start game pressed and i'll connect it to this script so cell and i'm going to connect it to which function so i'm going to create a new function and i like to use the same and just add the on start game pressed that's correct and i'm going to create the function function on start game press and what i want to do is let's say normally you would start your game so show your world or spawn the player and stuff like this but here i'm just going to print game start and i'm going to hide the option and the info and just start the game so f5 so this is the the game and if i click start the menu is hidden and i have here at the bottom game started so it works and i would like also to have the info displayed so i'm going to go in my info and add the script to this one add a script info yes and this will be the same as the game so i can copy that info just paste that here but here instead of printing the game started i'm just gonna show you could also just uh have your main menu uh get a reference to the info and just call info.show this works too but i'm just showing the signal way once your game becomes bigger the signal manager is really nice then so you don't have one script that has multiple connection to everywhere you just connect it with the signal so now if i start the game i just click start and i have my info is shown my main menu is hidden and my game started perfect so now i'm going to do the same for option i'm not going to hide the menu here i'm going to do option press now this could be useful if you want that when you press the option when the option menu is shown that the player can't move anymore or something like this so you emit the signal and the player could listen to that and stop his execution i will go in my options in this option and here i'm going to create a script option yes this one will be the same as the info kinda so i can copy the info and just change it for here instead of start game it's going to be option option pressed and on option pressed you just show and now this is something else when i click back i want to hide the option menu so pressed just leave it like that so here on back pressed i can simply do hide but then if you stop the player control or something like that you would need to send a signal option closed and your player could listen to it and then resume the control or anything that you you change by opening the options so let's see if the option menu works start option the option show there's a fade you can click on anything else and go back and we're back to the menu all right that's working and now for the quit this one is quite simple this is simply get tree and quit that that's pretty much it for the main menu with the code so the next thing is going to be some tricks to deal with the with getting a node in the tree and make sure it doesn't break later if you modify the layout industry so i'm going to go in info and i'm going to start with the resources i add a script to it and i go in here i'm going to get a reference to those notes word stone gold crystal so what you can do to get the node is have a unready bar and let's say wood is equal to get node and here you would say color rect and let's get yeah you say get note and color red would but now let's say i change the name of this to change it for panel now the link is broken the path is broken so this will not get the wood anymore so to change that what you can do is you could export a notepad export node path then would so by doing this when you click on your resource here and go in the inspector you export the variable in the inspector so you can click assign and select the wood so now the path with will always be the same and if if i change the name of this it will update so in my code this will always be the path but then what you have to do in your code would be to go var word node is equal to get node would so then you get your node here you can have a shortcut for this instead what you can do here when you export your var would you can do you can add it already so it will be executed when the scene is ready this will be equal to get node would and then you can do as control and then you can remove that this wooden variable will be the node and this here at the end you can change it for something else so if it's a custom class or custom object you can change it here because this is a color rack this could be change to color so i can do that for all of the other one there you go and now i'm going to go in the resource node and i'm going to add a script to this resource node to change the value and display the correct icon so in here resource node create so this one i'm going to do the same i'm going to get the reference to the texture rack and the label so the label will be quantity and this will be the icon so in there i can just go here and copy one of those so this will be the icon and this one will be as a texture red and the other one will be a label and quantity but then you must not forget to go to save your script and then click on the main one and assign those value so icon is the icon quantity is the quantity and i need to do the same for this one here so resource i have the wood stone is the stone gold so now all my nodes are set perfect if i go back in my script for my resource node i'm going to add a variable to set the icon so this one i could just export a normal value so this will be a texture var icon texture so then with this what i can do is unready i could tell icon texture is equal to eye contexture so then when i start the game i'll see my picture and i'm going to add a function here set quantity i'm going to take a int as a parameter and with this i'm just gonna do quantity text is equal to the quantity but this is a int so i need to change it to a string sdr this will update my quantity and with this i'm gonna go back in my resource and in ready just to test if everything works i'm going to call that function oh and also here if i do just would that i don't have the set quantity i don't see it because i don't know that this has this function so what i can do here is add a class name so class name resource node so if i call it like this then if i save i can go back in my resource here and as control it's going to be as resource node so now i can see set quantity if you press ctrl space it will bring back the uh autocomplete so set quantity and i'm just going to set the random quantity so rand i and modulo uh let's say 20 so it should give me a value between 0 and 19 i guess i'm gonna do it for all four if i start the game and click start i should have four random value for my resource start oh yeah i have nine and seven and zero and since i didn't set the texture icon it's it's empty so what i can do is go on my wood and i can just give it the default icon and if i start my wood should have something oh yeah my wood has a small icon okay so that's pretty much it for the blocking of the ui and the coding next part is going to be some pixel art and applying the pixel art to all of this alright let's do a quick time lapse and i'll be back [Music] so [Music] [Music] yes [Music] [Music] all right so now let's apply those assets to the game i'm going to go in ui and i'm going to create a new folder sprites i'm going to get my sprites here select everything and just drag it inside i also have a font and if you want to get some nice font i could recommend this website a thousand one fonts dot com i know you can search for pixel or you can search for anything find something that you like here if you check this icon here only show funds that are free for commercial use then you should be good to use these fonts in your project and i'm going to import just a font i'm going to create a new folder font and inside here i'm going to import just this one let's make this main menu a bit nicer so let's go in the menu the background i'm going to change it change type this is going to be a texture rack and oh yeah and first in sprite i'm going to select everything here in import the import tab i'm going to select preset and 2d pixel and re-import this will make sure that they are sharp image and not blurry for pixel art it's pretty important so yeah texture rec i'm going to drag this texture screen here and i'm going to check expand the title i'm going to change the type for extra rect 2 and i'm going to drag title and check expand and this one i'm going to change the stretch mode for keep centered or you can also check keep aspect centered which will scale it with the with the size let's let's use this one now for the menu i'm going to change the type to and this one will be a nine patch wreck nine patch rep then i'm going to use my main panel texture yeah put it there and now it's a bit weird but if i make this a bit bigger and zoom in this you need to move the dotted line inside so you tell what part of this you want to scale and not to scale and there you go so now what i can do is resize a bit my buttons and now my buttons are kind of weird because they are not the same size so now i could use a control box so i'm going to go in my menu panel add a child node and i'm going to use a v box container vertical box container i'm going to put all my buttons in it and now the v box container i'm going to go in layout and full rank and then i'm going to resize it so it fits inside that's about right and now we're going to apply the the texture for the buttons but for that we're not going to apply them directly to the buttons itself what i'm gonna do is i'm gonna click my main ui and in theme here i'm going to create a new theme and i'm gonna save this one in ui call it main theme so then if i go in my ui folder select main theme and all the way here at the top edit theme add class item and here i'm going to add a button and add all so this will allow me to add a style for all the buttons that are in the tree here so style disabled i'm gonna add a new style box texture click on it and then i need to set this texture at the top so i'm gonna go back in my sprite and button disabled and there and i'm gonna do the same for the other one okay and now i'm gonna add the font also for the buttons font i'm gonna add a new dynamic font then you just click on it and font and here you can add the font that you imported earlier here now this is a bit big so settings let's do 14 14 is pretty nice the other thing i'd like to have is that the button would stretch to take all the space if i select my buttons here i can go down in size flag and vertical check expand so the button will take all the space it can and let's do this for all the other one size flag expand and now you can move it a bit and there that's pretty good so that's pretty much it for the main menu let's save it and if we test that's what it looks like so can start option but now if i go in option the button is not set here and if i just want to add the same style what i can do is add a child node just a control and put those child of this control and check the control and layout full rect so this control beam you can add main theme and now if i start and i go in option my back button has the same team and now let's do the style for the resources and the health bar i'm gonna go and do the resources first so what i'm going to do here i'm going to use the same panel as the main menu so i'm going to right click resources i'm going to click merge from scene i'm going to go in ui and select my main menu and i'm going to select the menu panel okay this will import the main menu and i'm gonna delete everything inside and i'm gonna use this one and resize it and this will be my resource panel i'm gonna take those node and move them inside my menu panel i'm gonna delete this old panel and let's place those since earlier we did those node they are not they're not broken they're still there so i don't have to change anything in my variable and it's still gonna work so if i start and click start my resource are still working that's pretty cool so this will be panel so now let's change the style of those nodes if i go inside i'm gonna do a font for my quantity label and i'm gonna click here new dynamic font i'm gonna do the same font i'm gonna go in font select this one put it there and this one the settings i'm gonna change the size let's say 10 yeah 10 is pretty good and i'm gonna make it centered okay so the panel i'm going to change type i'm going to use a nine patch rect again so i need to put my small panel in texture here this is the variable for my nodes zoom in move the dotted line all right could make it a bit bigger okay so now if i save this i'm going to go back in my resource and resize those a bit for this you could use a hbox container horizontal but i'm just gonna keep them like that and now here or my wood i'm gonna put their icon so what is this small tree icon the stone is gonna be this one gold and crystal so that's pretty much it so if i start the game oh yeah here i got i have a problem because i changed the type of my resource node it's not a color record anymore it's a nine patch rec nine patchwork i'm gonna change it here you could just set it a control it would it would work you just don't have access to the nine patch rack function in your code but if you want to have it you can change it to night battery so let's start it go in code and start and there you go i have nine wood handstone seven gold and zero crystal pretty good now let's just do this small live bar and that should be good so info uh live bar here so here i use the progress bar but i'm going to change it for a texture so i could just change to change the type like this texture progress and it's in texture here i'm going to do progress frame in under and progress live in progress and i'm gonna check nine patch stretch so it takes all the space and let's change the value for something like this d6 and there you go there there it is so for this you could create a script and in your signal manager you could have a player life changed and here you would connect the signal on player live change and get the live and maybe maximum life and update your progress bar so you just you would just listen to a signal and if the player is not there anymore it's not going to crash or anything because it's only listening to the signal the signal which will just not be emitted so that's pretty much it for this simple ui main menu tutorial i hope you liked it if you have any suggestion of what i could do next please let me know thanks for watching it was pretty cool and i'll see you next time i guess

Channel: Calame321

Views: 638

Keywords: game development, godot engine, godot tutorial, godot beginner tutorial, godot menu screen, user interface design, godot 3.3, godot menu tutorial, godot ui, godot game engine, godot 3d tutorial for beginners, game engine, godot 3 tutorial, game development for beginners

Id: qoJvmwvGV3Q

Length: 33min 15sec (1995 seconds)

Published: Wed May 12 2021