How to Make a Pause Game Menu & Pause the Game ~ Godot 4 Tutorial

hello everybody Chris here and in this video I want to show all of you how to set up a pause menu inside of godot4 so in this video we'll be able to hit the Escape key in order to open up our pause menu Escape can also resume the game and then there'll be buttons in the menu for resuming the game and exiting the game to the desktop as well so first off in Godot when it comes to pausing your game I want to talk a little bit about your node structure first so let's just go ahead and start by creating a brand new scene and a project so I'm going to go to new scene and let's make the root node other node and just choose node so with this base node I'm going to call it game as in the main node for when the gameplay is running during the game we want this to just be its own separate thing so we'll have a level node under this we can create that by right click ADD child node and let's create this node 2D and I'm going to rename this to be level so this level node can be saved as its own separate scene so I'll right click and let's save a branch as a scene let's create a new folder in the project for levels I'll create this in here and let's just call this level one also rename it to be level one jump into the scene and rename it level one it's here just to be kind of clear that this is a specific level so the reason why we would want the root node of our game and the levels separated is because each node can set up how it's going to handle pausing specifically so for a level you may want to pause the entire level and the way you would do that is first let's jump into the level scene that we saved open in editor and here we can set the defaults for our level let's go to process in the inspector and there'll be a mode here so process mode allows you to set how a node and nodes under it should basically react to the game being paused so the default is inherit which means you just take whatever the parents is and you apply that to the child node but you can also select another option like plausible or always so if it's possible then that means that it's going to be paused when the game starts to pause and always is going to mean that it's always running when paused means that it will only run when the game is actually paused so the opposite if possible so for a level node we would probably want that to be possible so let's select possible here I'll hit Ctrl s to save our level scene and let's go back to our main scene where we're setting up the defaults for our game also go ahead and save this as its own scene as well so hit Ctrl s let's go up to the root of the project and we could just call this game.tscn I think that's fine for now so with the root note for game I'm going to select that go to process and I'm going to change this to always so the reason we might want our main game node to always run is that there might be things happening behind the scene in our game that we want to run even when the game is paused for instance maybe our main game script needs to handle some data in the background it might need the process function to be running no matter what state the game is in so by having your node structure set up like this we can have nodes that are going to be paused when we pause the game and then we can have other nodes that won't so for instance we could create our pause menu under the game node so I'm going to right click add a child node and let's look for canvas here so canvas layer for when you want to draw stuff on the screen and you want it to keep its position you want to parent it to a canvas layer so let's create our canvas layer here and now we can right click on that add a child node let's get a control so a base control node for UI elements and I'll rename that to be pause menu so let's right click on this Save branch as seen go to the root of our project create a new folder and I'll call this one UI and let's save pause menu.tscn inside of here in case we need it other places in our game as well so for our pause menu scene we might want to jump into the editor take the process and set it to when paused now if it's inheriting always I don't think that would cause a problem for this tutorial but this might be the better option just to make sure that the pause menu doesn't do anything unless the game is paused which would make sense for a pause menu so taking a look at our game scene you can see that the pause menu is disabled until the game is paused now okay now let's go back into the pause menu and let's actually set it up so let's right click on the pause menu add a child node and let's look for panel so the panel can contain a background that you can put everything else on like buttons and stuff so I'll create that as the next node and you can see we get this decent gray background now let's right click on panel add a child node and let's look for a container so there's many different types of containers in Godot but a simple one that will work for our solution here would be a v box container organizing things from top to bottom kind of like a list so let's use vbox container as our next node and under vbox container let's add a menu title so I'm going to do that by right clicking adding a child node and let's look for a label just type that in search so the label node create here and we can give some text so I might say something like equal pause equal so with the default font it's going to look kind of blurry when it's that zoomed in so we might need to zoom out a bit and expand our menu so let's start by taking the pause menu and I'm going to make this just the size of the full screen so to set that up click on pause menu and let's go to layout and then anchors preset and change this to full rect this will basically mean that our pause menu will take up the full size of the screen but that's just the control for what actually gets displayed so next let's go to panel go in the inspector layout mode change this to Anchors and let's change the anchors preset to Center so now our menu is going to show at the center of the screen and we can make it bigger now so let's take one of these corners and just stretch it out kind of like that basically however big you think the menu should be should be good here we can always mess with it later okay now I'm just going to take this box and Center it around the anchor roughly right around there that should be okay for right now so now let's add a couple buttons to our menu I'm going to right click on vbox container ADD child and let's get a button so we just want a standard button here let's create that okay we'll see a button pop up here let's add some placeholder text here so we might have a save button for instance let's duplicate the button a few times in our hierarchy you can select it and hit Ctrl d so let's do that three times now rename this second button to be load button the first one I'll rename that save button the third one let's rename that let's just say resume button like resume game and button four will have exit button and we need to change the text on each of them so load button will just make the text load the next button will make that resume the next button will rename that to be exit Okay so if you want these menu items to be centered let's go to vbox container and make sure that this stretches to the full size of the panel so with the box container let's go to layout layout position anchors and do your anchor preset to full vect okay now all of these menu items are going to basically stretch automatically okay so we have a basic menu that we can try to get to show up in our game so let's go back to the game node and we'll need to add a script to game in order to pause the game so let's take our game node and create a new script so I'll click on inspector script new script and we could just call it game.gd or maybe game manager.gd whatever makes sense for you I will just use the default for now so game.gd let's remove the boilerplate text so what we're going to want to do is to have our game node listen to when the game is trying to be paused so for that we go to project project settings and we look at our input map show built-in actions and then you can see the default key Bindings that a player of a Godot game would be able to press for a certain action to be triggered so we'll use UI cancel to pause and unpause the game you can also create your own custom actions and you can assign custom key bindings if you want but this will work just fine for a standard so Escape key what's going to trigger UI cancel so we want to listen for that in ourgame.gd script so let's go in here so because this is a node it is going to receive input so we can use function underscore input which is going to give us an event and we can use that event which is actually going to be of type input event the field typing's aren't automatic there but this is a input event but when you add in the colon and the type it'll give you recommendations for what you can do with that parameter so if we do if event Dot and you'll see all of the functions associated with it pop up now is action crashed and we're looking for the action name UI cancel so here's all the list of default actions that you can use so UI cancel then what we're going to want to do is toggle the game either paused or unpaused so in order to pause the game first you want to get the root tree that's running in our godo game so get tree and then you tell the tree to pause the game with the paused property so gitree dot paused equals in in this case we want the opposite of whatever the current value is so we want to set that to the opposite of whatever it is currently so let's actually first um get that value so of our current value equals and that's a type Boolean of course and that's going to be equal to get tree dot post so if we know the current value we can reverse that so exclamation point for the opposite or you could do not which is going to be the same thing the opposite of whatever it's Boolean values so not current value and that's what we're going to set paused to so now let's go to 2D view let's hit play we need to select a default scene to run so let's select uh yeah just select current and we'll come in here but we can still see the pause menu so in order to make the pause menu hide and show depending on whether the games paused or not uh we'll need to do a little bit more scripting so in pause menu let's add a script to the pause menu so script new script in the bottom right let's create that pause menu script and when the script is ready the first thing we're going to want to do is to hide the menu so you can use hide on a control node which will hide itself in any children so so let's save that hit play and test it okay so now we don't see the pause menu pop-up before we continue further let's add in a object to our level scene so that we can see it pause when we hit the escape button so I'm going to drag this bathtub which I already set up into the level is I'm going to open up the level scene in the editor and inside of here I'm going to add this bathtub scene so just dragging that into there and then on the level scene as well it's also out of camera so add child node camera 2D add that in hit save and let's hit play and test and make sure that's there okay so we can see the scene is a little small so I'm going to need to change my window settings so project settings let's go to General window and I'll make this let's say 1280 720 but I'll take the scale and I'll set that to four so these are settings I kind of often use for these kind of pixel art things so let's hit close hit Play One More Time okay and now when we hit play we'll see the animation playing now because this bathtub is under the level scene if I hit Escape now then you're going to see the animation pauses because the bathtub inherits from the level which is a possible node and also if I hit escape again then you'll see the game resumes and the animations continue so Escape pause Escape unpause okay now we just need when the game is actually paused for the pause menu to also open up so there's different ways we could do that one would be to use a signal from our main game script so if I open up the game script so let's add in here signal toggle game paused which is going to pass as a parameter to anything responding to the signal or say a Boolean is paused so I'll type Boolean and then whenever we pause the game we want to emit that signal so we could just put it down here and that would probably work okay but a slightly better way might be to have a Boolean variable with a Setter where whenever we set the paused on the game script we emit that signal rather than just having it be down here in the input event so let's create up here another variable so I will call this variable game paused which is going to be of type Boolean and then we'll default this to false and then we need another colon at the end when we're adding getter and set of functions so the git is going to return game paused and the setter which is going to pass in a value all cider functions are going to have a value to set that value to the variable then we're going to set game paused equal to that value of course and then we're going to want to emit the signal so emit signal as a function all nodes can do and we are emitting that signal up there at the top so toggle game paused and then we need to pass in the parameter so the parameter is going to be uh the new game paused value so now what we can do for our current value is basically we'll just be using whatever our game paused is so we can get rid of this line so now what we'll do down here instead is say game paused is equal to the opposite of game paused and we can even take this the get tree dot paused and we'll take that up here to right above where we emit the signal paste that in so now whenever we set game paused on the the script it's going to set the pause value on the tree and it's also going to emit this signal so we don't want current value here but we actually want game paused so replace current value with game paused and all the errors should basically go away here so now to connect this signal to the pause menu there's a few different ways you can do it but just in case we create other scenes that have a different pause menu or a different version of the game script what we'll do is we'll set the link up in the inspector and then connect to the signal inside of the script so to do that let's add in a class name at the top and I'm going to actually call this a game game manager uh to be a little bit more specific and uh then to go along with that let's rename the script the scene and the node to be a game manager as well so game manager let's rename game.gd to be game underscore manager.gd and then for the game.tsc and we can just leave that the same there because I think that still makes sense this is what we're booting up to actually run our game so uh with this class name we can easily reference a game manager script inside of our pause menu now so jump into the script for pause menu and let's add in a at export bar here for a game manager and this is going to be of type game manager we can do this because we created the class name hit control s and now if you click on the pause menu and I'm doing this inside of our game scene not in the pause menu scene because the game manager only exists in our game scene so we want to assign the game manager to the pause menu so in the inspector click assign select the game manager node hit OK and now our pause menu has a reference to the game manager script so all we need to do is on ready after hiding the menu we can also take the game manager and connect its signal so game manager dot connect in quotations we want toggle game paused so quotations and then you can select toggle game paused and we're going to connect that to our callback function which is going to be something like no quotations on game manager toggle game paused and let's also add an underscore to the function name as standard for a signal callback so we have this function name now we need to create the function so I'm going to copy this name let's go down here to the bottom function control V to paste it in and then we have the is paused parameter so we need to respond to that and remember that's of type Boolean so if the game is paused we want to show the menu otherwise we want to hide the menu so if is paused then we show otherwise if paused is false so we're going to hide okay so as long as we have in the inspector our game manager assigned the signal should connect and then when the game's running and then when the game manager toggles the game paused this means you should respond to it so let's go ahead Run the game hit play we see the animation if we hit escape the menu pops up the animation's still going we'll fix that in a second if I hit escape again the menu hides so at least the menu is opening and hiding properly so let's check game manager where we have get tree dot paused yeah so we no longer need the reverse of game paused because when we set the value we're already changing the paused value so just get rid of the exclamation point now and now let's go hit play again our animation's playing when we hit escape the animation pauses the menu opens up if we hit Escape then the menu hides so now we just need to set up some functions for these buttons so we could create an individual script for each button or we can create a signal callback that will go straight to the pause menu and have the pause menu script manage it and since these buttons are always going to exist solely on the pause menu I think that that's a fine way of doing it rather than setting things up in code so let's select the resume button and I'm going back to 2D view for this let's go to node and when you have the button selected you'll see base button signals here so we can do pressed in order to add a callback function to the pause menu so on resume button pressed we do something inside of the pause menu so connect it to the pause menu and then now when the resume button gets pressed we can do something here since we're already connected to the game manager we can easily do something like game manager Dot Game paused and we'll set that equal to false because when we resume the game the game is no longer paused so that well literally all we need to be able to do for that resume button to work okay so let's hit play and test that resume button out so we hit escape to pause the game and I'll hit the resume button to resume the game and I can escape to pause it again and resume to unpause it okay cool so that's that part done for the exit button uh let's add another signal as well and this will be to exit the game entirely so exit button pressed connect the signal to the pause menu okay so when the exit button is pressed we want to get the current scene tree you could kind of think of that as just everything that's running inside of the game right now and we want to call Dot quit on the scene tree so we quit the scene tree quoting out of everything inside of the game the application will close so that's literally all we need to do to exit the game so let's hit play let's hit Escape I'll do resume again just to test if that's still working escape again and let's click exit and the game exits now although this technically works you later might actually consider adding in an extra pop-up here saying like oh are you really sure you want to exit the game unsaved data will be lost or something like that but just to get the basic menu down this will be okay for right now now we can see that because I scaled up the game the menu is now really big as well so we might want to go into the menu and Shrink its size down so let's take click the panel shrink it down I'll hit W to go to move mode and let's move it kind of into the center there a little bit I hit play and test if the menu is still too big it kind of is so since our menu is still kind of big what we can do is to create a theme that will shrink the size of the text so let's take the label and go to the inspector theme down here create a new theme and I'm going to also click on the drop down and save this in our project so let's call this gametheme.tres and I'll save it in the UI folder so let's save that there and then we can click on our theme and we can change some settings about it so obvious setting would be to change the default font size which we can do over here so I'll change default font size let's try making it eight okay and then you see that that applies to this label up here at the top so let's also add the same theme to The Other save buttons so I'm going to select all these save buttons go down to the Theme tab and let's make make sure that those are using the same theme so let's drag game theme into here okay and now all of the text should be smaller as you can see with the default font it doesn't do so well with these low sizes so you might want to consider something like a pixel art font for this kind of game so let's hit play and see if that works at all Escape okay our menu is definitely way smaller now it has been scaled back up since our window settings scale at times four so it doesn't look bad here so let's just uh change a couple other settings here I'll go to this menu and let's scale it so with this menu let's use the select mode Q click on the panel and let's bring the bottom of the panel up and let's also re-center all of this by hitting W to go to move mode and pull it down here when we're in select mode we can see where that center anchor is it's just kind of approximating it for right now and we can hit play again hit escape and our menu pops up there in a more reasonable size so our save and load buttons of course do nothing right now we haven't added in that function to the game maybe in a later tutorial but our Zoom buttons the pause function and the exit Game button are working good so that is the basics of how you can set up a pause menu inside of your Godot game and get pausing to work where your game level will be paused but you can keep other things running like your main game script at the same time so that's gonna be it for this tutorial I've been Chris if you want to find the scripts for all of this it'll be down in the description on my patreon thanks for watching to the end and I will see all of you in my future game development content

Channel: Chris' Tutorials

Views: 28,228

Keywords: pause menu, simple pause menu, godot, godot engine, godot tutorial, menu godot, godot game engine, gamedev, game development, godot ui tutorial, godot ui, godot menu, godot 4, devlog, godot menu tutorial, godot 2d, gdscript, pause game godot, godot tutorial for beginners, game dev, godot pause, godot pause game, godot tutorial 2d, godot 4 gamedev, godot 4 tutorial, godot 4.0, godot devlog, how to use godot, chris tutorials, chris tutorials godot, godot 2023, 2023

Id: OWtwYp2lIlQ

Length: 23min 6sec (1386 seconds)

Published: Sat Apr 22 2023