Vastly improved visibility API support + pageshow/pagehide + focus/blur. Working across Chrome, IE, Firefox, iOS, Android (also fixes phaserjs#161)

Author: photonstorm

README.md

@@ -131,6 +131,7 @@ Updates:
 * Loader.setPreloadSprite() will now set sprite.visible = true once the crop has been applied. Should help avoid issues (#430) on super-slow connections.
 * Updated the way the page visibility is checked, should now be more compatible across more browsers.
 * Phaser.Input.Key.isUp now defaults to 'true', as does GamepadButton.isUp (#474)
+* Vastly improved visibility API support + pageshow/pagehide + focus/blur. Working across Chrome, IE, Firefox, iOS, Android (also fixes #161)
 
 
 Bug Fixes:

examples/wip/index.php

@@ -77,7 +77,7 @@ function printJSLinks($dir, $files) {
         <meta charset="UTF-8" />
         <meta name="viewport" content="initial-scale=1 maximum-scale=1 user-scalable=0 minimal-ui" />
         <title>phaser</title>
-        <base href="../"></base>
+        <base href="../" />
         <script src="_site/js/jquery-2.0.3.min.js" type="text/javascript"></script>
         <?php
             require('../../build/config.php');

examples/wip/tab swap.js

@@ -0,0 +1,84 @@
+
+var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });
+
+function preload() {
+
+    game.load.spritesheet('mummy', 'assets/sprites/metalslug_mummy37x45.png', 37, 45, 18);
+    game.load.audio('boden', ['assets/audio/bodenstaendig_2000_in_rock_4bit.mp3', 'assets/audio/bodenstaendig_2000_in_rock_4bit.ogg']);
+
+}
+
+var mummy;
+var anim;
+var music;
+var s = [];
+
+function create() {
+
+	game.stage.backgroundColor = 0x3d4d3d;
+
+    music = game.add.audio('boden');
+    music.play();
+
+    mummy = game.add.sprite(500, 300, 'mummy', 5);
+    mummy.scale.set(2);
+
+    anim = mummy.animations.add('walk');
+
+    anim.play(10, true);
+
+    game.onPause.add(paused, this);
+    game.onResume.add(resumed, this);
+
+    var space = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
+    space.onDown.add(pauseToggle, this);
+
+    s.push('starting: ' + game.stage._hiddenVar);
+
+}
+
+function pauseToggle() {
+
+	if (game.paused)
+	{
+		game.paused = false;
+	}
+	else
+	{
+		game.paused = true;
+	}
+
+}
+
+function paused() {
+
+	s.push('paused now: ' + game.time.now);
+	// console.log('paused now:', game.time.now);
+
+}
+
+function resumed() {
+
+	s.push('resumed now: ' + game.time.now);
+	s.push('pause duration: ' + game.time.pauseDuration);
+	// console.log('resumed now:', game.time.now);
+	// console.log('resumed duration:', game.time.pauseDuration);
+
+}
+
+function update() {
+
+}
+
+function render() {
+
+	// game.debug.renderText(anim.frame + ' / 17', 32, 32);
+
+	for (var i = 0; i < s.length; i++)
+	{
+		game.debug.renderText(s[i], 16, 160 + (16 * i));
+	}
+
+    game.debug.renderSoundInfo(music, 20, 32);
+	
+}

resources/Project Templates/Full Screen Mobile/index.html

@@ -16,13 +16,20 @@
 	<meta name="apple-mobile-web-app-title" content="Phaser App">
 	<meta name="viewport" content="initial-scale=1 maximum-scale=1 user-scalable=0 minimal-ui" />
 	<link rel="apple-touch-icon" href="/apple-touch-icon.png">
+	<!-- non-retina iPhone pre iOS 7 -->
 	<link rel="apple-touch-icon" sizes="57x57" href="icons/app_icon_57x57.png">
 	<link rel="apple-touch-icon" sizes="60x60" href="icons/app_icon_60x60.png">
+	<!-- non-retina iPad pre iOS 7 -->
 	<link rel="apple-touch-icon" sizes="72x72" href="icons/app_icon_72x72.png">
+	<!-- non-retina iPad iOS 7 -->
 	<link rel="apple-touch-icon" sizes="76x76" href="icons/app_icon_76x76.png">
+	<!-- retina iPhone pre iOS 7 -->
 	<link rel="apple-touch-icon" sizes="114x114" href="icons/app_icon_114x114.png">
+	<!-- retina iPhone iOS 7 -->
 	<link rel="apple-touch-icon" sizes="120x120" href="icons/app_icon_120x120.png">
+	<!-- retina iPad pre iOS 7 -->
 	<link rel="apple-touch-icon" sizes="144x144" href="icons/app_icon_144x144.png">
+	<!-- retina iPad iOS 7 -->
 	<link rel="apple-touch-icon" sizes="152x152" href="icons/app_icon_152x152.png">
 	<link rel="apple-touch-icon" sizes="256x256" href="icons/app_icon_256x256.png">
 	<link rel="apple-touch-icon" sizes="512x512" href="icons/app_icon_512x512.png">

src/core/Game.js

@@ -86,20 +86,6 @@ Phaser.Game = function (width, height, renderer, parent, state, transparent, ant
     */
     this.state = null;
 
-    /**
-    * @property {boolean} _paused - Is game paused?
-    * @private
-    * @default
-    */
-    this._paused = false;
-
-    /**
-    * @property {boolean} _loadComplete - Whether load complete loading or not.
-    * @private
-    * @default
-    */
-    this._loadComplete = false;
-
     /**
     * @property {boolean} isBooted - Whether the game engine is booted, aka available.
     * @default
@@ -246,6 +232,27 @@ Phaser.Game = function (width, height, renderer, parent, state, transparent, ant
     */
     this.stepCount = 0;
 
+    /**
+    * @property {boolean} _paused - Is game paused?
+    * @private
+    * @default
+    */
+    this._paused = false;
+
+    /**
+    * @property {boolean} _codePaused - Was the game paused via code or a visibility change?
+    * @private
+    * @default
+    */
+    this._codePaused = false;
+
+    /**
+    * @property {boolean} _loadComplete - Whether load complete loading or not.
+    * @private
+    * @default
+    */
+    this._loadComplete = false;
+
     //  Parse the configuration object (if any)
     if (arguments.length === 1 && typeof arguments[0] === 'object')
     {
@@ -605,9 +612,16 @@ Phaser.Game.prototype = {
 
         if (this._paused)
         {
-            this.renderer.render(this.stage);
-            this.plugins.render();
-            this.state.render();
+            this.input.update();
+
+            if (this.renderType !== Phaser.HEADLESS)
+            {
+                this.renderer.render(this.stage);
+                this.plugins.render();
+                this.state.render();
+
+                this.plugins.postRender();
+            }
         }
         else
         {
@@ -708,6 +722,43 @@ Phaser.Game.prototype = {
         this.world = null;
         this.isBooted = false;
 
+    },
+
+    /**
+    * Called by the Stage visibility handler.
+    *
+    * @method Phaser.Game#gamePaused
+    */
+    gamePaused: function (time) {
+
+        //   If the game is already paused it was done via game code, so don't re-pause it
+        if (!this._paused)
+        {
+            this._paused = true;
+            this.time.gamePaused(time);
+            this.sound.mute = true;
+            this.onPause.dispatch(this);
+        }
+
+    },
+
+    /**
+    * Called by the Stage visibility handler.
+    *
+    * @method Phaser.Game#gameResumed
+    */
+    gameResumed: function (time) {
+
+        //  Game is paused, but wasn't paused via code, so resume it
+        if (this._paused && !this._codePaused)
+        {
+            this._paused = false;
+            this.time.gameResumed(time);
+            this.input.reset();
+            this.sound.mute = false;
+            this.onResume.dispatch(this);
+        }
+
     }
 
 };
@@ -733,6 +784,9 @@ Object.defineProperty(Phaser.Game.prototype, "paused", {
             if (this._paused === false)
             {
                 this._paused = true;
+                this._codePaused = true;
+                this.sound.mute = true;
+                this.time.gamePaused();
                 this.onPause.dispatch(this);
             }
         }
@@ -741,7 +795,10 @@ Object.defineProperty(Phaser.Game.prototype, "paused", {
             if (this._paused)
             {
                 this._paused = false;
+                this._codePaused = false;
                 this.input.reset();
+                this.sound.mute = false;
+                this.time.gameResumed();
                 this.onResume.dispatch(this);
             }
         }

src/core/Stage.js

@@ -246,27 +246,37 @@ Phaser.Stage.prototype.boot = function () {
 */
 Phaser.Stage.prototype.checkVisibility = function () {
 
-    var supportsVisibilityApi = false;
-    var prefixes = [ "", "moz", "ms", "webkit" ];
-
-    while (prefixes.length)
+    if (document.webkitHidden != undefined)
     {
-        prefix = prefixes.pop();
-        this._hiddenVar = prefix ? prefix + "Hidden" : "hidden";
-
-        if (this._hiddenVar in document)
-        {
-            supportsVisibilityApi = true;
-            break;
-        }
+        this._hiddenVar = 'webkitvisibilitychange';
+    }
+    else if (document.mozHidden != undefined)
+    {
+        this._hiddenVar = 'mozvisibilitychange';
+    }
+    else if (document.msHidden != undefined)
+    {
+        this._hiddenVar = 'msvisibilitychange';
+    }
+    else if (document.hidden != undefined)
+    {
+        this._hiddenVar = 'visibilitychange';
+    }
+    else
+    {
+        this._hiddenVar = null;
     }
 
     //  Does browser support it? If not (like in IE9 or old Android) we need to fall back to blur/focus
-    if (supportsVisibilityApi)
+    if (this._hiddenVar)
     {
         document.addEventListener(this._hiddenVar, this._onChange, false);
-        document.addEventListener('pagehide', this._onChange, false);
-        document.addEventListener('pageshow', this._onChange, false);
+    }
+
+    if (window['onpagehide'])
+    {
+        window.onpagehide = this._onChange;
+        window.onpageshow = this._onChange;
     }
 
     window.onblur = this._onChange;
@@ -304,13 +314,27 @@ Phaser.Stage.prototype.visibilityChange = function (event) {
         return;
     }
 
-    if (this.game.paused === false && (event.type === 'pagehide' || event.type === 'blur' || document[this._hiddenVar] === true))
+    if (event.type === 'pagehide' || event.type === 'blur' || event.type === 'pageshow' || event.type === 'focus')
+    {
+        if (event.type === 'pagehide' || event.type === 'blur')
+        {
+            this.game.gamePaused(event.timeStamp);
+        }
+        else if (event.type === 'pageshow' || event.type === 'focus')
+        {
+            this.game.gameResumed(event.timeStamp);
+        }
+
+        return;
+    }
+
+    if (document.hidden || document.mozHidden || document.msHidden || document.webkitHidden)
     {
-        this.game.paused = true;
+        this.game.gamePaused(event.timeStamp);
     }
     else
     {
-        this.game.paused = false;
+        this.game.gameResumed(event.timeStamp);
     }
 
 }

src/input/Input.js

@@ -457,6 +457,7 @@ Phaser.Input.prototype = {
         if (this.pointer10) { this.pointer10.update(); }
 
         this._pollCounter = 0;
+
     },
 
     /**

src/input/Keyboard.js

@@ -71,7 +71,7 @@ Phaser.Keyboard = function (game) {
 Phaser.Keyboard.prototype = {
 
     /**
-    * Add callbacks to the Keyboard handler so that each time a key is pressed down or releases the callbacks are activated.
+    * Add callbacks to the Keyboard handler so that each time a key is pressed down or released the callbacks are activated.
     *
     * @method Phaser.Keyboard#addCallbacks
     * @param {Object} context - The context under which the callbacks are run.

src/input/Pointer.js

@@ -209,8 +209,8 @@ Phaser.Pointer.prototype = {
         //  Fix to stop rogue browser plugins from blocking the visibility state event
         if (this.game.stage.disableVisibilityChange === false && this.game.paused && this.game.scale.incorrectOrientation === false)
         {
-            this.game.paused = false;
-            return this;
+            // this.game.paused = false;
+            // return this;
         }
 
         this._history.length = 0;