Game Pause: active buttons

[Skell]

Need to implement a pause in the game.

Typically used code:

this.game.paused = true;this.game.input.onDown.add(object.unpause, object);unpause(event) {    var rect: Phaser.Rectangle = new Phaser.Rectangle(0, 0, 200, 200).copyFrom(this.btnPlay);    if (rect.contains(this.game.input.x, this.game.input.y)) {                 this.game.input.onDown.remove(unpause.back, this);                 this.game.paused = false;    } }

When using game.paused = true; - All objects are frozen, and I need to have two active buttons (more games, play), ie worked when the mouse hover (on desktop). How do I make an active 2 buttons at game.paused = true?

[lewster32]

Do you mean something like this? http://examples.phaser.io/_site/view_full.html?d=misc&f=pause+menu.js&t=pause%20menu

[Skell]

If we take this example, I need to square one, two, tree ... were active and used the mouse events.onInputOver.  How to do it?

[lewster32]

I believe you can just add or better still make visible previously added buttons with their input events already set in your create method (or elsewhere) and only accept input from them if the game is paused. Then create a couple of functions to pause and unpause the game, and in those functions also show and hide the menu. Something like this:

var menu;function create() {  menu = game.add.group();  menu.x = game.world.centerX;     // make the menu invisible for now  menu.visible = false;  // create 3 buttons and add them to the 'menu' group  var button1 = game.add.button(-50, 100, 'button1', button1Click, this, 2, 1, 0, this.menu);  var button2 = game.add.button(-50, 150, 'button2', button2Click, this, 2, 1, 0, this.menu);  var button3 = game.add.button(-50, 200, 'button3', button2Click, this, 2, 1, 0, this.menu);}function pauseGame() {  // pause the game and show the menu  game.paused = true;  menu.visible = true;}function unpauseGame() {  // unpause the game and hide the menu again  game.paused = false;  menu.visible = false;}function button1Click() {  // ensure the game is paused before allowing the action to go ahead  if (game.paused) {    // ... perform your action here ...  }}// ... and so on for the other two button callbacks

[Skell]

Example code above: if game.paused = true; -  all objects become inactive, including Group Menu: button1, button2, button3, inactive events.onInputOver and game.input.onDown . Need to button1, button2 ... took events.onInputOver, i.e. respond when mouse hover.

[lewster32]

Oh I see... hmm. According to the docs all subsystems get paused. That's annoying. Maybe it'd be easier then to add your buttons using the dom and have them over displayed the top of the game canvas? That way, you can use browser events to detect clicks/touches outside of Phaser.

[Skell]

Maybe it'd be easier then to add your buttons using the dom and have them over displayed the top of the game canvas?

 

 

- When using dom/canvas can be problems with google browser: duplicate canvas android, also with Ludei and various sponsorship api.

 

I will do  to emulate (through the mouse position) the events.onInputOver, also as game.input.onDown:

 

Example emulate game.input.onDown:

this.game.input.onDown.add(object.unpause, object);

unpause(event) {    var rect: Phaser.Rectangle = new Phaser.Rectangle(0, 0, 200, 200).copyFrom(this.btnPlay);    if (rect.contains(this.game.input.x, this.game.input.y)) {                 this.game.input.onDown.remove(unpause.back, this);                 this.game.paused = false;    }}

 

 

[Umz]

Thank You! I've used a mix of these to come up with a solution.

Thought I'd add it in just in case anyone else may need it:

Create a Group for the Pause Menu items, and set it to false.

this.pauseMenu = game.add.group();
this.pauseMenu.visible = false;

Add all the menu items to that group. Use a button or anything else to pause the game:

this.pauseBtn = this.add.button(20, 20, 'btn_pause', pauseGame, this, 0, 0, 0);
function pauseGame() { game.paused = true; }

You need to register the listener as per the examples code to listen for any input when the game is paused. You can use whichever one you want: i.e. onTap, onDown, onUp to listen.

this.input.onDown.add(unpause, this);

Then finally in the on pause function you just do the bounds check on your sprites to see if they are clicked. This is the best solution I've found so far for a modest pause screen, but for a complicated one then a Pause State is probably the best way to go.

if (game.paused) {
    if (resumeBtn.getBounds().contains(this.game.input.x, this.game.input.y)) {
        this.game.paused = false;        
        this.pauseMenu.visible = true;
    }
}