Added TickerLoop and made it optional via config.

Author: photonstorm

v3/src/boot/Config.js

@@ -70,6 +70,8 @@ var Config = function (config)
     this.preBoot = GetValue(config, 'callbacks.preBoot', NOOP);
     this.postBoot = GetValue(config, 'callbacks.postBoot', NOOP);
 
+    this.useTicker = GetValue(config, 'useTicker', false);
+
     //  Default / Missing Images
     var pngPrefix = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAg';
 

v3/src/boot/Game.js

@@ -12,6 +12,7 @@ var AddToDOM = require('../dom/AddToDOM');
 var DOMContentLoaded = require('../dom/DOMContentLoaded');
 
 var MainLoop = require('./MainLoop');
+var TickerLoop = require('./TickerLoop');
 var CreateRenderer = require('./CreateRenderer');
 var GlobalInputManager = require('../input/GlobalInputManager');
 var GlobalStateManager = require('../state/GlobalStateManager');
@@ -70,7 +71,14 @@ var Game = function (config)
     * @property {Phaser.MainLoop} mainloop - Main Loop handler.
     * @protected
     */
-    this.mainloop = new MainLoop(this, this.config.fps);
+    if (this.config.useTicker)
+    {
+        this.loop = new TickerLoop(this, this.config.fps);
+    }
+    else
+    {
+        this.loop = new MainLoop(this, this.config.fps);
+    }
 
     //  Wait for the DOM Ready event, then call boot.
     DOMContentLoaded(this.boot.bind(this));
@@ -105,7 +113,38 @@ Game.prototype = {
 
         this.config.postBoot();
 
-        this.mainloop.start();
+        this.loop.start(!!this.config.forceSetTimeOut, this.step.bind(this));
+    },
+
+    step: function (time)
+    {
+        var active = this.state.active;
+        var renderer = this.renderer;
+
+        //  Global Managers (Time, Input, etc)
+
+        this.input.update(time);
+
+        //  States
+
+        for (var i = 0; i < active.length; i++)
+        {
+            active[i].state.sys.step(time);
+        }
+
+        //  Render
+
+        // var interpolation = this.frameDelta / this.timestep;
+
+        renderer.preRender();
+
+        //  This uses active.length, in case state.update removed the state from the active list
+        for (i = 0; i < active.length; i++)
+        {
+            active[i].state.sys.render(0, renderer);
+        }
+
+        renderer.postRender();
     }
 
 };

v3/src/boot/TickerLoop.js

@@ -1,3 +1,4 @@
+var NOOP = require('../utils/NOOP');
 var RequestAnimationFrame = require('../dom/RequestAnimationFrame');
 
 var TickerLoop = function (game, framerate)
@@ -11,12 +12,16 @@ var TickerLoop = function (game, framerate)
 
     this.lastUpdate = 0;
 
+    this.gap = 1 / (framerate || 60);
     this.startTime = 0;
     this.elapsed = 0;
     this.time = 0;
     this.nextTime = 0;
     this.frame = 0;
-    this.fps = false;
+    this.overlap = 0;
+    this.fps = framerate;
+
+    this.callback = NOOP;
 
     this.lagThreshold = 500;
     this.adjustedLag = 33;
@@ -28,7 +33,12 @@ TickerLoop.prototype.constructor = TickerLoop;
 
 TickerLoop.prototype = {
 
-    start: function (fps, useRAF)
+    toString: function ()
+    {
+        return 'time: ' + this.time + ' elapsed: ' + this.elapsed + ' overlap: ' + this.overlap;
+    },
+
+    start: function (useRAF, callback)
     {
         if (this.started)
         {
@@ -41,13 +51,14 @@ TickerLoop.prototype = {
         this.startTime = Date.now();
         this.lastUpdate = Date.now();
 
-        this.useRAF = !!this.game.config.forceSetTimeOut;
+        this.useRAF = useRAF;
+        this.callback = callback;
 
         this.raf.start(this.step.bind(this), useRAF);
     },
 
-    step: function (manual) {
-
+    step: function (manual)
+    {
         var elapsed = Date.now() - this.lastUpdate;
 
         if (elapsed > this.lagThreshold)
@@ -57,44 +68,22 @@ TickerLoop.prototype = {
 
         this.lastUpdate += elapsed;
 
-        this.time = (this.lastUpdate - this.startTime) / 1000;
+        var time = (this.lastUpdate - this.startTime) / 1000;
 
         this.elapsed = elapsed;
 
-        var overlap = this.time - this.nextTime;
+        var overlap = time - this.nextTime;
 
-        // var elapsed = _getTime() - _lastUpdate,
-        //     overlap, dispatch;
-        // if (elapsed > _lagThreshold) {
-        //     _startTime += elapsed - _adjustedLag;
-        // }
-        // _lastUpdate += elapsed;
-        // _self.time = (_lastUpdate - _startTime) / 1000;
-        // overlap = _self.time - _nextTime;
+        this.overlap = overlap;
 
-        if (!this.fps || overlap > 0 || manual)
+        this.time = time;
+
+        if (overlap > 0 || manual)
         {
             this.frame++;
-            this.nextTime += overlap + (overlap >= this.gap ? 0.004 : this.gap - overlap);
+            this.nextTime += overlap + ((overlap >= this.gap) ? 0.004 : this.gap - overlap);
+            this.callback(elapsed);
         }
-
-        // if (!manual)
-        // {
-        // }
-
-        // if (!_fps || overlap > 0 || manual === true) {
-        //     _self.frame++;
-        //     _nextTime += overlap + (overlap >= _gap ? 0.004 : _gap - overlap);
-        //     dispatch = true;
-        // }
-        // if (manual !== true) { //make sure the request is made before we dispatch the "tick" event so that timing is maintained. Otherwise, if processing the "tick" requires a bunch of time (like 15ms) and we're using a setTimeout() that's based on 16.7ms, it'd technically take 31.7ms between frames otherwise.
-        //     _id = _req(_tick);
-        // }
-        // if (dispatch) {
-        //     _self.dispatchEvent(_tickWord);
-        // }
-
-
     },
 
     tick: function ()
@@ -133,7 +122,7 @@ TickerLoop.prototype = {
             this.lastUpdate = Date.now() - this.lagThreshold + 5;
         }
 
-        this.raf.start(this.step.bind(this), useRAF);
+        this.raf.start(this.step.bind(this), this.useRAF);
 
         this.running = true;
 

v3/src/checksum.js

@@ -1,4 +1,4 @@
 var CHECKSUM = {
-build: '9ef13fb0-2a8f-11e7-ae43-2f2e7e8ba14e'
+build: '8967dbb0-2ae2-11e7-aa50-67ab1824371c'
 };
 module.exports = CHECKSUM;

v3/src/state/Systems.js

@@ -114,6 +114,20 @@ Systems.prototype = {
         this.state.data = this.data;
     },
 
+    step: function (time)
+    {
+        var list = this.children.list;
+
+        for (var i = 0; i < list.length; i++)
+        {
+            list[i].preUpdate(time);
+        }
+
+        this.cameras.update(time);
+
+        this.state.update.call(this.state, time);
+    },
+
     //  Called just once per frame, regardless of speed
     begin: function (timestamp, frameDelta)
     {