end3r

Menu when paused and a timer

Recommended Posts

I have two simple questions, I didn't managed to find this on my own. First: how can I create a pause menu without pausing everything on screen? Using this.game.paused just freezes the whole game and don't render the pause menu.

The second question: is there a dedicated timer in Phaser (so I can for example do something once per second) or should I just code it in pure JavaScript?

Share this post


Link to post
Share on other sites

The first question I've been wondering myself, but for timers you can use this.game.time.now to reference the ms since the game started or you can do something like this in the update:

customTime += this.game.time.elapsed;if (customTime > 1000) {do blablacustomTime = 0;}

which would occur once per second.

Share this post


Link to post
Share on other sites

My current solution for a pause menu is to have it in a div outside of the Phaser game object, and use jQuery to display it when I need to pause the game.

Obviously no good if you are not building your game into a web page, but it serves our purposes for now.

 

I have a button on the screen that calls this function:

//Gram is declared outside of all Phaser code. The game reference is added later after it is created.Gram.pause = function (){    this.game.paused = true;    $("#pause_menu").show("fast");    $("canvas").hide("fast");}

The Pause menu has a link that is hooked up using jQuery to call the unpause function on the Gram object:

//jQuery to hook up the pause menu links.$("#pause_continue").click(function() {    Gram.unpause();});Gram.unpause = function (){    $("#pause_menu").hide("fast");    $("canvas").show("fast");    this.game.paused = false;}

The game object also has these Phaser Signals you can add to:

this.onPause = new Phaser.Signal;this.onResume = new Phaser.Signal;

So I could use this line:

game.onPause.add(Gram.pause, this);

and the pause menu would appear when the browser lost focus. (This seems to have the effect of calling Gram.pause twice, but that doesn't matter for what I am doing...)

Edit: Forgot to mention that you would also want to call unpause when the browser gains focus again, or make sure the game doesn't start playing behind the pause menu, because the browser gaining focus again fires off the onResume signal.

 

 

 

This post has some discussion on pause menus using Phaser states, and why it isn't possible to do it that way at the moment. Namely because swapping the state destroys the previous one.

Share this post


Link to post
Share on other sites

XekeDeath - I was afraid that the only solution for now would be to use external sources. Ideally I woud like to have it covered by the Phaser engine itself, maybe without changing the states. You know, to pause the alculations and animations, but still have rendering and responsive buttons.

Madigan - looks like I'll have to look into it, if it's not so easy to have the pause menu working out of the box.

Share this post


Link to post
Share on other sites

it depends. if all you want is to display some text/graphic that says 'paused' while the game is paused, just draw something in your state's render() function - it is called while the state is paused.

Share this post


Link to post
Share on other sites

I'm managing pause on my own in my games - I have my gamePaused variable which I set and then check if it's true or false. When my game is paused I'm just managing everything on my own - turn off animations, stop (cache) movement, show pause screen etc.

Share this post


Link to post
Share on other sites

I have done this before:

With physics.P2:

-I check each sprite of my game variable and I set sprite.body.sleepState = 2; (it freezes it, set it to 0 to unfreeze).

-And same for animation (sprite.animations.stop() and sprite.animations.play(sprite.animations.currentAnim)).

-I pause all my timer (don't remember the function to call).

And that it I believe.

 

But now, I think the easiest way is to work with HTML5 menus. That's what I'm doing, it's way cleaner and easier (butPause.onClick() = gameVar.paused = true).

Share this post


Link to post
Share on other sites

Version 2.0.4 has a new update that pauses the update. Physics and everything else is paused but you can actually unpause it with phaser and not any jQuery/DOM/game hacking.

I say game hacking because that's how I got my pause to work. Using invisible boxes for physics stop and an overlay/menu that's shown on pause. The new update should make this kind of stuff childs play to implement though.

Share this post


Link to post
Share on other sites

Apparently input listeners on the game instance itself still work while the game is paused. This code works fine for me:

showMenu: function() {    // show the menu    this.menu.show();    // listen to any input on the game    this.game.input.onDown.add(this.hideMenu, this);    // pause the game    this.game.paused = true;},hideMenu: function() {    // get the menu's rectangle    var rect = new Phaser.Rectangle().copyFrom(this.menu);    // check if the user tapped inside the rectangle    if (rect.contains(this.game.input.x, this.game.input.y))    {        // hide the menu        this.menu.hide();        // remove the listener        this.game.input.onDown.remove(this.hideMenu, this);        // unpause the game        this.game.paused = false;    }},

Share this post


Link to post
Share on other sites

How to prevent the update method keep updating?? Because even if we don't put the object.update they keep updating...

 

With this we can freeze all objects and put the pause screen on top of the sprites and attached to the camera.

 

It can be done?

Share this post


Link to post
Share on other sites

How to prevent the update method keep updating?? Because even if we don't put the object.update they keep updating...

With this we can freeze all objects and put the pause screen on top of the sprites and attached to the camera.

It can be done?

Have a look at my post above. There is a way to stop phaser (pause) and then unpause without jQuery/DOM. My example has source code and example in link.

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.