Experimenting with new MainLoop + position interpolation. (reverted from commit e49d45e278)

build/config.php

@@ -134,7 +134,6 @@ EOL;
     <script src="$path/src/core/FlexGrid.js"></script>
     <script src="$path/src/core/FlexLayer.js"></script>
     <script src="$path/src/core/ScaleManager.js"></script>
-    <script src="$path/src/core/MainLoop.js"></script>
     <script src="$path/src/core/Game.js"></script>
 
     <script src="$path/src/input/Input.js"></script>
@@ -297,10 +296,10 @@ EOL;
     }
 
     echo <<<EOL
-    <script src="$path/src/utils/Device.js"></script>
+    <script src="$path/src/system/Device.js"></script>
-    <script src="$path/src/utils/DOM.js"></script>
+    <script src="$path/src/system/DOM.js"></script>
-    <script src="$path/src/utils/Canvas.js"></script>
+    <script src="$path/src/system/Canvas.js"></script>
-    <script src="$path/src/utils/RequestAnimationFrame.js"></script>
+    <script src="$path/src/system/RequestAnimationFrame.js"></script>
 
     <script src="$path/src/math/Math.js"></script>
     <script src="$path/src/math/RandomDataGenerator.js"></script>

src/core/Game.js

@@ -144,17 +144,11 @@ Phaser.Game = function (width, height, renderer, parent, state, transparent, ant
     */
     this.isRunning = false;
 
-    /**
-    * @property {Phaser.MainLoop} mainloop - Automatically handles the core game loop via requestAnimationFrame or setTimeout.
-    * @protected
-    */
-    this.mainloop = null;
-
     /**
     * @property {Phaser.RequestAnimationFrame} raf - Automatically handles the core game loop via requestAnimationFrame or setTimeout
     * @protected
     */
-    // this.raf = null;
+    this.raf = null;
 
     /**
     * @property {Phaser.GameObjectFactory} add - Reference to the Phaser.GameObjectFactory.
@@ -589,7 +583,6 @@ Phaser.Game.prototype = {
 
         this.isRunning = true;
 
-        /*
         if (this.config && this.config['forceSetTimeOut'])
         {
             this.raf = new Phaser.RequestAnimationFrame(this, this.config['forceSetTimeOut']);
@@ -600,7 +593,6 @@ Phaser.Game.prototype = {
         }
 
         this._kickstart = true;
-        */
 
         if (window['focus'])
         {
@@ -610,11 +602,7 @@ Phaser.Game.prototype = {
             }
         }
 
-        this.mainloop = new Phaser.MainLoop(this);
+        this.raf.start();
-
-        this.mainloop.start();
-
-        // this.raf.start();
 
     },
 

src/core/MainLoop.js

