Godot 3.1: Creating a Simple 3D Game: Part 6 (Menu Screens, Text, Buttons, Signals) #GodotEngine

hello and welcome art six of creating a simple moving dodge 3d video game at using like a doe game engine my name is Khan and this video we're gonna continue making this simple 3d moving dodge game where you are a ball and you roll around a maze using keys on your keyboard you collect coins you avoid enemies and if you collect all the coins in the game you go to a Yubin screen and of course if you hit an enemy you go to the game over screen and you can go back to the menu and try again this is part 6 in this mini series about 9 or 10 videos or so so if you've not seen the previous 5 videos in this mini series I'll put a link to that playlist on the screen right now but in this video we're gonna go ahead and add menus to our game we actually have three of them to make we have a title menu with a play button we have a game over screen and a you win screen if you collect all the coins in the game so first off we're gonna learn how to create menu screens in the game next off number two we're going to learn how to create on-screen menu text so text on the screen and actually be able to use whatever fought that we want pretty much in our game we're gonna add a background colors that's number three so you can have whatever background color you want in your menu number four we're gonna add buttons to our menu that we can actually click or hover over that will have style and text on them and last but not least we're gonna program the buttons using something called signals which allow us to click the button and have a certain piece of code execute and that way we can switch scenes in our game when we press a button to play again or to go back the menu but first off we're actually gonna fix a small error that we have at our project to do with shadows and walls so that's number zero s the first thing that we're gonna fix in this video but of course if you like this video over learn something go ahead and click on that like button below this video it really helps help me and this channel if you wanna see more videos like this one in Godot or a blender or technology click on that subscribe button and click on the Bell icon to get notified whenever upload a new tutorial so let's go ahead and jump in to Godot I've got my game project open and in the last video we added maze walls using this grid map node along with a mesh library of two different blocks that we exported from blender 2.8 but you will notice there is something not quite right about the walls they are not casting the shadows my ball here is casting a shadow this block that's gonna fall when I play on my game is casting a shadow I've got a problem with my lamp I spent some time in last video and making my scene have ambient occlusion or screen space ambient occlusion to get the the shading kind of nicer but if I select my directional light in my scene it has properties that I kind of messed up in an earlier video or I tweaked to have bad settings one thing I will note that if you switch into orthographic view or orthogonal view in Godot versus perspective shadows will or may not appear the right way I think in the last video I was looking at my scene a lot through orthogonal and when you do that your ambient occlusion might not even show up at all or your shadows depending on your graphics card so there we go perspective will let you see them better but still with my directional light selected if I go to the inspector and change these two settings normal bias and by a split scale and I could just click these little circular arrow buttons to reset them aha see now we get shadows back from our walls okay if I reset that one to it that might be good you might play you're out of these if your shadows are acting weird but we should leave these at the defaults and now they hopefully are so that's number zero done let's go ahead and make a new scene for the title menu in our game so I'll press this little plus button up here and that'll go back to my level and do a quick save when you press this little plus button and you make a new scene you get the option once it finishes saving the others scene when you make a new scene with a plus button you get the option to create a root node for the scene and a defaults to 3d but menu in this game is gonna be a 2d level or 2d scene so I'm gonna click on 2d at the top and the first know that I'm gonna create well actually have a shortcut for here it's going to be a control node but you can just click on user interface to create that a control node is the basis for everything that you can use in a menu essentially this menu is the size of our game so it's 1280 pixels wide because we change that in a previous video and it's 720 pixels tall because they gotta be changed out in a previous video to add text to our menu I'm gonna press or select the control node and press the plus and if I just look through all of my available nodes the control node is a category so node by itself because we've added one already but it's a category of the things that you might want to have in a menu and the first thing we're gonna add is called a label and a label is just a piece of text on your screen so I'll select that press create and we get this tiny little label if I make it bigger and it does nothing in order to put text in it I can select it and then over in the inspector I can click under text in this text box and I can type something like simple 3d game and that's gonna be the title of my game and as you can see I got that text there it's really small that's really boring so we're gonna fix that in this box depending on how big you have it you can align and those are the next properties in your inspector the text to be centered that's what we're gonna do so I'm gonna align left and right I'm gonna make it centered so now it's middle and then V aligned I'm gonna do Center as well so now the text will always be in the middle of this box what I suggest that you do and there are really good ways of using different types of nodes to organize a menu screen so that if you change the size of the window then the menu pieces will all kind of align themselves very nicely we're just gonna make this for a static sized menu today so we're not gonna get into advanced layout topics but what I suggest that you do is you change the rectangle property of your label to be the same size as the width of your screen or your viewport so what I'm gonna do is go down to the rect property rectangle of the label and I'm gonna make it size 1280 pixels wide and then it doesn't really matter how tall it is because it gets centered but you can also drag the top as well and that way you can make your title centered if that's what you want fonts fonts are not built into a Godot game unless you put them into a Godot game you actually need to go and get a font file and include it in your project folder on your computer so that's what we're about to do there's a website that I suggest that you check out I'm gonna put I'm gonna put it up on the screen or right now it's called font library dot org and this is a site where you can get free fonts that for the most part you can use in any project that you want there are a few conditions I believe there's hundreds and hundreds of them you can see how many there are based on categories and they're great so what I suggest that you do is go up to on this website the fonts link at the top and you can search by different families of fonts or different licenses of fonts there are serif fonts that have the little extra tag e bits on the end of letters that make it look old-fashioned or like a newspaper so if I go to serif fonts you can see all the fonts are kind kind of in that serif family once it loads up actually know what it doesn't seem to be working right now but will just keep on moving along you can search for a font that you're looking for and you can explore all the different fonts on this web page you can sort them by upload date but most importantly if you're wanting to make a game you're gonna publish and sell and make money off of you need to know the usage rights or the usage rules of the font because thoughts are essentially a piece of art and you may not have permission to include that piece of art in a game project so you might need to check out what you're allowed to do with it and generally when you download a font from this website it'll come with a license and you can search by them now licenses on this font library dot org website and include everything from freeware to public domain to Creative Commons by or creative commons by a share alike and those mean that you have to give attribution you need to say who you who made the actual font that you're using in the credits of your game or along with your game somewhere you might need to put the copyright of the people who made the font there are certain usage rules and I'll let you check those out I've got a head and I've downloaded a few fonts for this game project the first one is called that no-go font casual it looks like this the second one is called red cost and by the way I'll put a link to all of these in the description area below this video on YouTube and it last but not least some time later so these are the three fonts I actually have them on my desktop they're right here but these three font files and by the way font files often end in dot TTFN and dot OTF those are common file types that will work in Godot so I'm gonna select those three font files and I'm going to copy them and then go into my project folder on my desktop and I'm gonna make a new folder for fonts not foods about fonts and I'm gonna paste those three font files into that folder and I can go back into Godot and it'll import them hopefully right away and I think it already did it in the background because I already have this fonts file or folder rather in my file system so I can go and see them there so how do you actually use these fonts in your game on a label well if I select the label and I go down to there's lots of sections for a label and it's properties of text but if I go down to custom fonts and open that up I can enable a font and as well check that box and I can't just drag a font file across into there because what you're actually doing here is you're creating a resource file inside Godot that's either gonna be a bitmap font or a dynamic font and for these we're gonna use dynamic fonts so I'm going to select new dynamic font and once I do that this is a resource so I can click on it to expand out its little section or I could collapse it again clicking on it but if I expand that little dynamic font resource section I can go into its font category yet it's pretty big and pretty confusing here and it's font data is where I can drag the font that I want so I'm gonna use maybe that no-go font casual in this dynamic font and as you can see I can you see it there it's really really small small tweak that in a sec if I want to change it later I can do it I can just drag in another font right there but I'm gonna see which one I like best you know what I think I like the first one that I had mm yeah okay so the font that I've just made also includes its size so if I collapse the font section but we're still working in this dynamic font and I open up settings I can change the size here I'm gonna try 80 font size and there we go it got bigger let's make that even bigger let's make it a hundred and twenty or so so it's gonna be the title of my game you might want to check this use filter option depending on your font you might smooth out the appearance of the font you might not get as much Jai Guinness yeah it'll kind of blur the edges a little bit which will really help some fonts and then you can change the color under not the fonts are not under the font tab so I can click on the name of this dynamic font and I can go down to custom colors and here I can define only a font color by clicking on the check box and then picking in the color picker the color that I want so I'm gonna give it kind of an aqua e greeny colour and I'm gonna give it a shadow as well and so if I enable shadows and then give it a shadow color oh I don't know some sort of orange II color you can kinda see it there but once I enable a font shadow there is another section called custom constants yeah there's lots of little menus and submenus and things to expand here it gets kind of confusing under custom constants I can enable shadow offset o offset X & Y that I can drag to offset in those two sections the shadow that so I don't like orange necessarily maybe I'll change it to uh I don't know maybe a pinky color sure I've kind of like that okay I lost my simple 3d game if you want to change the rotation of this text that's under the rectangle or rect property again this is where we change the size earlier here it is a rotation and I can rotate around this pivot point here and I believe you can change the pivot offset as well although I haven't really played with that too much so you can rotate if you hold shift I believe or just drag in here you can rotate it more subtly than with the little dragger okay so maybe I'll make that and then I'm going to go back to the font dynamic font and change the font size to make it a little bit bigger maybe 150 and I like that okay next up our background colors we don't want this default gray so I'm gonna select my control the root note of the scene again and then I press the plus what we have to add a background color under control is called a color rect or color rectangle so I'm going to select it press create it's now a child of the control the main note of the scene if it's a child if your label well you can just drag it on to the control node now this color rect is this little thing up here it's a square with a color it's white and it's on top of our title right now but we also want to not only fix that I'm gonna put it behind we also wanna make it the right size so again just like with the label if I select color rect and I go over to its inspector and look at its properties I can change its rectangle position so if I moved it I could reset it to zero and zero and I can change its size to 1280 by 720 okay so now it's the right size to move it behind the text well this scene doc here and the order of the nodes determines the order in which it draws elements on the screen even though this color rectangle is below the label it's actually in Reverse when it's drawing things on the screen it's Raw's things on the screen or from talk to bottom and there for the very last thing that it drew on the screen was the color rectangle which means it's actually on top so if you want things to be behind they need to be above but still maintain the same hierarchy as the label that you want on top so I'm gonna move color X just right up there it's still a child of the control but we can just switch the order by carefully dragging them like so and so now if I flip my color rectangle it's behind and I can go to its color property and pick a color I might like oh I don't know maybe a dark D saturated blue of some sort I kind of like mmm that okay we're gonna use that and I might tweak it between now and the next video next up our buttons and buttons ones work very similarly to color angles and labels if I select my control root note and press plus I can go into my control node category buttons are under this category called base button and we actually don't want to add this specific notice actually not a note it's a category there it is button and button is actually a category amongst itself worked unto itself but we're just gonna add the normal button under the base button under the control category okay so with button selected I'll press create gets put up at zero zero so I can make it bigger and I can drag it to wherever I want of course with its selected I can go over to its properties and the first property is text so I'm gonna name this button or have it's a play okay so there it is play although that looks really boring and drab so I'm gonna select my button and under guess what we have custom fonts again now every time that you want a thought of a certain size at least in terms of the difficulty we're getting into in this miniseries you need to make a new dynamic font so I'm gonna enable under custom fonts font and I'm gonna say new dynamic font and the text goes away because now I have to open up that dynamic font resource and go unto font and drag in the font file that I want I'm gonna try red costs and drag that in there and now I can go to get the B gender dynamic font settings I can change the size let's try I don't know 60 any a bit bigger maybe 72 and we have a font on our button and if I go to change its color I can do that of course all of those buttons have a cooler thing about them if I select the button and go out of this dynamic font so just click the net dynamic font to collapse it buttons have custom colors for different states we can pick a normal font color so it's just the way that the color of the button looks so I can enable it and let's say make it kind of a greeny yellow color because that's the color for play and I can then have a hover color and this will appear whenever I put my mouse over the button area so if I make the hover color let's say orange e in color we won't see it right now but we'll see when we play the game and I'm gonna make a color for the pressed state so as I'm actually clicking on our I'm gonna have it go to a kind of a bright pinky color kind of like that okay one thing we can also do is right under the basic settings of the button so up here where you set the text of it you can make the button style flat so you can get rid of that ugly rectangle around the button and just have it look like a text so now if I go and play this scene it allows me to save it and that's good yes I will save it I'll just call it menu dot T SC n and it'll be in my res project folder and say older and save it will play and we can see this menu and if I hover over it it goes orange that's the hover color and if I click on it it'll turn pink just before it does what its gonna do okay so that's how you make a menu screen last but not least let's program the button so if I select my button first thing I'll do is I'm gonna give it a name this button is on the title screen and it's the play button so I'm gonna give it an appropriate name I'll double click on it my scene doc I'm gonna call it button - title - play and the reason I'm doing that is because if you just leave all of your buttons named button things might go awry for you if you name the code always button dot dot GD or the GD script fought just called button because then you'll have all your buttons try to have the same kind of code we'll see that in a second but we want to name them in them first next I'm going to add a script to this button and when I do that you're gonna see what I'm talking about here it names the GD the script file the name of your button by default you can change this but I just find it handy to name your button right away and therefore it'll name the the script file for your button the same as the actual button in that way you know which buttons code file is belongs to which button okay hopefully that makes sense we're gonna use GD script of course we're going to leave it inheriting code from button we're gonna have no comments turned on and I'm gonna save this script file into our scripts folder so I'm gonna press the little folder button go into my scripts folder in my project folder and click open I guess and now I can press create so we're creating this in our scripts folder and create so how do you program a button to go to a different scene because this button of our title menu should actually jump to our games level well we're actually gonna use something that are called signals and signals are away in Godot if that objects code can communicate with other objects code or objects can communicate with other objects where you can see and work with these signals is both in your code or either in your code in a script file or if you have a node selected you can go over to the node cap next to the inspector and if you have a node selected you're gonna see the signals the built in signals that are kind of like event handlers they're common events and reasons why you might want to have a node communicate either with itself or with another node so with a button you might want to trigger some code or run a function when the button is down or when the button is up or when the button is pressed you might also want to have code run when that button becomes focused on like if they press tab on their screen or if they do something that makes it focused or when you put your mouse over that button or when you take your mouse out of that button so mouse exited so there's lots of common reasons why events why you might want to trigger code you can also make your own signals and we'll get in and we'll get into that probably a little ways after this first mini series in our simple 3d game okay but with my button selected under the note tabs will this know doc I'm going to double click on pressed and I've already got a script on this button that's important so if I double click on this press signal of our button this window is gonna pop up and it's gonna be asking us hey we want to make a function a little block of code in other words a mini program that's what a function is that will let us handle when a button is pressed now if we're gonna make a little function we know what code file we're gonna put that function in and we can actually have that code file be on any object in our game so that's how you can communicate with other nodes or objects in your game by choosing the one that you want to send a signal to from this list but we're actually gonna make this button talk to itself or handle its own button pressed action or signal so I'm gonna select button title play that's this button that we're currently working with and it's going to make a new function or a method called on button title play press button title play is the name of this button without the dashes in it and this is the name of the function that we're about to create so I clicked here and then I'm going to press connect and when I do that it created a new function for me it only had this code up at the top before I this code right now this function will run when we click on the button now before we actually replace this line 8 with text I want to show you that at on this button title play under the node and under the signals there's groups and signals here this pressed thing that we double clicked on a minute ago it now has a little green pointer to a function name and little dots that mean itself so it's handling its own function or signal handling it's telling us what function is is gonna be run when we trigger this press signal ok hopefully that makes sense I'm going to go back to my script what are we gonna do when they press this button that's what's gonna be the line 8 and anything we put in this function well I'm gonna use a function called I get underscore tree that's gonna get basically all of the scenes that are available to me in my game and I'm gonna put a dot after that and I'm gonna say a change underscore scene and I can just use my arrow keys to select it from the list and press ENTER and I can close my round bracket now what goes in these round brackets is the name of the file the scene file that you want to switch to so I'm gonna put in here double quotes and the name of the scene file actually has to start with the name of your project folder which by the way is always res okay so this is kind of like a URL like website path name so we're gonna put res colon slash slash two forward slashes and then the name of the path or file that we want to go to we want to go to our level T SC n in fact if you just click on it down here you'll see the path that we want to get to you can actually copy that control C and then paste it into double quotes in your code and that code will actually work so if I go ahead and do a quick ctrl s to save and I go up to play this scene if I go ahead and mouse over this button of course you'll see it hover with the orange color if I click it will actually turn pink and hopefully aha okay it worked you just took a little bit of time to load up our game so now I've switched into the game if I go ahead and try that again if I play this menu or title screen it will work and I can press the button and it'll take a few moments to load that other scene into my games memory but here it is I don't know why it's taking quite so long in this take but there it works now the last thing we're gonna do in this video is make this menu screen our default game screen because when you export your final game you want your game project to know that this scene should come up first and not your main level when I press this play button it's actually going to want me to define which scene is my default scene so I'm gonna do that now I'm gonna press the normal play button about the play scene button and it's gonna say no main scene has ever been defined select one you can change it later in project settings under application category so I'm gonna press select I'm gonna select my menu t SCN file and press open and so now I can always use just a normal play button to get to the title screen of my game and I can press play and after a few moments my main game level will load and I can go ahead and play my game and everything works just fine okay so that will be it for this video of course if you like this video if we learned something go ahead and click on that like button below this video it really helps me and my channel out if you want to see more videos like this one in Godot or a blender or technology click on that subscribe button and click on the bell icon to get notified whenever I upload a new tutorial check out my facebook page at facebook.com slash born CG on that page I interact with you my viewers the most and on that page i also post sneak peeks and previews of what i'm working on next but that'll leave for this video thanks for watching bye bye you you

Channel: BornCG

Views: 39,990

Keywords: tutorial, lesson, 3D, beginner, game design, game, engine, design, godot, program, code, button, signal, font, menu, title

Id: S9EUIfjfgEY

Length: 28min 58sec (1738 seconds)

Published: Wed Jul 03 2019

Reddit Comments

[u/[deleted]]

thank you for this!

[u/reymus]

Awesome! I found the first 5 parts on youtube randomly about 3 days ago, and watched them all in a row. Glad to see the next part out =)

[u/[deleted]]

Hey! Following your tutorials and have to say, you're a great teacher. A couple questions:

How many parts are gonna be in this series?

Do you plan to continue with Godot? Do you have any other project you would like to make a series on? When can we expect it?

​

I'll be eagerly waiting for more. And thanks for the series! Been having a lot of fun, on part 3 as I write this.