Jump to content

Any Pause Screen Code / Examples?


shaunumb
 Share

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

Link to comment
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.

Link to comment
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.

Link to comment
Share on other sites

  • 1 month later...

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

Link to comment
Share on other sites

  • 4 weeks later...
  • 2 weeks later...
  • 4 weeks later...

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.

Link to comment
Share on other sites

  • 3 years later...
  • 7 months later...

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

};

 

 

Link to comment
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);
};
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...