Jody Thai

Detect when the game change visibility

Recommended Posts

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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. 

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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. 

Share this post


Link to post
Share on other sites

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. 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.