@@ -1,342 +0,0 @@
-Phaser.MainLoop = function (game, framerate, forceSetTimeOut) {
-
-    if (framerate === undefined) { framerate = 60; }
-    if (forceSetTimeOut === undefined) { forceSetTimeOut = false; }
-
-    this.game = game;
-
-    //  Move to external file once tested
-    /*
-    this.getTime = function () { return Date.now; };
-
-    if (window.performance)
-    {
-        if (window.performance.now)
-        {
-            this.getTime = window.performance.now;
-        }
-        else if (window.performance.webkitNow)
-        {
-            this.getTime = window.performance.webkitNow;
-        }
-    }
-    */
-
-    this.timestep = 1000 / framerate;
-    this.physicsStep = 1 / framerate;
-
-    // The cumulative amount of in-app time that hasn't been simulated yet.
-    this.frameDelta = 0;
-
-    // The timestamp in milliseconds of the last time the main loop was run.
-    // Used to compute the time elapsed between frames.
-    this.lastFrameTimeMs = 0;
-
-    // An exponential moving average of the frames per second.
-    this.framerate = framerate;
-    this.fps = framerate;
-
-    // The timestamp (in milliseconds) of the last time the `fps` moving
-    // average was updated.
-    this.lastFpsUpdate = 0;
-
-    // The number of frames delivered in the current second.
-    this.framesThisSecond = 0;
-
-    // The number of times update() is called in a given frame. This is only
-    // relevant inside of animate(), but a reference is held externally so that
-    // this variable is not marked for garbage collection every time the main
-    // loop runs.
-    this.numUpdateSteps = 0;
-
-    // The minimum amount of time in milliseconds that must pass since the last
-    // frame was executed before another frame can be executed. The
-    // multiplicative inverse caps the FPS (the default of zero means there is
-    // no cap).
-    this.minFrameDelay = 0;
-
-    // Whether the main loop is running.
-    this.running = false;
-
-    // `true` if `MainLoop.start()` has been called and the most recent time it
-    // was called has not been followed by a call to `MainLoop.stop()`. This is
-    // different than `running` because there is a delay of a few milliseconds
-    // after `MainLoop.start()` is called before the application is considered
-    // "running." This delay is due to waiting for the next frame.
-    this.started = false;
-
-    // Whether the simulation has fallen too far behind real time.
-    // Specifically, `panic` will be set to `true` if too many updates occur in
-    // one frame. This is only relevant inside of animate(), but a reference is
-    // held externally so that this variable is not marked for garbage
-    // collection every time the main loop runs.
-    this.panic = false;
-
-    /**
-    * @property {boolean} _isSetTimeOut  - true if the browser is using setTimeout instead of raf.
-    * @private
-    */
-    this._isSetTimeOut = false;
-
-    /**
-    * @property {number} _handleID - The callback ID used when calling cancel.
-    * @private
-    */
-    this._handleID = null;
-
-};
-
-Phaser.MainLoop.prototype = {
-
-    start: function () {
-
-        if (this.started)
-        {
-            return this;
-        }
-
-        this.started = true;
-        this.running = true;
-
-        //  draw once?
-
-        this.lastFrameTimeMs = window.performance.now();
-        this.lastFpsUpdate = window.performance.now();
-        this.framesThisSecond = 0;
-
-        if (!window.requestAnimationFrame || this.forceSetTimeOut)
-        {
-            // var _this = this;
-
-            // The function that runs the main loop. The unprefixed version of
-            // `window.requestAnimationFrame()` is available in all modern browsers
-            // now, but node.js doesn't have it, so fall back to timers. The polyfill
-            // is adapted from the MIT-licensed
-            // https://github.com/underscorediscovery/realtime-multiplayer-in-html5
-
-
-            /*
-            this.raf = window.requestAnimationFrame || (function() {
-                var lastTimestamp = Date.now(),
-                    now,
-                    timeout;
-                return function(callback) {
-                    now = Date.now();
-                    // The next frame should run no sooner than the simulation allows,
-                    // but as soon as possible if the current frame has already taken
-                    // more time to run than is simulated in one timestep.
-                    timeout = Math.max(0, _this.timestep - (now - lastTimestamp));
-                    lastTimestamp = now + timeout;
-                    return setTimeout(function() {
-                        callback(now + timeout);
-                    }, timeout);
-                };
-            })();
-            */
-            this._isSetTimeOut = true;
-
-            this._handleID = window.setTimeout(this.step.bind(this), 0);
-        }
-        else
-        {
-            this._isSetTimeOut = false;
-
-            this._handleID = window.requestAnimationFrame(this.step.bind(this));
-        }
-
-    },
-
-    step: function (timestamp) {
-
-        // console.log(timestamp);
-        // debugger;
-
-        // Throttle the frame rate (if minFrameDelay is set to a non-zero value by
-        // `MainLoop.setMaxAllowedFPS()`).
-        // if (timestamp < this.lastFrameTimeMs + this.minFrameDelay)
-        // {
-            // Run the loop again the next time the browser is ready to render.
-            // this._handleID = window.requestAnimationFrame(this.step.bind(this));
-            // return;
-        // }
-
-        // frameDelta is the cumulative amount of in-app time that hasn't been
-        // simulated yet. Add the time since the last frame. We need to track total
-        // not-yet-simulated time (as opposed to just the time elapsed since the
-        // last frame) because not all actually elapsed time is guaranteed to be
-        // simulated each frame. See the comments below for details.
-        this.frameDelta += timestamp - this.lastFrameTimeMs;
-        this.lastFrameTimeMs = timestamp;
-
-        // Run any updates that are not dependent on time in the simulation. See
-        // `MainLoop.setBegin()` for additional details on how to use this.
-
-        //  BEGIN ---------------------------------------------------------------
-
-        this.begin(timestamp);
-
-        //  UPDATE ---------------------------------------------------------------
-
-        // Update the estimate of the frame rate, `fps`. Every second, the number
-        // of frames that occurred in that second are included in an exponential
-        // moving average of all frames per second, with an alpha of 0.25. This
-        // means that more recent seconds affect the estimated frame rate more than
-        // older seconds.
-        if (timestamp > this.lastFpsUpdate + 1000)
-        {
-            // Compute the new exponential moving average with an alpha of 0.25.
-            // Using constants inline is okay here.
-            this.fps = 0.25 * this.framesThisSecond + 0.75 * this.fps;
-
-            this.lastFpsUpdate = timestamp;
-            this.framesThisSecond = 0;
-        }
-
-        this.framesThisSecond++;
-
-        this.numUpdateSteps = 0;
-
-        while (this.frameDelta >= this.timestep)
-        {
-            this.update(this.timestep);
-
-            this.frameDelta -= this.timestep;
-
-            if (++this.numUpdateSteps >= 240)
-            {
-                this.panic = true;
-                break;
-            }
-        }
-
-        //  RENDER ---------------------------------------------------------------
-
-        this.render(this.frameDelta / this.timestep);
-
-        //  END ---------------------------------------------------------------
-
-        // Run any updates that are not dependent on time in the simulation.
-        // this.end(this.fps, this.panic);
-
-        this.panic = false;
-
-        this._handleID = window.requestAnimationFrame(this.step.bind(this));
-
-    },
-
-    begin: function (timestamp) {
-
-        this.game.time.update(timestamp);
-
-        this.game.scale.preUpdate(timestamp, this.frameDelta);
-        this.game.debug.preUpdate(timestamp, this.frameDelta);
-        this.game.camera.preUpdate(timestamp, this.frameDelta);
-        this.game.physics.preUpdate(timestamp, this.frameDelta);
-        this.game.state.preUpdate(timestamp, this.frameDelta);
-        this.game.plugins.preUpdate(timestamp, this.frameDelta);
-        this.game.stage.preUpdate(timestamp, this.frameDelta);
-
-    },
-
-    update: function (timestep) {
-
-        this.game.state.update(timestep);
-        this.game.stage.update(timestep);
-        this.game.tweens.update(timestep);
-        this.game.sound.update(timestep);
-        this.game.input.update(timestep);
-        this.game.physics.update(timestep);
-        this.game.particles.update(timestep);
-        this.game.plugins.update(timestep);
-
-        this.game.stage.postUpdate(timestep);
-        this.game.plugins.postUpdate(timestep);
-
-        this.game.stage.updateTransform();
-        // this.game.time.update(timestamp);
-
-    },
-
-    render: function (dt) {
-
-        this.game.renderer.renderSession.interpolation = dt;
-
-        // this.game.stage.updateTransform();
-
-        this.game.state.preRender(dt);
-
-        if (this.game.renderType !== Phaser.HEADLESS)
-        {
-            this.game.renderer.render(this.game.stage);
-
-            this.game.plugins.render(dt);
-
-            this.game.state.render(dt);
-        }
-
-        this.game.plugins.postRender(dt);
-
-    },
-
-    stop: function () {
-
-        this.running = false;
-        this.started = false;
-
-        if (this._isSetTimeOut)
-        {
-            clearTimeout(this._handleID);
-        }
-        else
-        {
-            window.cancelAnimationFrame(this._handleID);
-        }
-
-        return this;
-
-    },
-
-    resetFrameDelta: function () {
-
-        var oldFrameDelta = this.frameDelta;
-
-        this.frameDelta = 0;
-
-        return oldFrameDelta;
-
-    }
-
-};
-
-/**
-* @name Phaser.MainLoop#maxFPS
-* @property {number} maxFPS - The maximum frame rate.
-*/
-Object.defineProperty(Phaser.MainLoop.prototype, 'maxFPS', {
-
-    get: function() {
-
-        return 1000 / this.minFrameDelay;
-
-    },
-
-    set: function (value) {
-
-        if (fps === 0)
-        {
-            this.stop();
-        }
-        else
-        {
-            this.minFrameDelay = 1000 / value;
-        }
-
-    }
-
-});
-
-Phaser.MainLoop.prototype.constructor = Phaser.MainLoop;
-
-Phaser.NOOP = function () {
-    //  No-operation
-};

