Detect when the game change visibility

[Jody Thai]

Hi,

 

When the browser tab is out of focus, the game will pause, we all know that default setting. But is there a way to detect whenever it happen? I have my own countdown timer and when the game is paused this way, my timer still works so I need to detect it's status to pause my timer as well.

 

Thanks,

Jody

[rich]

Sure, you can listen to 2 events fired from Game:

this.game.onPause.add(yourGamePausedFunc, this);this.game.onResume.add(yourGameResumedFunc, this);

[Jody Thai]

Thank you very much Rich!

[Michel (Starnut)]

Hi Jody,

 

just wanted to let you know that I was trying to do the same thing and just ran into an issue with Phaser 1.1.3 where time.time is broken (some vast number) in the onResume call. I just filed an issue on gitHub for it.

[rich]

Just to copy the example I posted on github for this. You should use game.time.now for a true elapsed value. Here's an example:

var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { create: create, render: render });function create() {	game.onPause.add(onGamePause, this);	game.onResume.add(onGameResume, this);}function onGamePause() {	console.log('game paused at ' + this.time.now);}function onGameResume() {	console.log('game un-paused at ' + this.time.now);	console.log('was paused for ' + game.time.pauseDuration);}function render() {	game.debug.renderText('now: ' + game.time.now, 32, 32);	game.debug.renderText('paused: ' + game.paused, 32, 64);}

[pandavigoureux29]

Hi,

 

I've been "playing" with this time value for a bit now, because I need it for my GuitarHero-like game.

 

From what I've read above, the game.time.now should be frozen during the pause?

 

I have this kind of behaviour :

 

update before pause : time = 3000

pause : time = 3000

resume : time = 3000

I wait 5 seconds

update just after : time = 8000 

 

The time seems right when I read it in the function called by the resume process, but in the update just after, it goes back to the "real" time.

 

Is there something I could be doing wrong? Or do I expect a behaviour that is not supposed to happen?

 

Thanks for your help.

 

PS: That's kind of my first post on the forum, so I'll take this chance to thank you for your great work. This has changed my opinion about web gaming

[pandavigoureux29]

Okay I don't know what happened in the night, but this seems to be working now. I changed my phaser version yesterday, so maybe it was still in the cache and not reloaded. ( just a guess )

 

I thought the time was frozen but it's not, but I have the delta so I can deal with that.

 

Sorry for the inconvenience. 

[alikoo]

Thank you very much Rich!

[Dev Monster]

Hi Rich,

 

I cant get this to work in Phaser 2.0.5. Where does the code go? I put it inside my Boot.js create function and it didnt work...I also tried to put it inside my Preloader.js create function and in the Main.js file right after I created the game. But that didnt work either.

 

I get no console log when I change to another tab or window away from the game. I need to pause the music that is playing in my game when a user leaves the screen to another window but cant figure it out.

 

Thanks!

[kestorr]

Hi Rich,

 

I cant get this to work in Phaser 2.0.5. Where does the code go? I put it inside my Boot.js create function and it didnt work...I also tried to put it inside my Preloader.js create function and in the Main.js file right after I created the game. But that didnt work either.

 

I get no console log when I change to another tab or window away from the game. I need to pause the music that is playing in my game when a user leaves the screen to another window but cant figure it out.

 

Thanks!

 

Did you manage to fix this? I have the same problem.

[ForgeableSum]

there is a difference between detecting when the game is paused and detecting when the tab is no longer active (i.e. out of focus). Why is this distinction important? Suppose I pause/resume the game in many different ways. So auto pausing on visibility change is just 1 way. Therefore, there should be a way to detect visibility change without it being tied to game.paused. 

[ForgeableSum]

Here's what I do to detect the actual visibility change (as the title of this thread asks):

var vis = (function(){
    var stateKey, eventKey, keys = {
        hidden: "visibilitychange",
        webkitHidden: "webkitvisibilitychange",
        mozHidden: "mozvisibilitychange",
        msHidden: "msvisibilitychange"
    };
    for (stateKey in keys) {
        if (stateKey in document) {
            eventKey = keys[stateKey];
            break;
        }
    }
    return function(c) {
        if (c) document.addEventListener(eventKey, c);
        return !document[stateKey];
    }
})();

vis() returns true if the tab is in focus. This is a much more reliable way than setting a boolean on pause/resume, as you might be pausing/resuming your game state in other code.