Menu when paused and a timer

[end3r]

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?

[Yora]

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.

[end3r]

Thanks Yora.

 

So the first question about pause menu still stays - anyone can help with it?

[XekeDeath]

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.

[Madigan]

I haven't gotten to menus and such in my game yet, but I noticed that the game state has a "pause" function that you can override (like you do with preload, create, and update). Maybe that's what you're looking for?

[end3r]

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.

[scoots]

Did anyone have luck figuring this out without using a div or something else outside the phaser canvas?

[jcs]

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.

[LuckieLordie]

I used groups to solve this for a summary at the end of a game.

 

have a "game group" and a "pauseMenuGroup". You can then use the "exists" and "visible" properties to pause updating and rendering respectively

[KrishnaMv]

Guys...did n1 found a solution to it...!!! Im stuck at the same point...

[end3r]

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.

[ZoomBox]

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

[Heppell08]

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.

[Michel (Starnut)]

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

[stasuss]

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

[Heppell08]

http://www.html5gamedevs.com/topic/6175-example-pauseupdate-in-new-204-working/

[Salvatore]

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?

[Heppell08]

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.

[Loopeex]

I did the same as @end3r to handle a pause screen.

I wrote a full tutorial about it : http://www.loopeex.com/handle-a-pause-screen-with-phaser/