Godot 3 - Platformer Tutorial - Part 10 - Title Screen and Menu

what's up everybody welcome to my pixel as always it's awesome to have you here today we're changing gears a little bit and instead of working on our gameplay features we're gonna build our title screen and menu it might not be the most glorious thing to make but every game needs one so let's go ahead and knock it out let's start off by creating a new scene so we'll just add one in here well we'll add to it we'll just add a basic node it's really just a placeholder for us so that node let's just call it title screen then we're gonna add a sprite so that we can put our texture for the background graphics that we have so let's just put a sprite in here and then for our texture down here we'll add in a little sprite that I've prepared this background sprite here we go and it's still using the center of the sprite as our origin so we want to change that or the offset so where it says centered over here just uncheck this box right yeah since as you could remember this this purple line here is basically the default of what you're going to see if there's no camera scrolling or anything so we want to just make sure that our sprite is there that's all we just did things are pretty simple so far as we've done all of this before so now we'll start getting into the new stuff with control nodes the first control node we're gonna add is called a margin container so let's go ahead and look for that so as a child of the title screen we're just going to search for margin container put that in there okay so we have our margin container we're going to set the well just make sure you have it the margin a container selected and then you're going to set the layout to full rect and then you'll see this snap to the edges that's what we want our container to take up the whole space of our screen we're gonna set our custom contents down here let's just set these to I don't know how about 20 on the top and 20 on the bottom let's just set it to something it doesn't matter too much for this demonstration but we're just going to set it in there now what the margin container does is it simply maintains a margin around the nodes which it contains so any control knows that from here on out that you make children of the margin container are going to respect the margins that you set so over here we just set top and bottom to 20 pixels so if you were to just count 20 pixels if we put buttons or anything like that it won't go actually 20 pixels close to around here it won't go above here or it won't go below here and because we set that margin and if we wanted to we could set in on the right hand left also but the next image that we have to put in is pretty big so I didn't want to set a margin on the sides so that's why we have zero zero right right in left and top and bottom 20 20 next thing we're going to do is we're gonna add a V box container as a child of the margin container so just make sure you have the margin container selected so that you can properly set the child of it then we're going to type in V box container set like that and there it goes now what the V box container does is it simply arranges the control nodes into rows which you'll see but so in any case we've added it as a child of the margin container we're going to go to these size flags for this one we're going to set horizontal two we want to uncheck fill and we're going to use shrink Center and then for our custom constants the separation I just had mine set to 16 when I tested it you'll be able to see we can adjust this a little bit later but all this does is as you add different nodes in here right they start to line up in rows going from top to bottom this separation is just the amount of space that exists between the different rows that's all inside of this VBox container we're going to add a texture rect which just holds an image in this case we're going to use it to hold the image for the title of our game at our title sprite so over here inside a vivas container we're just gonna add in the different control nodes we're adding a texture rect there we go okay and then for the texture here and the same way that you would do do for a sprite we're just gonna add a texture and then we're gonna use this title dot PNG drop this in here we got this really classy title that I've made I'm sure you all out there can probably come up with something a little bit better than this but this is the best I've got so apologies if this doesn't mean anybody standard so title of our game is royal fireball now hope you all liked it now that we have our title in there we're going to add another V box container as a child of the previous of the previous vivant container we're gonna do this in order to keep things modular and to give us more flexibility in the event that we want to change our layout for any reason so we'll go back and select the V box container and then we're going to add a child we will add another VBox container okay so you're gonna see this more and more often as you work on the UI it's going to be a whole lot of nesting containers inside of containers instead of a V box container you might want to use something like there's an H box container as you would guess the Box vertical H box horizontal you can add this in just as easily and it would arrange things into columns instead of rows for this example we're not going to be using this H box container type but I'm sure you can imagine how that could be useful for different UI elements today we're gonna keep our title screen pretty pretty simple because that's all it needs to be so we've just got it like how you see here a couple of view box containers to start with to the V box container we're going to add a couple of buttons these are going to be texture buttons or at least that's what they're called so we just search for texture button up here and we're going to add two of these oops I accidentally added a button as a child of the button I want this to be a child of the V box container just drag it up there so we have texture button and texture button too now let's go ahead and select our first button and then look at what we can add to it right so under this texture section you can see all we can add a texture for all these different buttons States I guess you could call it here we have normal which is kind of like a neutral State we have pressed so what is your button gonna look like when it's pressed hover when you hover over it is it gonna change color or anything like that if you disable it like in Windows when something gets grayed out you might do that focused is you can kind of think of that like when something is selected I like if you use a keyboard arrows up and down and you know it makes a little square around it or something like that that would be focused or some that's selected now here you also have a click mask which is a feature that will let you specify the clickable area of your button right so if you've got a round button and you don't want a square area you want people to press it exactly on the circle you can create a click mask so that it only activates when you press within that circle today what we're going to be working with is the normal and focus States so for this I've prepared sprites for the normal and focus States and then we're gonna just put them in right here so for our first one this is going to be our start button so over here for the normal texture I have the start game button and then I have the for our focus texture we're gonna use a start game selected button or that start game selected PNG and I just realized that I forgot to Center this v bucks container so I'll go back in the Vivas container there are the size flags just like we did for the first one instead of feel just deselect that and we'll go shrink Center so we got our our buttons nicely in the middle there okay go back into our texture button so we added a focused and normal texture and then for a texture button - this is just going to be for exiting our game so we'll do the same thing for normal we have actually shoots can't drag it if I didn't open it there you go exit gets to regular normal exit selected gets dragged into the focused alright now we got our two buttons visually setup now that everything is in place there let's go ahead and code our buttons our code is just gonna go inside of the root node of the scene so inside this title screen here we'll just select it oops select it and then we will just add a script you can stay with all of the defaults and just go to create like always there's some junk in here that we don't need in here so let's just delete it why habit is to leave this funk ready because I don't know when I'll need it so I tend to leave it in there and then you can start off by we're always using our physics process here you can use a different process but I like to use a physics process and then there we go that's our initial setup for the code and this time we're actually going to use the function or the ready function this funky R so let's get rid of the pass and then we're gonna type this in so margin container under that we have a V box container under that we have a different view box container and actually you can you can go back into here and select these two but it's you see after it goes down so many levels you can't see which one you've got here what I'm looking for right now is the texture button here so let's go ahead and guess I think it's this one all right I was wrong okay it's two but we can just change it to text your button the texture button has a grab focus method which we're going to use here grab focus this will make our start game button in our menu right because our start game is what we assign to the first texture button this one that we called it right here so the start game button in our menu is going to be the one that is selected at the start of the scene with this our start game button in the menu will be the selected one at the start of the scene you'll be able to use the up and down arrows on your keyboard to move through your menu items and also use the space and/or enter keys to press a button now this stuff just works without you even having a write code for what the arrows or the space and Enter key suit also by default Godot will automatically make your buttons work with the mouse but before we use the mouse in here there's a little bit of code that we're gonna add to our scene here so that the mouse will properly give focus to a menu item when we hover over it for this we're gonna go under our physics process and remove this pass here and we're going to say if margin container and we're going to look for the first texture button let's see if we get it this time there we go so if this texture button dot is hovered is equal to true then this button this is kind of a long sequence here there we go then we want okay so if our texture button is hovered then we want our texture button to grab focus all right so basically when we hover over it now this is going to be the button that's selected okay and for the second button we're going to this do the same thing here so let's be a little bit lazy copy and paste make this checks or button - and then we're set for that now being lazy is a not always a good thing but sometimes for your coding it's a it's kind of like a virtue because if you're constantly typing stuff in there's always a chance for typos now we didn't check to make sure that our code works but if you have a working piece of code a lot of times you just want to copy and paste that way you don't have any possibility of typos right like you type something wrong and then you have to go back through your code and stare it down for a half an hour just to find out you missed a space or you forgot to capitalize a letter or something like that but in a but in any case we have this here for the grab focus so now if we go ahead and run our scene we should have something to look at oops and okay is telling us here that we didn't save it usually I save early forgot it today but let's just make sure it's saved we can save it as title screen save and then it'll run so we see we've got this little crown here that shows when it's focused or selected and right now you can't see but I'm using the up and down keys to go ahead and move that up and down and also if I hover over the button it becomes selected right and then along with that you can click it right but I won't click it or hit enter because right now we don't have anything coded for that right if we select it I'm clicking it right now if you can hear that the keyboard enter doesn't do anything right because we didn't code that yet so let's go ahead and do that now we're going to go ahead and use the buttons built in signals so that we can actually make our buttons do something so we'll just go to the first texture button here going to node it has the press signal so just like we've done in previous episodes go ahead and connect that we're going to connect it to the root of our scene make function is on that's great connect alright so on texture button press we're going to do something now this first texture button is the button for or it was our start game button so let's go ahead and make it take us to the stage one scene for that we're gonna do this here we're gonna say get tree change scene stage one dot T SC n great okay so the stage 1 t SC n let's see if we get all the way out here to the root of our resource tree that's just this file name here so if you named it something else just make sure that the names line up right the stage 1 scene is a scene that we can see here I bet this is our game scene that we've been using the whole time okay so we'll get back in here somehow get back into my code here alright and then we're gonna want to do our code for the second texture button so select that texture button and just the same they add that in there okay so this was our exit game or just an exit so we're just gonna make this quit out of the entire program to do that it's pretty simple get tree quit pretty easy now let's run our scene to see if everything works okay if we just use our mouse here we can go to start game and it kicks us into our game looks pretty good we don't have any way to get out of our game right now so let's just reload the scene and then if we want to we can go to exit click exit exits out of our game we'll run the scene again if you can hear I'm just using the keyboard to go and make the selections so if I hit the enter key or space key I can start the game and just the same and our key or space key I can exit right looks pretty good our start game in exit buttons work just as they should but now that our title screen is functioning let's go ahead and make it the default scene when we run our game up until now we've been using this placing we'll just which will just play the current scene that you have selected but because this scene should come before a title scene or our game scene maybe we want to go ahead and make this the default that runs right if we run this game right now with the play button we're going to get the game alright so let's change that so that we get the title screen so for that we're gonna go into project settings let's see where was it again okay there we go right so in the general tab application run you have this main scene right it's currently it's set to stage 1 scene so we can just go ahead and set that to the title screen nice this is title screen we'll just close out of that now no matter which scene we're in like let's just say we're sitting on this scene we can hit this play button and we're gonna get our title screen instead for the default scene right if we've if we're sitting on a title screen we get to hit the play button it's always gonna take us to the title screen first and looks pretty good I think it looks pretty good I don't know about this royal fireball thing if you guys like that or not but once again I'm sure you guys can come up with something way better than what I got here but everything works so I think that's pretty good at this point since our game is still a work in progress maybe you might not want to have to click on start game every single time when you're testing portions like you know the gameplay portion of your game now if that's the case you can feel free to just get out of here and go back into the project settings and go ahead and change your scene or your main scene back to the stage one scene if you want or whatever scene you want so that you can hit this play button and then just go back into there that way you don't have to keep selecting start game when you already know that your title screen works today we gave our game the ever-important title screen and menu the title screen usually doesn't do or involve much but really that's all it needs to be so we did that and we're also able to learn the basics of changing scenes which we'll be using more as our game progresses that's gonna be it for today ladies and gentlemen I'd like to thank you all for watching and I hope you found this helpful if you liked today's video please give it a like and hit the subscribe button I really appreciate it the project folder for today's episode and all other episodes in the series are available for download on my patreon page so if you're having a tough time you can head on over there simply download the zip file extract the project folder and you'll have exactly what you've seen in this video today so if you want to check that out and also support the channel the link is in the description and with that we will call it a day so thanks again to everybody for watching and I'll see you in the next one real soon take it easy

Channel: UmaiPixel

Views: 29,531

Keywords: Godot, pixel art, platformer, game engine, game development, indie

Id: Mzy76UCp7wQ

Length: 22min 53sec (1373 seconds)

Published: Fri Oct 05 2018