shaunumb

Any Pause Screen Code / Examples?

Recommended Posts

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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);

Share this post


Link to post
Share on other sites

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 !

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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;
    }
    

};

 

 

Share this post


Link to post
Share on other sites

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);
};

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.