2.2.11 Cycle 11 - Add Pause Menu

Design

Objectives

In this cycle I aim to add a pause menu which can be brought up with the press of a button or through a key on the keyboard. The user should also be able to click away from the pause menu and then resume playing seamlessly.

• Add pause menu

• Add seamless switch to and from the pause menu

Usability Features

Key Variables

Variable Name	Use
pause_label	This is the button on screen the user can press to bring up the menu.
menu	This is the menu sprite that will come up and be displayed central on the screen.
paused	This is a boolean value that tells the game when it is and isn't paused.

Pseudocode

procedure create
    pause label = new text (Pause, top right)
    pause label enable input
    if pause label is pressed
        paused = true
        menu = new sprite (middle of screen)
        choice label = new text (middle of screen)
end procedure

procedure unpause
    if game is paused 
        choices = [0,1,2,3,4,5]
        selection = position of choices
        choice text = "You chose: " choice
        kill menu
        paused = false
end procedure

Development

Outcome

Game.js

create(){
...
    pause_label = game.add.text(window.innerWidth - 100, 20, 'Pause', { font: '24px Arial', fill: '#fff' });
    pause_label.inputEnabled = true;
    pause_label.events.onInputUp.add(function () {
        // When the paus button is pressed, we pause the game
        game.paused = true;

        // Then add the menu
        menu = game.add.sprite(window.innerWidth/2, window.innerHeight/2, 'menu');
        menu.anchor.setTo(0.5, 0.5);

        // And a label to illustrate which menu item was chosen. (This is not necessary)
        choiceLabel = game.add.text(window.innerWidth/2, window.innerHeight-150, 'Click outside menu to continue', { font: '30px Arial', fill: '#fff' });
        choiceLabel.anchor.setTo(0.5, 0.5);
    });
}

// Method that handles the unpause event
function unpause(event){
    // Only act if paused
    if(game.paused){
        // Calculate the corners of the menu
        var x1 = window.innerWidth/2 - 270/2, x2 = window.innerWidth/2 + 270/2,
            y1 = window.innerHeight/2 - 180/2, y2 = window.innerHeight/2 + 180/2;
        // Check if the click was inside the menu
        if(event.x > x1 && event.x < x2 && event.y > y1 && event.y < y2 ){
            // The choicemap is an array that will help us see which item was clicked
            var choicemap = ['one', 'two', 'three', 'four', 'five', 'six'];
            // Get menu local coordinates for the click
            var x = event.x - x1,
                y = event.y - y1;
            // Calculate the choice 
            var choice = Math.floor(x / 90) + 3*Math.floor(y / 90);
            // Display the choice
            choiceLabel.text = 'You chose menu item: ' + choicemap[choice];
        }
        else{
            // Remove the menu and the label
            menu.destroy();
            choiceLabel.destroy();
            // Unpause the game
            game.paused = false;
        }
    }
}

Challenges

I found it challenging for the pause menu button to come up on screen and this was irritating as this was the main intended way for the player to pause.

Testing

Evidence for testing

Tests

Test	Instructions	What I expect	What actually happens	Pass/Fail
1	Press the 'pause' button in the top right	The menu should come up with a range of different	The pause button doesn't show	Fail

Evidence

Unfortunately I ran out of time to be able to fully implement this feature, however I would like to try and add this to the game after the project has finished.