How To Create A Pause Menu | New And Improved - Unreal Engine 4 Tutorial

hey guys and welcome back to another engine 4 tutorial in today's video we're going to be making a pause menu so i have already done one like this however this one is going to be a bit more advanced it's going to look a bit better have some more options within it and also work a little bit more efficiently and better as well so the reason i'm doing this is because recently i've had a few people ask questions about the pause menu and there's nothing wrong with it but i just realized that i can make it a lot better and i have done with them so i may as well make a video about it as well so let me show you what we're gonna be making today so you see we can walk around like normal this is our game we press our button to pause the game you see the game is paused in the background because we were jumping we're no longer falling we have a blur it says pause at the top you can write whatever you want for example the name of your game if we press resume we're going to resume we pause it again we press options it's going to take us to an options menu which i've set up in a previous video which you can watch as well however what's going to do is we're going to press back and go to the pause menu because what other people were experiencing was that would take them back to the main menu so we've just edited it a little bit so it takes you either to the main menu if you from the main menu or we came from the pause menu and take it back to the pause menu and if we press quit we can now either quit to main menu i start again pause or we can quit to the desktop like so which will just close the game and if we keep pressing quit it will open and close this like so so this is what we can be making today so let me delete this code and i'll show you how i've done it so our first step is we want to actually create this widget for our pause menu so to do that we're going to go in our folder that we want so i've just made a folder called pause menu we're going to right click go to user interface i'm going to add a widget blueprint i'm just going to name this one pause menu widget like so and open that up straight away in here we're going to spend a bit of time making it look quite good and then add the coding in afterwards so what i'm going to do first is i'm going to add in a background blur so you don't need this you can add an image if you want but i'm going to add in a background blur position x as zero y is zero size x 1920 and size white is 1080 so it takes up the whole screen and also anchor it to the whole screen as well so it doesn't move about i'm going to set the blur strength to be five you can set this to whatever you like but i found five to be quite a good value and then we don't need to do anything else so what i'm going to do is i'm just going to press the padlock there on background blur in the canvas panel in the hierarchy so i can't move it like this so if i dragging i can't move it which is helpful later on because otherwise you might accidentally start moving it we want to edit something else next i'm going to add a title and get some text drag it onto canvas panel in the hierarchy there this i'm just going to rename to title it's always good practice to name everything so that you always know exactly what it is without having to go double check it for example when we're in the graph coding it i'm going to take sliced content there i'm just going to add in the text paused obviously you can put the name of your game anything like that i'll put this paused i'll set the font size to be 100 and i'll make it bold italic like so just to make it look a bit better i'm going to move this into the middle of the screen and i'll anchor it to the top middle as well and use this anchor as a guide for finding it the exact middle there so i think that's a good place for me to write paused with the name of my game then what i want to do is i want to search in a palette for a vertical box i'm going to drag that onto the canvas panel again there that one i'll leave the name as vertical box as we're only going to have one and this is to keep all the buttons together making it a lot easier to keep everything together keep it all lined up and good stuff like that so i'm just going to move this into the middle of my screen where i want it and i'm going to use the sizes which i found earlier for it and the positions as well so for me the middle of my screen with these buttons was -244 on the x i should anchor it first so let me anchor it to the middle of the screen and then do minus 244 and minus 172 on the y that's up there i'm going to size it up to be 490 on the x and 345 on the y so i get this nice square here in the middle of my screen now you don't need to do that if you don't want you can set it up to be however you want whatever size what position however this is where i want it to be so you can just move it size it anchor it all that good stuff and we don't need to do anything else with the vertical box now we're going to add our buttons into it so we can drag a button from the palette on top of the vertical box and hierarchy there and you can see it's added in you can select it and then we have a button in there so let's add all three so i want a resume button which is there i had another one for my options added another one for quit you can add as many buttons as you want but i only want three i'm going to do is the top button i'm going to rename to resume button there change the padding to five just so there's a bit of space between them so it looks quite nice and change the size to fill you see that's gonna fill the whole vertical box we have once we add the other three it will evenly spread them out so we'll do that in a second you can also change the style all of that so you can put images for the buttons you change it for normal for when you're hovering over it and when you press it i'm not going to worry too much with that the hovid i might just make it a little bit more obvious so make it a bit more gray and they pressed i'll make a bit more black again it's not necessary i'm just showing you that you can do it and i'm probably only going to do it for that one button as well however no actually we'll delete the other two buttons and we'll set everything up with this resume button and then duplicate it so i want the normal to be white hover to be a bit more gray and press to be black and the padding to be five and we want it to fill obviously you can again customize this to whatever you like here you can also see you can have sounds so when we press it let's have a camera shutter sound effect when we hover it let's have a compile focus on effect obviously you won't want to use those these are just again examples that i'm showing you to show that this is how we would do it this is how it would work so once you customize that and you're happy with how it is what i'm going to do is i'm going to drag and drop a text onto that button and the vertical box here this text i'm going to rename to resume text these ones don't matter too much if you don't name them however i'm just going to do it anyway and in the text i'm going to change this to just say resume and i'll up the size to 30 and change the color to be black like so obviously i have the color to be black and when i press the button it'll be black as well so that will disappear so you can change the colors if you want but again i'm just going for a simple one just to show you how it works and i'll leave everything else the same what i'm going to do is i'm going to select the button in the vertical box here ctrl c on that select the vertical box and hit ctrl v and you see we have another button directly underneath it with all the exact same variables inside of it what i'm going to do is just rename this to the options button and then change the text as well to also be options because that's what this button is for me and i'll do it one final time and go to the vertical box control v and then we have our third button in there like so which for me i want to be quit so i'm going to change those accordingly and now we have our resume options and quick buttons there powerfully and evenly spaced out so again we have a vertical box you can just move this about like so and we'll keep all the buttons together like that now to add in the other quick button so you saw i had a quit quit to main menu and quit the desktop to do the final two we're going to add a horizontal box to edit the vertical box now we want a horizontal box again just adding that onto the canvas panel there and i will rename this one to be quit box like so in here i want to do the same thing i want to add some buttons so i will do the same variables i did last time so i'll just duplicate those buttons again so i have that button already in my clipboard console control v on the quickbooks control v again so now we have those two buttons in there and you can see that hasn't worked perfectly because i haven't sliced this up yet so we're going to do that now and also actually i might change the padding on these to be 10 instead of 5. i think that might just look a bit better again not necessary to do i just think that will look a little bit nicer like so so i'll do the same on these ones change them to 10. so now let's fix how the horizontal box looks by which i mean let's just scale it up so for this i'm going to anchor it again to be the middle position y i'm going to put as minus 488 position x that is sorry position y now is 192 size x i'm gonna have is 980 and i've got 980 because that's double the size of this vertical box so whatever the size x is for your vertical box i'd recommend doubling that for the size x at your horizontal box and size y i'm going to have 105 because that's then the same as this button here that's now i have that working like so so when i press quit we're going to get these buttons here let's obviously rename them to be desktop i want here i'll change the text to also be to desktop or quit to desktop and this one will be main menu so you can see we very easily just made one button and use that to create all of the buttons that we need here and set them up to be perfect now i was obviously using values which i found earlier the way i found them was just by simply moving around scaling up and all that good stuff so you can do that very easily yourself as well use the values which i found today and if we reselect our quick box here or a horizontal box what to make sure we do is change its visibility to hidden so by default we don't see this because obviously we only want to see it when we press quit we want to toggle on and off its visibility so by default we'll have is hidden and we also want to make sure we tick is variable up in the top as well so we can toggle on and off its visibility through the blueprints in the code in a second so i'd say that's the visuals of it set up so i've got a very basic pause menu visual setup here so i've got the title resume options and quick buttons and then also my two desktop and two main menu quit as well as well as this background blur here again you can customize this to make it look however you like but i'm just showing the basic visual side and i'm going to go into the coding site as well and the coding and functionality is going to be more in depth than this so to do that we're going to go to the graph over here and delete these three events that we have let's just compile so what we're going to do is we're going to start off with the resume button first if you can see i haven't actually renamed some of these so this is why it's good to name them because otherwise this would be button one button two button three and you wouldn't know what's what so that's a good example there of why we name everything so let's go back to the designer and change the name of those so we have resume button there that should be to main menu so that's y to main menu button and then where's the other resume that might have been it so we go back to the graph yeah that was it so now we've got resume to my menu quit options desktop all the ones we need so let's do the resume first so let's select the resume button and press the plus next to the unclicked event so we have unclicked resume button here out of this we're going to get remove from parent so it's going to take this pause widget off of our screen then we're going to set game paused and we're going to leave it unticked so the game is no longer paused i'm going to right click and get the player controller as obviously when the game is paused our controller and our mouse it's going to act differently so we want to set it back to how it should act in the game so we're going to come out the return value and set input mode game only like so plug that in there come out the get player controller again and set show mouse cursor leaving it as false and we're going to set some of this other stuff up in the character blueprint in a minute when we actually put the widget on screen so when we pause the game so that might make more sense then however what we need to do is set it so we only use the game input and we no longer have to mouse cursor on screen as we will do in the pause menu and that is how we go back to the game from the pause menu that's how we resume so let's select all that history to comment it and name it resume button or resume game anything like that i'll move that up there then let's do the quit so what i'm going to do is i'm going to select the quit button again on clicked event and out of this what i'm going to do is get a flip-flop and i'm going to get a reference to our quick box there so that's the horizontal box that we have for quit out of this we're going to set visibility plugging that into a and then we will also duplicate it to get another set visibility plug the target back into the quick box and this one into b off of a we want it to be visible off of b we want it to be hidden so now when we press the quit button it's going to toggle on and off the visibility of this quick box here that's what flip flop does it toggles between the values of a and b so we can select this here's c to comment it and call this open slash close quick box like so so now we can set up the actual quitting functionality so underneath this i'll do the two main menu first so i'll select the main menu button press on clicked event and out of this i'm going to simply open level now the reason i'm opening a level is because how i set up my main menus is i have them in a different level and that's because it's way more efficient and it's just a lot easier to do as well so in the level name you want to make sure you spell the level exactly the same way so i named mine main menu level like that and i will open the main menu if you don't have it in a different level a i'd recommend you would but if you don't and you don't want to then what you can do is just get a remove from parent and then create widget for your main menu and add that to viewport so you get remove from parent create widget with your main menu in there and then add to viewport and that will take you to your main menu instead however again i'd recommend the open level it works a lot better however i've shown you both ways now and we'll comment that again just return to main menu and then quit in the game is just as simple so we'll get the desktop button so quick to desktop on clicked this one again is just one simple node we come out and we get quick game very simple like that that's all we need to do just quit leave everything as default again i'm going to comment this just quit to desktop or exit game anything like that so the quitting is actually very simple to do now let's do the options menu which is also quite simple what we're going to do is we're going to get the options button here press the unclicked event once again out of this we're going to get an is valid node with the question mark next to it like that we'll do the input object in a second is not valid we're going to create widget with the class as our options menu widget there now obviously if you don't have one set up yet you don't need to do this part yet but it's always good to have one set up as well so that way the player can change the options both in game and in the main menu it's just a bit of ease of life for the player at the return value we're going to right click promote to variable and name this options menu reference like so and now we're going to get that reference and plug that to the input object of the is valid there so when we press the options button if we don't have the widget already created we're going to create it and then we'll add to viewport like so and that adds viewport will also go into the is valid there so if we don't have it created we'll make it add it to the viewport and if we do have it made then we'll just go straight to adding it to viewport so that will work great and the reason we're doing it is valid is just because it's more efficient than always creating the options menu each time we're only going to make it when we need to so i would compile and save and that is the pause menu set up so again i'll comment this and open options menu so this is it set up again so what we've got is we've got the visual side here this is what it's going to look like in game and this is how it's going to run so we can resume open close the quick box return to the main menu or the desktop and open our options menu like same compile save and we can close that since we are finished with it what we want to do next is we want to set up actually pausing the game and opening this menu so i'm going to be doing that in the character blueprint so i'm going to go to content third person vp blueprints third person character if you used to be third first what if you've named it in here we're going to scroll down and find some empty space and we're going to get an action mapping so for that i'm going to go to edit project settings and once it's loaded we're going to go down to input on the left down here i'm going to add an action mapping so i'm hitting your plus action mapping there and i'm going to name this one pause game now you can set these keys to be whatever you like so i'm going to get both the escape key and the p key because obviously you can't press escape unless you're in a standalone game or if you've packaged the game so i'm going to set it to escape and pee and the benefit of action mappings is as you can see we can have multiple keys we can set up keys for different consoles so an xbox or playstation pc mobile anything like that and we can also set up key bindings once you've done that we're going to close that right click and now we should be able to call that action event so i named mine pause game so we have action events pause game there out of the press of this i'm going to again get that is valid node with the question mark next to it i'm going to do the same thing is not valid it's going to create a widget with your class as our pause menu widget there the return value of this we're going to right click promote a variable and name this one pause menu reference like so again plugging this one into the input objective is valid so we're only going to create this widget if we need to then out of is valid we're going to get a branch so you can hold that b left click to get a branch plugging that also into the set pause menu widget there so again we're only making it when we need to however we're going to use it both times the condition of this branch what we can do is we can right click and get is game paused plugging into the condition there so depending on if the game is paused we're going to either add or remove the pause menu so if the game is paused and we press escape or your pause menu it's going to go back to the game if we're not paused and you press it then it'll open it up so you can either press resume in the pause menu or your escape button again so off of true if it is paused we want to take it off screen so we're going to get a reference to our pause menu reference there so get that and remove from parents plugging that into the true there then we're going to come at this set game paused and we're going to set this to false so we're on pausing the game and then we're going to right click get player controller this is very similar to how we did the resuming in the widget as well in fact it's pretty much the same we're going to come out the return value i'm going to set show mouse cursor i'm going to set it to false so again we don't have the mouse cursor in game and then out of the player controller we're going to set input mode game only so again the exact same way we did it in the widget now let's set up pause in the game so if the game is paused and we press that we're going to unpause it now we want to pause it so we're going to come out this pause menu reference we have there and this time add to viewport so we're adding the menu to our screen plugging that into false there and then we're going to come up this and set game paused once again this time ticking it so the game is paused and we're going to come out the get player controller and set show mouse cursor once again this time again ticking it to be true so we do have our mouse cursor when we're in the pause menu so we can use all the buttons and now to get player controller again we're going to set input mode this time setting it to game and ui and so we're doing that so we can then use the buttons in the widget and we can still also use this escape key that we have here for our pause game which reminds me we need to select this and tick execute when paused so we can still use this when the game is paused to unpause it now if we go back over to our set input mode gaming ui what we're going to do is this in widget to focus we're going to put into our pause menu reference there so it then focuses on our pause menu which means we don't have to click into it for it to activate and to focus on it it will just focus automatically i'm going to change in mouse lock mode to lock in full screen you can set this to whatever you like you can have it's do not lock whichever one is just what you prefer but i want it to be locked in full screen i'm going to untick hide cursor during capture because we want the cursor to be shown and so on that will pause the game so what we can do is we can select all this hit c to comment it and have pause slash unpause game like so which again i'll run you through it we press our pause button it's going to either create and use or just use our pause menu and when it uses it it's either going to take off the screen and unpause the game or put it on the screen and pause game depending on if we are paused or not already so i know there's a quick summary but i already went through it as i was making it so i'm going to compile and save and that is it basically all set up however i want to add in the options menu as well so what i'm going to do is i'm going to close this and open up my options menu so now again if you don't have this made i do have a video on creating one so you can go watch that but i'm going to set this part up now as well so for that i'm going to go to content my main menu i'm just going to open up my options menu widget here now if i go to the event graph you can see this is how we go back so ordinarily if we press back it's just going to go to the main menu which obviously we don't want that to happen all the time we only want that to happen if we're in the main menu so a quick way of doing this is to move the create menu widget out and the outer viewport just move them out like so and before that i'm going to hold down b left click to get a branch the false will go into the create widgets and i'll move that down and true we don't want to do anything the condition of this is just gonna again be is game paused so if we press back while the game is paused that means we want to go back to our pause menu so we don't need to do anything because we've removed this from the parent already if the game isn't paused then that means we're in the main menu so we'll go back to the main menu like so now we compile save and close this and this should be working perfectly for us so let's hit play to test it and you can see we're walking around our game if i hit p it's gonna pause we're no longer falling the game's paused we've got the background blur there we have our title and our different buttons you can see if i hover over resume we've got the audio effect there which is compile failed so obviously you want to change it and the button grays out a little bit as well same with options and quit so i might remove that audio in a second as well however i'll show you this working so we can press resume the game's gone in and again we got that audio for when we clicked it i pause it quit it shows these and quit to desktop which will do that or we can go in quit quit domain menu which will take us to the main menu now here if i go to options and back it will keep us in the main menu if i press start pause options back it takes us to the main menu if i press p again in here to pause it's going to unpause it so this works perfectly so i think that'll be for this video we've done everything we want to do we've set up a pause menu which works perfectly so we can pause and unpause with a button we can press resume to on pause again or we can go to our options back into our pause menu quit to open up multiple options here for desktop and main menu which also work perfectly we've also managed to add in a really annoying sound effect alongside it as well and obviously the main menu takes you there as well so thanks so much for watching i hope you enjoyed and i hope you found it helpful and if you did make sure to like subscribe down below so thanks so much for watching and i'll see in the next one [Music] you

Channel: Matt Aspland

Views: 24,122

Keywords: ue4, unreal engine 4, unreal engine, tutorial, ue4 tutorial, unreal engine 4 tutorial, how to make a game, how to, 3d modelling, blender, unity, games design, graphic designer, ue5, unreal engine 5, pause, menu, main, main menu, pause menu, ue4 pause menu, how to pause, game, pause game, click, focus, set, input, mode, options, return, back, go, to, the, resume, settings, desktop, quit, quitting, to main menu, to desktop, escape, toggle, paused, when, in game, in-game, new, improved, updated, second, menu 2

Id: Bck480UHKq8

Length: 22min 49sec (1369 seconds)

Published: Mon Feb 15 2021