Pause Menu - UQdeco2800/2021-studio-6 GitHub Wiki

Summary

The pause screen displays when the user presses the escape key. The pause menu contains several buttons that gives the user navigational options and ability to change game settings mid-game.

The current buttons on the pause menu are: Continue button - Returns to the game by removing the pause menu and setting the timescale back to 1. Settings button - Lets the user adjust game settings by displaying the settings within the pause menu frame. Exit to Menu button - Returns to the main title screen by setting the screen type to "MAIN_MENU". Exit Game button - Quits the game by calling game.exit().

Justification

A pause menu is a common design pattern that allows the user to access a menu of options while playing the main game. When building the pause menu, there are 4 aspects that we considered:

  • To pause the game. Sometimes things in life get in the way when playing a computer game, for example a phone call or bathroom break. Being able to pause the game allows the user to leave the game without being frustrated that their character will be dead when they come back.
  • Exit the game. During the game, the user may want to restart back from the beginning (facilitated through a back to menu button), or they may want to exit the game completely (facilited through the "Exit Game" button). The pause menu allows them to quick and easily exit to the menu or exit the game. This is added as a convenience/quality-of-life for the user to once again reduce the chance of frustration at the game.
  • Change settings. We want the game to be customisable for the user so that they can experience the game in the way they prefer. The settings button will allow them to change the game settings during the game, rather than having to exit back to the main menu. Having the user set the game how they want to play lets them have a higher chance of being focused on the game (as if they are in the game world themself).
  • Save or load a previous game state. This was a late addition after user testing determined that users want to save and load their game state. The ability to save/load also helps ease any frustration the user may have while playing the game, as they don't need to restart the entire game when the player dies. Although not implemented at this stage, save and load states will be added in future sprints.

Class Overview

  • MainGameScreen.java handles:

    • Load/unload of all the assets required for the pause menu.
    • Creating the UI component of the main game.
  • PauseMenuDisplay.java handles:

    • Adding the assets on the stage and determining the layout of these assets. The layout is controlled through the use of a table.
    • Adding the settings table to the pause menu table.
    • Resize elements when a screen resize has been detected.
  • PauseMenuActions.java handles:

    • Functionality for when a button is activated within the pause menu by listening for the button events.
  • MenuUtility.java handles:

    • Common functionality between menu screens such as:
      • Adding listener events to the buttons.
      • Adding button sound effects.
      • Changing button styles within a table

Unified Modeling Language

Note: Right click and select open image in new tab to see the full quality image.

This is the UML diagram that shows the connection between pause menu related classes. For simplicity, only the classes immediately connected to the pause menu classes are shown on this diagram.

Note that the PauseMenuAction class receives the button events through the EventHandler sending an event to the entity attached to the UIComponent class (through the parent Component class). This has been intentionally left out to keep the focus on the pause menu classes.

Assets loaded for the pause menu:

  • images/placeholder.png: This is the temporary black background of the pause menu. The pause menu will be designed in a later sprint once some of the other HUD components have been added (for design consistency).

  • sounds/rollover.mp3: This is the sound effect that is played whenever the user rolls over a button, i.e. when the "enter" listener for a button is activated. The sound effect can not be played again until the "exit" listener has been activated.

  • sounds/click.mp3: This is the sound effect that is played whenever the user activates a button. Note that this sound effect is not disposed of immediately with the rest of the menu screen and is instead disposed of after a 0.2 second timer to allow the sound effect to finish.

How to add a button

Within the PauseMenuDisplay class "CreateMainTable" method:

  • Step 1 - Add a new TextButton
TextButton continueBtn = new TextButton("Continue", skin, MENU_BUTTON_STYLE);
  • Step 2 - Call the MenuUtility.addButtonSelectListener method with the following parameters: Entity entity, Button button, and String eventTrigger. When a user activates the new button, this will play the click sound effect and run the event trigger specified.
MenuUtility.addButtonSelectListener(entity, continueBtn, "continue");
  • Step 3 - Call the MenuUtility.addButtonRolloverListener method with the button as it's sole parameter. This will add the rollover sound when the user mouses over the new button.
MenuUtility.addButtonRolloverListener(continueBtn)
  • Step 4 - Add the button to the table called "mainTable"
mainTable.add(continueBtn);

Within the PauseMenuActions class:

  • Step 5: Within the "create" method, add a new listener for the event trigger you have specified in step 2.
entity.getEvents().addListener("continue", this::onContinue);
  • Step 6: Add a new method that the new event trigger (from step 5) will call when the button is selected.
private void onContinue() {
    logger.info("Continue game");
}

How to initiate the pause menu

Trigger the event "togglepause" while the MainGameScreen is active:

entity.getEvents().trigger("togglepause");

Further Reading