Added Page Visibility handler and hooked into TimeStep.

Author: photonstorm

v3/src/boot/Game.js

@@ -5,6 +5,8 @@ var Device = require('../device');
 
 var AddToDOM = require('../dom/AddToDOM');
 var DOMContentLoaded = require('../dom/DOMContentLoaded');
+var VisibilityHandler = require('./VisibilityHandler');
+var EventDispatcher = require('../events/EventDispatcher');
 
 var TimeStep = require('./TimeStep');
 var CreateRenderer = require('./CreateRenderer');
@@ -26,6 +28,11 @@ var Game = function (config)
     this.isBooted = false;
     this.isRunning = false;
 
+    /**
+    * @property {EventDispatcher} events - Global / Global Game System Events
+    */
+    this.events = new EventDispatcher();
+
     /**
     * @property {Phaser.AnimationManager} anims - Reference to the Phaser Animation Manager.
     */
@@ -101,6 +108,11 @@ Game.prototype = {
         this.config.postBoot();
 
         this.loop.start(this.step.bind(this));
+
+        VisibilityHandler(this.events);
+
+        this.events.on('DOCUMENT_HIDDEN', this.onHidden.bind(this));
+        this.events.on('DOCUMENT_VISIBLE', this.onVisible.bind(this));
     },
 
     step: function (time, delta)
@@ -132,6 +144,18 @@ Game.prototype = {
         }
 
         renderer.postRender();
+    },
+
+    onHidden: function ()
+    {
+        console.log('Game.hidden');
+        this.loop.pause();
+    },
+
+    onVisible: function ()
+    {
+        console.log('Game.visible');
+        this.loop.resume();
     }
 
 };

v3/src/boot/TimeStep.js

@@ -50,6 +50,8 @@ var TimeStep = function (game, config)
     this.lastTime = 0;
     this.frame = 0;
 
+    this._pauseTime = 0;
+
     this.delta = 0;
     this.deltaIndex = 0;
     this.deltaHistory = [];
@@ -60,37 +62,60 @@ TimeStep.prototype.constructor = TimeStep;
 
 TimeStep.prototype = {
 
-    start: function (callback)
+    //  Called when the visibility API says the game is 'hidden' (tab switch, etc)
+    pause: function ()
     {
-        if (this.started)
-        {
-            return this;
-        }
+        console.log('TimeStep.pause');
 
-        this.started = true;
-        this.running = true;
+        this._pauseTime = window.performance.now();
+    },
+
+    //  Called when the visibility API says the game is 'visible' again (tab switch, etc)
+    resume: function ()
+    {
+        this.resetDelta();
+
+        this.startTime += this.time - this._pauseTime;
 
+        console.log('TimeStep.resume - paused for', (this.time - this._pauseTime));
+    },
+
+    resetDelta: function ()
+    {
         var now = window.performance.now();
 
         this.time = now;
-        this.startTime = now;
         this.lastTime = now;
         this.nextFpsUpdate = now + 1000;
         this.framesThisSecond = 0;
         this.frame = 0;
 
         //  Pre-populate smoothing array
 
-        var history = [];
-
         for (var i = 0; i < this.deltaSmoothingMax; i++)
         {
-            history[i] = this._target;
+            this.deltaHistory[i] = this._target;
         }
 
         this.delta = 0;
         this.deltaIndex = 0;
-        this.deltaHistory = history;
+    },
+
+    start: function (callback)
+    {
+        if (this.started)
+        {
+            return this;
+        }
+
+        this.started = true;
+        this.running = true;
+
+        this.deltaHistory = [];
+
+        this.resetDelta();
+
+        this.startTime = window.performance.now();
 
         this.callback = callback;
 

v3/src/boot/VisibilityHandler.js

@@ -0,0 +1,54 @@
+var Event = require('../events/Event');
+
+var VisibilityHandler = function (eventDispatcher)
+{
+    var hiddenVar;
+
+    if (document.hidden !== undefined)
+    {
+        hiddenVar = 'visibilitychange';
+    }
+    else
+    {
+        var vendors = [ 'webkit', 'moz', 'ms' ];
+
+        vendors.forEach(function (prefix)
+        {
+            if (document[prefix + 'Hidden'] !== undefined)
+            {
+                document.hidden = function ()
+                {
+                    return document[prefix + 'Hidden'];
+                };
+
+                hiddenVar = prefix + 'visibilitychange';
+            }
+
+        });
+    }
+
+    var onChange = function (event)
+    {
+        if (document.hidden || event.type === 'pause')
+        {
+            eventDispatcher.dispatch(new Event('DOCUMENT_HIDDEN'));
+        }
+        else
+        {
+            eventDispatcher.dispatch(new Event('DOCUMENT_VISIBLE'));
+        }
+    };
+
+    //  Does browser support it?
+    //  If not (like in IE9 or old Android) we need to fall back to blur / focus
+    if (hiddenVar)
+    {
+        document.addEventListener(hiddenVar, onChange, false);
+    }
+    else
+    {
+        console.log('Fallback TODO');
+    }
+};
+
+module.exports = VisibilityHandler;

v3/src/checksum.js

@@ -1,4 +1,4 @@
 var CHECKSUM = {
-build: 'f039f9d0-30d8-11e7-9c0c-c51a7bcebb13'
+build: 'e3a798e0-344c-11e7-937e-fdfcde3f0dd0'
 };
 module.exports = CHECKSUM;