src/gameobjects/components/Core.js

@@ -101,9 +101,6 @@ Phaser.Component.Core.preUpdate = function () {
     this.previousPosition.set(this.world.x, this.world.y);
     this.previousRotation = this.rotation;
 
-    //  TEST
-    this.prevPosition.set(this.worldPosition.x, this.worldPosition.y);
-
     if (!this.exists || !this.parent.exists)
     {
         this.renderOrderID = -1;

src/pixi/display/DisplayObject.js

@@ -28,8 +28,6 @@ PIXI.DisplayObject = function() {
     */
     this.position = new PIXI.Point(0, 0);
 
-    this.interpolate = true;
-
     /**
     * The scale of this DisplayObject. A scale of 1:1 represents the DisplayObject
     * at its default size. A value of 0.5 would scale this DisplayObject by half, and so on.
@@ -173,8 +171,6 @@ PIXI.DisplayObject = function() {
     */
     this.worldPosition = new PIXI.Point(0, 0);
 
-    this.prevPosition = new PIXI.Point(0, 0);
-
     /**
     * The global scale of this DisplayObject.
     * 

src/pixi/display/Sprite.js

@@ -337,13 +337,6 @@ PIXI.Sprite.prototype._renderWebGL = function(renderSession, matrix)
         wt = matrix;
     }
 
-    //  if interpolation
-    if (this.interpolate)
-    {
-        wt.tx = this.prevPosition.x + (this.worldPosition.x - this.prevPosition.x) * renderSession.interpolation;
-        wt.ty = this.prevPosition.y + (this.worldPosition.y - this.prevPosition.y) * renderSession.interpolation;
-    }
-
     //  A quick check to see if this element has a mask or a filter.
     if (this._mask || this._filters)
     {
@@ -449,13 +442,6 @@ PIXI.Sprite.prototype._renderCanvas = function(renderSession, matrix)
         var tx = (wt.tx * renderSession.resolution) + renderSession.shakeX;
         var ty = (wt.ty * renderSession.resolution) + renderSession.shakeY;
 
-        //  if interpolation
-        if (this.interpolate)
-        {
-            tx = this.prevPosition.x + (this.worldPosition.x - this.prevPosition.x) * renderSession.interpolation;
-            ty = this.prevPosition.y + (this.worldPosition.y - this.prevPosition.y) * renderSession.interpolation;
-        }
-
         //  Allow for pixel rounding
         if (renderSession.roundPixels)
         {

src/polyfills.js

@@ -151,50 +151,3 @@ if (!window.console)
     window.console.log = window.console.assert = function(){};
     window.console.warn = window.console.assert = function(){};
 }
-
-/*
- * window.performance polyfill for IE9 and other lesser browsers.
- * Based on code by Paul Irish (MIT)
- */
-
-(function(){
-
-    if ("performance" in window === false)
-    {
-        window.performance = {};
-    }
-
-    if ("now" in window.performance === false)
-    {
-        var nowOffset = Date.now();
-
-        if (performance.timing && performance.timing.navigationStart)
-        {
-            nowOffset = performance.timing.navigationStart;
-        }
-
-        window.performance.now = function now() {
-            return Date.now() - nowOffset;
-        }
-
-    }
-
-})();
-
-/*
- * window.requestAnimationFrame polyfill.
- */
-
-(function(){
-
-    if (!window.requestAnimationFrame)
-    {
-        ['ms', 'moz', 'webkit', 'o'].forEach(function(prefix) {
-
-            window.requestAnimationFrame = window[prefix + 'RequestAnimationFrame'];
-            window.cancelAnimationFrame = window[prefix + 'CancelAnimationFrame'];
-
-        });
-    }
-
-})();

src/time/Time.js

@@ -403,7 +403,6 @@ Phaser.Time.prototype = {
         // elapsed time between previous call and now - this could be a high resolution value
         this.elapsed = this.now - this.prevTime;
 
-        /*
         if (this.game.raf._isSetTimeOut)
         {
             // console.log('Time isSet', this._desiredFps, 'te', this.timeExpected, 'time', time);
@@ -416,7 +415,6 @@ Phaser.Time.prototype = {
 
             // console.log('Time expect', this.timeExpected);
         }
-        */
 
         if (this.advancedTiming)
         {