Creating a Pause Menu

In this how to, you will learn how to create and script a pause menu for your game.

If you started with the UMG UI Quick Start Guide and the Creating a Main Menu how to, you can use the same project for this how to.

Creating an In-Game Pause Menu

In this section we will create the visual layout of our basic Pause Menu.

1. Open your Pause Menu Widget Blueprint.

2. On the Designer tab, drag and drop widgets from the Palette onto the Hierarchy to achieve the setup below.

   

   Here we have a Border that contains a Vertical Box with Text and two Buttons each with Text on our Canvas Panel.

3. In the Designer window, resize the Border so that it fills the entire dotted window (filling the screen).

   

   You can also change the color from the Brush Color option inside the Details panel.

   

   You may also want to set the Alpha for your color to 0.5 to give it some translucency. When the Pause Menu is opened during gameplay, the Border will fill the screen but adding some translucency will allow the game to still be visible in the background.

4. Also for the Border in the Details panel, be sure to use the fill screen Anchor.

   

   This will ensure that the Border fills the screen regardless of screen size.

5. Select the Vertical Box in the Hierarchy then in the Details panel, center it both horizontally and vertically.

   

6. Select the Text under the Vertical Box then in the Details panel for Content, enter Pause Menu.

   

7. Enter Resume and Quit for the other two Text blocks.

   

8. Hold Ctrl and select both Buttons in the Hierarchy, then in the Details panel under Style, assign a color for Hovered.

   

9. Rename the Buttons to Resume and Quit respectively inside the Details panel.

   

Scripting the Pause Menu Functionality

With the visuals set, next we will provide the scripted functionality for our Pause Menu.

1. Click the Graph button in the upper-right corner of the Widget Blueprint Editor window.

2. On the Graph tab in the My Blueprint window, click the QuitButton then in the Details panel add an OnClicked Event.

   

3. Also add an OnClicked Event for the ResumeButton.

4. In the Graph window, Right-click and add a Get Player Controller node.

   

5. Off the Get Player Controller, use Set Input Mode Game Only, drag again off the Get Player Controller and use Set Show Mouse Cursor and set it to False, then Remove from Parent and Set Game Paused as shown below.

   

   Here when the Resume Button is clicked, the input mode is set to game only and the cursor that is displayed when the Pause Menu is activated is removed. The Remove from Parent node is used to remove the actual Pause Menu widget from display before leaving the paused state by using the Set Game Paused node and leaving Paused unchecked.

6. Create a new Function called Remove HUD.

   

   We will use this to remove the game HUD from the player's view when the Pause Menu is activated.

7. In the Function, add a Get Player Character node and off the Return Value, add the Cast ToFirstPersonCharacter node.

   

   This will allow us to access the Character Blueprint being used by the player and the game HUD that is being used by that player.

8. Off the As First Person Character, use Get HUD Reference then Remove from Parent as shown below.

   

   This will access the HUD being used by the player character and remove it from the viewport when quitting the game.

9. On the Event Graph, off Get Player Controller use the Set Show Mouse Cursor node set to True.

   

   When Quit is clicked, this will turn on the mouse cursor for menu navigation when returning to the Main Menu.

10. Next add the Remove HUD function created above followed by Open Level (set to Main or the name of the Level that you have your MainMenu on) and connect as shown.

    Click for full view. Both Buttons are now setup, the last thing that we need to do is allow the player to call the Pause Menu and pause the game.

11. In the Content Browser under Content/FirstPersonBP/Blueprints, open the FirstPersonCharacter Blueprint.

    

12. In the Graph, add a M Key Event and a Create Widget node (set to Pause Menu) and promote the Return Value to a variable.

    

    While we used the M Key as our input for bringing up the Pause Menu, you can use any key you wish. For the promoted variable, we called our variable Pause Menu Reference as this will store a reference to created Pause Menu.

13. Hold Ctrl and drag in the variable from the MyBlueprint window and connect it to an IsValid node.

    

    We are checking to see if the Pause Menu widget has been created and stored in this variable yet.

14. Connect the Is Not Valid pin to the Create PauseMenu_C Widget.

    

15. Right-click and add the Get Player Controller node then Set Show Mouse Cursor and set it to True.

16. Drag from the Get Player Controller node again then Get Player Controller Set Input Mode UI Only and connect the nodes as shown below.

    When M is pressed, if the Pause Menu has been accessed before it will not need to create it again and will instead access the variable. If this is the first time the Pause Menu has been accessed it will create it then store it as a variable so it can be access later. In either case, the input mode is set to UI only before we display the Pause Menu (which we will do next).

17. Off the Pause Menu Reference variable, use the Add to Viewport node then Set Game Paused (set Paused to True).

    Click for full view. Our Pause Menu is setup, now it is time to test.

18. Click the Compile and Save Buttons, then the Play button to play in the editor.

Once in-game, if you press the M Key (or whichever key you assigned), you will see that the game is paused and the Pause Menu appears. From here, you can resume gameplay with the Resume button or quit back to the Main Menu with the Quit Button.