Design and Code a Title Screen in Godot 3 (tutorial)

this is a hands-on tutorial on how to create a title screen for a game by the end of this tutorial we'll have a complete menu with a transaction effect that supports both mouse and keyboard inputs if you'd like to follow along there's a link for the project with all the assets on the description of the video to begin with we are first going to change a few things on the project settings first down on the display and window we are going to change the resolution of our game because right now we have a four by three resolution radio and we actually want it to be a wide screen resolution we are going to set it to twelve hundred and eighty on the width and 720 on the height we're also going to change the background color of the game so go up and find environment under rendering click on the default clear color and I'm going to change it to 26 31 38 don't forget to press Enter and now we have a nice gray blue as our background color now that our project is configured we're going to start creating our title screen to begin with we are going to add a new node to our scene which is going to be of type control rename this to title screen by pressing f2 while having the note selected go to layout and click on full rekt this is going to expand the rect of our control node to cover the whole screen if I press H you can see that it's anchored to the top left and right and bottom left and right of our game screen this node is the base node of our menu and it's going to hold all the other control nodes that we are going to have on this scene right here now let's add a V box container and let's rename it to menu we want to have a gap between the borders of our game and our whole menu as this menu is going to hold the other controls we're going to go to the inspector and under margin we're going to set the left one to be 120 the top one is going to be 80 the right one has to be the whole width of our game minus 120 so this is going to give us eleven hundred and sixty and about 1 the same thing the height of our game - 80 which is the same margin that we have on the top so this is going to give us 640 now as you can see the V box container rect is placed nicely on the center of our title screen we can now start adding the elements of our menu and we are going to start by adding the logo so with the menu selected add a new child which is going to be of type texture rect we can already rename this to logo and inside the title screen folder you're going to fight a logo dot PNG we can drag and drop it to our texture property under the inspector you can notice that the logo is all the way to the left of its rect and to keep it centered we're going to change the stretch mode from scale on to keep center and now as you can see our logo sits nicely on the center of its rect now we're going to add some buttons to our title screen as well as a picture of our characters and for that we are going to need for a horizontal box container so let's add a new one to our menu let's search for each box container we can rename this to center row this container is going to be responsible for keeping our buttons separated from our characters photo before adding anything to it we will first go to its size flags and on the vertical we are going to select few and expand this stretches our horizontal box container vertically and now it's covering all the remaining space left on the y-axis of its parents rect which is the V box container we called menu now we are going to add a new box container to this center row and this time is going to be a V box container this container is going to be responsible for holding the options that we have on our menu as instance new game continue and options we can rename it to buttons and we're going to go to its size flags and this time we are going to set both the horizontal and vertical as few and expand this is because we want these buttons note to cover half of its parents rect also we add the characters image and you see that in action in a little bit but first we're going to start adding our actual buttons to our V box container so I'm going to add a new node this time is going to be of type button I'm going to create it I'm going to rename this to new game and I'm going to change a few properties here under the inspector we don't want this button to have the default styling that it has right now actually we don't want it to have any styling at all so we're going to select flat and this is going to leave us with a blank button but now we need to add some text to it and because we want to style our text we will have to add a child to this button and this child is going to be a label so I'm going to click here to add a new child search for label and add it as a child of our button we can set the text of our label to be new game and as you can already tell the text is really small and we're going to use a custom font to fix that go all the way to the bottom until you find custom fonts and here you can create a new dynamic font after you created it click on it it's going to take you to the dynamic font inspector under font you find from data and here we can load a custom font click on load to the title screen fonts and here you're going to find a custom font they will click it now we are not going to see any text at all this is because here under the settings our size is set to zero and we're going to set it to 48 now before we continue we are first going to save our dynamic font in case we want to reuse it on different control nodes to do that we are going to click on the Save icon and click on save as go to the title screen fonts and it's usually a good idea to name your dynamic phones as the custom phone name followed by the size that you gave to this dynamic font in this case is pintubi malt set and and please forgive me if I pronounced at that wrongly underscore 48 which is the size of our dynamic font now that our dynamic font is saved we're going to add a shadow to it so we have to select the label and go all the way to the bottom until you find the constant constants select shadowoffsetx and offset why and on the way we're going to set the shadow offset to five we still can't see anything and that is because we haven't set the color of our shadow so go a little bit up until you find the custom colors select custom color shadow and I'm going to give mine a color of FF 9700 again don't forget to press Enter now as you can see we have a pretty nice shadow to our label lastly we just want to set the layout of our label and to do so select your label go to the layout and set it to be a full rect as you can imagine our menu is going to have more than just one option and because of that it's a good idea to save this branch as its own scene so we can hire from it and create custom options for our menu click with the right mouse button on the node and click on save branch as seen are going to save it under the title screen and we going to create a new folder called buttons and here we are going to save the scene with a different name which going to be my new button we can click on save now as you can see our option has its own scene and we can click here to go to it we're going to rename the root node to be menu button and here on labor we can set its text to be labeled now save this scene we're going to create three new scenes which are going to be our new game continue and options options that we're going to have to our menu also right now is an awesome time to save our scene just in case the door crashes on us so we have it already saved I'm going to save the title screen scene on the title screen folder with the name of title screen and now let's create the options for our menu so we're going to create three new scenes and they are all going to be inherited scenes so click scene new one hired scene we're going to select our menu button and here on the label instead of having the text as label we're going to set it to new game and we're going to rename the root node to be new game button and now we can save this on the same place as we saved our menu button and even heard seen from the new button is going to be called continued button and the label text as you can imagine is going to be continued Save and lastly the options button when hired from the menu button you rename the root node save same folder now back to the title screen we can delete this new button right here and add our three newly created scenes to do so click on the link at the screen buttons the new game Anu then the continued and then the options as you can see everything looks a bit weird and I'll cramp it together just because the rekt of our button is really small when we have never said it to be different to fix that we're going to go to the menu button select the root node go all the way to its wrecked and under minimum size we're going to set the X to be 360 and a Y to be 60 now as you can see the rect of our menu button covers nicely our label and we can save this and because we're using inherited scenes you can see that this change has been reflected on all of our other scenes now all of what's left for us to do is for each one of our buttons get the information that we just changed it on its original scene so we can do this by finding the rect going to the minimum size and clicking on this arrow right here as you can see everything looks much better now to finish off we're going to select our buttons note on the top we're going to set the alignment to be at the center this way our buttons are always going to be at the vertical center of this container and lastly you can search for separation so we can add a nice margin between our buttons and we're going to select separation and set it to 20 to finish off our center row we are going to add a new node which is going to be of type Center container under the inspector go to size flags and here we are going to set the same configuration that we have on our buttons VBox container which are a few and expand on both horizontal and vertical and now we are going to add a new child to it which is going to be of type texture rect we can rename this two characters and as you can imagine we are going to drag and drop the characters of PNG that we have under the title screen folder to its texture property our menu is almost done all of what is left for us to do is add a nice footer to it can minimize the center container and the buttons and on the menu we're going to add a new node to it which going to be of type label we can rename this to version label you on its size flags we are going to set the vertical to be few and expand this way it's taking out the left space that it has to take on the text property we're going to click on this icon so it opens up this menu for us and here we can type with new lines as well so again this is just some random text you can use anything that you like which is going to set the version to be one point two point four and give the name of our studio close we have the version of our game and the studio that created it all of what's left is adding a nice font to it because right now we're using the dos default font the process is pretty much the same as we did to our buttons go to the custom fonts create a new dynamic font and we're creating a new one because we are going to use a different size than the one we used on our buttons click on the dynamic font the font data was going to be the same and under the settings the size is going to be 24 which is half of what we have on our buttons and we can save this again in case we want to reuse it on the future but instead of calling it mumps a hot 48 is going to be monster hot 24 don't forget to save your scene and now if I press f5 I'm going to be prompted to select the main scene of our game which going to be the title screen we have a pretty nice menu that we created using some simple good old notes and no coding has been involved whatsoever until now now we have two things left to do add a transition between scenes when you click on an option for instance the new game continue our options and also give our player a way to select any item on the menu using his keyboard not only his mouse now the transition effect is going to be a black fading and to achieve that we are going to use a type of note called color rect we are going to add it as a child of our root component and as you can see it's sitting at the origin of our game we will set its layout to be a full rect this way is going to cover the whole screen we can also rename this to fade in instead of using color rect and under the inspector the color is going to be black and we are also going to change alpha value from 255 to zero because we want it to fade in so we want to start at zero and go all the way to 255 as I'm showing you right now to do so we're going to add a child to this fade in which is going to be of type animation player and we're going to use this note to animate the fade in as you can see the animation tab has been already open for me I'm going to click on the plus sign to add a new animation and I'm going to call it paid score in right now the length of the animation is at one second and I want it to be half a second somewhere inside it to 0.5 and now we have to start animating the properties of our fading do so with the animation tab open click on the fade in and now you can notice that we have these little key at the side of every property of our paid in note we want to animate the color remember we want to change the alpha value of the color and to do so we're going to click on the key to add a new keyframe to our animation it's going to ask us if you want to create a new track for this property and we're going to click create and now we have a keyframe at the frame zero of our animation to achieve the fade in effect we want our alpha to be at 255 when the animation ends so I'm going to drag the cursor all the way to the end at 0.5 and here on the color will set the Alpha to 255 and now we are going to click on the key again and Godot is going to take care for us of animating this alpha from 0 to 255 in half a second if I drag this to the beginning again and I press play you can see that we have a nice fade in animation to finish off I'm going to drag the cursor to the beginning again I'm going to close the animation tab and we're going to save this as a scene our project a new folder which is going to be called paid underscore in now we can save this note as a whole new scene you can notice that now if we try to move for instance our center row we are not going to be able to that is because our fate in note is on top of everything I'm going to press ctrl-z to bring it back to its original position and I'm going to hide it so we don't run into that problem anymore before being able to test our animation and wiring everything up together we first need a few scenes to go to in the first place and because of that we are going to create three placeholder scenes one for no game one for continued and one for options to click on scene no scene the root node is going to be of type control and it's going to be a full rect we can rename this too new game we're going to add as a direct child of it a central container which again is going to be wrecked we're going to need a V box container which is going to hold just a label and a button to get us back to the original scene and under this view container we are going to add the label and we're going to also add a button remember that we saved our dynamic phones beforehand now is when they are going to come in handy select the label go to the custom fonts and now all we have to do is load the Monza had 24 set text to be something like new game scene so we know in which scene we are and on the button we are going to set the custom font be the same one that we use for our label texts just going to be back we can also give some style to our label as we did to our buttons on the title screen so under custom constants offset same configuration that we had before colors going to be the same thing FF 9700 Enter and I'm actually going to change the forms that we are using on this label to be that we used on the buttons and now we have a bigger label it's just going to make things easier to see now let's save this under the root of our project ribbons great and your folder is going to be called game we can save this as new game and now we are going to create two new and higher Ted scenes from New Game one for continued and the label has to change it as well and one for the options if I press f6 or click on this button right here to play this exact scene instead of playing the main scene you notice that by pressing the back anything is happening so let's fix that by going to the parents of the scene which is going to be the new game scene and add a new script to it which is going to be called returned to title all of what we are going to do in this script is wait for a signal is going to be given by this button right here so we can go to the node tab and connect the pressed signal to the return to title and here we're going to reach out to the three of our game we're going to change the scene to our title screen and the title screen scene is located at rest column / / title underscore screen / title screen dot d s C and we're going to save this and if I press f6 and I click on the back we are taken back to the title screen of our game now we want each of these buttons to load a different scene and to know which seem to load we are going to create a new script that's going to hold the information of the path of the scene that we want to load to do so let's go to the menu button and add a new script to it and we are going to save it on the same folder as it is right now so just click on create and this script is going to export a string it's going to be called seen to load now we can save this go back to our title screen select our buttons and under the note we have to reload the script do the same for the continue button and the same for the options button and now we can go to each one of these scenes of our buttons and set the correct path for them to load so the scene sold here is going to be the path of the scene that we wanna load and in this case right here is going to be rest columns let's lash game slash options dot the SCN and then we can press ENTER to save this and ctrl s to save our sin if you go back to the title screen if I select the options button have the correct path right here so just repeat the same thing for the continued leave this now each our buttons have the correct path to the respective scene that they have to load now we have to connect the pressed signal of these buttons right here to something that's going to load our scene we're going to do so by creating a new script who is going to be attach it to our title screen is going to be called title underscore screen CD save and create action we are going to connect each of our button signals to these node right here to do so we are going to look through them so for each button that we have in our menu center row buttons dot get underscore children are going to connect to depressed event on this node right here and we're going to call the function on button pressed and because we need to know which scene we're going to load we're going to pass a parameter it's going to come from the button dot scene the square to load created this function we can delete our process this function is going to receive a parameter is going to be the scene to load and here we are going to call get 3.not change to our scene to the scene that we want to load if you try to run this you're going to get an error and that is because we are expecting an array here and we are actually only passing one single variable to the function and to fix this all we have to do is put brackets around our button dot scene to load save run you see that if we click on new game we go to the new game scene continue the same thing and options the same thing now we have to add our fade in effect do so we're going to create a new script because we only want to load this scene when that fade in effect finishes so we're going to go to our fade in scene attach a new script to it we're going to call this paid underscore in save the script and create it you can delete everything here we're going to need a signal to signal the title screen that this gate has been finished so we're going to call this signal fade underscore finished we're also going to need a way to start the fading animation so we're going to create a function called fade in which is going to access our animation player and cow play fade underscore in and now we are going to connect a signal from our animation player which is the animation finished to our fate in script and because we only have one animation we don't actually need to check the animation name so we're just going to omit the signal it finished we can save this script go back to our title screen select our 18 node and we're going to connect this fate finished to our title screen and here on this function when the fate has finished is when we actually want to change the scene so this code is going to come from here so here and now we have to start this information somewhere else we're going to create a global variable to this script is going to be called seen path to load a button we're going to set Sinbad the load to be equal to the scene to load we are then going to show because remember we before so we actually have to show it after we are showing it so after it's visible we're going to call the function that we just created which was paid underscore in now we can save this run our game we're gonna get it a simple error here because I'm using the wrong variable name we run our game now if you click on new game for instance we get the fading effect and we can go back continue and everything is working fine the last thing that we have to do is add support for keyboard and that's pretty simple to do in this case how we are going to do is select the first button that we have which is the new game button and now that we have our new game button we can call the function grab underscore focus and this is going to set the focus of our UI to this element right here we can run our game and now you can notice that we have this blue border around our new game and because of that we can now use our keyboard to go down and up on our menu options and if I press ENTER we go to the continue scene thank you so much for watching again if you have any questions feel free to ask them on the comment section the final project of this tutorial is going to be as well on the description of the video and I'll see you in the next time

Channel: GDQuest

Views: 114,654

Keywords: godot title screen, title screen tutorial, godot interface, godot UI, godot game engine, godot game demo, godot engine, godot 3, gamedev, game development, game engine, GDscript, Control node, UI node, 2d, learn to make games, game creation tutorial

Id: sKuM5AzK-uA

Length: 32min 42sec (1962 seconds)

Published: Wed Jun 13 2018