What happens to children of Phaser.Graphics when visible is set to false?

I have Phaser.Graphics object called PauseMenu. It contains rectangular background, a title text and a main menu button which leads to the main menu screen. If I don’t set the visible property to false on PauseMenu, the button works properly, i.e loads the main menu screen state. However, if I set visible to false, the button becomes unresponsive. No errors show in console, but the button doesn’t work.

What happens to the children event handlers when visible is set to false on Phaser.Graphics?

Hmm, when I press the main menu button, if it was hidden previously using visible = false, then the method called to jump to main menu screen, was called but after i pressed the R key (calls resume method). As if the main menu event button handler was bubbling up in the list of children of PauseMenu.

Hmm even if Phaser.Button is separate from game paused menu, on its own. If I set visible to false, the click event handler somehow is postponed from processing.

And if I set alpha = 0 and call removeAll() on the onInputDown signal, the click handler is still functional :smiley:

Hah, moving the button in an off-screen position, say, (2000, 2000) works like setting the visible=false, i.e postpones the processing of the click handler :slight_smile:

Hah, the leftover click event from the main menu button is fired when the game is resumed :smiley:
So, in order to switch to the main menu screen when the game paused menu is displayed, I need to press R which resumes the game in order to go to the main menu screen. Interesting!! :smiley:

Hmm how I solved this, I added a global gamePaused boolean flag which I set to true/false when I press P to pause or R key to resume the game. I have helper methods which I call, and these methods stop the background from rotating which mimics the game being pause, when in fact it isn’t.

var phaserGame = (function () {
 var gamePaused = false;

return {
getGamePaused: function () {
     return gamePaused;
},

pauseGame: function() {
     gamePaused = true;
},

resumeGame: function() {
      gamePaused = false;
}
};
}());

In the Phaser.State I used to play the game I have added these:

lostFocus: function () {
     this.pauseGame();
},
gotFocus: function () {
     this.resumeGame();
},
pauseGame: function () {
      phaserGame.pauseGame(); // the method from above, the top level namespace, which changes gamePaused  flag to true.
      rotatingBackground.data.pause();
      pauseMenu.visible = true;
},
resumeGame: function () {
      phaserGame.resumeGame(); // the method from above, the top level namespace which changes gamePaused  flag to false. 
      rotatingBackground.data.resume();
      pauseMenu.visible = false;
}

And then in create() of the Phaser.State for the level I have:

pauseMenu = this.createPauseMenu(225, 225);
pauseMenu.visible = false;
            
pauseKey = game.input.keyboard.addKey(Phaser.KeyCode.P);
pauseKey.onDown.add(this.pauseGame, this);

resumeKey = game.input.keyboard.addKey(Phaser.KeyCode.R);
resumeKey.onDown.add(this.resumeGame, this);