Game visibility change, and having code run when tabs change in phaser ce
When making a phaser ce project by default the game will pause when it is no loger in focus by the player. In most cases this is fine, but depending on the nature of the game that is being made some times this might present a problem. In this post I will be writing about a boolean property in the state object call game.state.disableVisibilityChange that can be used to change this default behavior so the game continues to run even when not in focus.
In addition I will also be writing about the nature of setTimeout vs requestAnimationFrame. In some cases you might want to decouple some of your code away from phasers state loop if you want code to continue to run in the background.
1 - what to know
1.1 - This is a phaser ce 2.x post
With the examples in this post I was using phaser community edition 2.11.1 of phaser.
2 - Using stage.disableVisibilityChange
So if I want to have a project where the game will not pause when the player looses focus from the canvas that is as simple as just setting a boolean value to true for game.stage.disableVisibilityChange. By default the value from this property is false, but with some games I might want that feature disabled.
When this example is up and running the sprite will move across the screen even if I loose focus with the canvas by clicking the address bar of the browser. If I set the value for game.stage.disableVisibilityChange back to false then the game will pause when I do something to that effect.
However the game will still pause when I go to another tab, I know this because of the method that logs the sprite position to the title element. This is not because of phaser, but because of the native methods that phaser uses to implement a game loop, namely requestAnimationFrame.
3 - Having code continue to run during a tab change
If I do want to make a game where I want things to continue working even when the player is not involved in the game at all, then I will want to break some of my code out of phaser and into my own loop that uses a method like setTimeout. Generally I do not want to use setTimeout to make a game loop, but in this case it does behave differently in browsers.
When this project is up and running the money variable will continue to update event when I am at another browser tab.