Any Pause Screen Code / Examples?

[shaunumb]

Hi guys – just discovered Phaser yesterday. 

 

Just wondering if anyone has an example of a pause screen/state in a game created? Would be great to see some code. Had a look at the examples in the docs and couldn't see anything. 

 

Also, is the only way to pause/resume a game to individually pause and then resume all the moving / relevant elements, or am I missing some amazing game.pause() function?

 

I pretty familiar with JS, but am pretty much a noob at creating games with frameworks. 

 

Many thanks, 

Shaun

[clark]

Hey Shaun!

You could pause the main game with 

game.paused = true 

The tricky thing is your UI. The problem was we had a pause button in the game, and pausing the game pauses everything....including the button inputs.  

We are trying to move UI into the DOM....... But none the less, in either case, game.paused = true and game.paused = false is what we use.

[Heppell08]

Pausing with phaser is possible but you would have to use external elements to unpause the phaser pause system. What I do is pause the relevant parts of the game. Eg:

This.input.disabled = true;

This.physics.gravity.y = 0;

Player.body.velocity.x = 0;

Player.body.velocity.y = 0;

Then either have a text appear over the top of it all to say game paused (as I do) or have a UI. Then when unpaused you can either destroy(); or set the visibilty/exists to false. There is a lot of options but they do vary from one method to another.

[shaunumb]

Okay cheers guys.

 

I understand about the Pause the game screwing with the inputs. So it look like the best thing to do is just stop moving my elements individually. 

[presidenten]

Hey guys!

 

I figured out how to pause/unpause the game using game.paused from in game without using the dom. Basically I just add an event handler to game.input.onDown that takes care of the unpause and the menu.
 

Check it out: https://github.com/presidenten/phaser-examples/blob/7c0befd068b99bc653a492c61519a46ce532a188/examples/misc/pause%20menu.js

[wakarimasen]

cheers presidenten

could be summarised as

this.pauseButton = this.game.add.sprite(0, 0, 'pauseButton');this.pauseButton.inputEnabled = true;this.pauseButton.events.onInputUp.add(function () {this.game.paused = true;},this);this.game.input.onDown.add(function () {if(this.game.paused)this.game.paused = false;},this);

[Loopeex]

Hey guys,

 

I just finished a tutorial on how to handle a pause screen with Phaser.

You can read it here : http://www.loopeex.com/handle-a-pause-screen-with-phaser/

 

Here is an example : http://examples.loopeex.com/pause-screen/

 

(Thanks @KenneyWings for the assets )

 

Feel free to comment it !

[Harissa]

Hmm, Thanks Loopeex this is clever but does seem to show that the built in game.paused doesn't really do what we need it to do.

 

I'm trying to think what a better pause system would look like. The best I've come up with is the idea that groups could have their own paused property. This would let you pause

all the groups needed to run the main gameplay but still keep pause menus working.

[samme]

examples/v2/misc/pause-menu

[Rohan Prashanth]

Try this function:

onPause: function(pauseButton){

 if(game.paused === true){
    game.paused = false;
  }else{

  game.paused = true;

}
}

[Adel]

When the game is paused you can update the game objects in the .pauseUpdate loop.

What I did here is initializing a property onPauseInput to null in the State constructor, when the game is paused, that property will hold a reference to Phaser.Signal, input.onUp. The callback function will have a pointer param, I check the pointer x and y agains the buttons bounds, if pointer.x and pointer.y are in bound that mean the button was clicked. 

In the resumed hook, the onPauseInput is detached then nullified.

 

App.Game.prototype.pauseUpdate = function () {
    'use strict';

    if (!this.__onPauseInput) {
        this.__onPauseInput = this.input.onUp.add(function (pointer) {
            let x = pointer.position.x;
            let y = pointer.position.y;
            let btnBounds = {};
            let clickedBtn = null;

            this.__groups['PauseMenu'].forEach(function (pauseElement) {
                if (pauseElement.__name !== 'Play:PausePanel') {
                    btnBounds[pauseElement.__name] = pauseElement.getBounds();
                }
            }, this);

            Object.keys(btnBounds).forEach(function (key) {
                let btn = btnBounds[key];
                if (
                    x >= btn.x && x <= (btn.x + btn.width) &&
                    y >= btn.y && y <= (btn.y + btn.height)
                ) {
                    clickedBtn = key;
                }
            }, this);

            switch (clickedBtn) {
                case 'GUI:PauseBtn':
                    this.__togglePause();
                    break;
                case 'GUI:BackBtn':
                    this.__togglePause();
                    break;
                case 'GUI:FullscreenBtn':
                    this.__toggleFullScreen();
                    break;
                case 'GUI:MuteBtn':
                    this.__togglePause();
                    this.__toggleMute();
                    break;
                case 'GUI:HomeBtn':
                    this.__togglePause();
                    this.__SwitchScreen('Start', false);
                    break;
                default:
            }
        }, this);

    }
};

App.Game.prototype.resumed = function () {
    'use strict';

    if (this.__onPauseInput) {
        this.__onPauseInput.detach();
        this.__onPauseInput = null;
    }
    

};

 

 

[Adel]

And here the methods to pause the game and display the pause menu

App.Game.prototype.__togglePause = function () {
    'use strict';

    this.game.paused = !this.game.paused;
};

App.Game.prototype.__togglePauseMenu = function () {
    'use strict';

    this.__groups['PauseMenu'].forEach(function (pauseElement) {
        if (pauseElement.__name !== 'GUI:PauseBtn') {
            pauseElement.visible = !pauseElement.visible;
        }
    }, this);
};