Implemented a State based MainLoop system, with fully split logic / render cycles and frame rate. Each State can now set its own frame rate. Added in more Camera commands, moved the Tween Manager into the State Systems, and started work on the new heavily reduced Game object.

Author: photonstorm

build/phaser3-config.php

@@ -67,6 +67,7 @@
     <script src="$path/src/states/StateManager.js"></script>
     <script src="$path/src/states/StateSettings.js"></script>
     <script src="$path/src/states/StateSystems.js"></script>
+    <script src="$path/src/states/MainLoop.js"></script>
 
     <script src="$path/src/core/Signal.js"></script>
     <script src="$path/src/core/SignalBinding.js"></script>

src/camera/Camera.js

@@ -17,10 +17,8 @@
 * @param {number} width - The width of the view rectangle
 * @param {number} height - The height of the view rectangle
 */
-Phaser.Camera = function (state, x, y, width, height)
+Phaser.Camera = function (state, x, y, viewportWidth, viewportHeight)
 {
-    console.log('Camera');
-
     /**
      * The State that this Camera belongs to. A Camera can only belong to one State, and a State only
      * has one Camera.
@@ -33,9 +31,9 @@ Phaser.Camera = function (state, x, y, width, height)
     */
     this.game = state.game;
 
-    this.width = width;
+    this.viewportWidth = viewportWidth;
 
-    this.height = height;
+    this.viewportHeight = viewportHeight;
 
     this.transform = new Phaser.Component.Transform(this, x, y);
 
@@ -78,9 +76,9 @@ Phaser.Camera.prototype = {
         // var vh = this.view.bottom + this._shake.y;
 
         var vx = this.x;
-        var vw = this.x + this.width;
+        var vw = this.x + this.viewportWidth;
         var vy = this.y;
-        var vh = this.y + this.height;
+        var vh = this.y + this.viewportHeight;
 
         //  Make sure we didn't go outside the cameras bounds
         if (vx <= this.bounds.x * this.scale.x)
@@ -131,8 +129,7 @@ Phaser.Camera.prototype = {
             }
         }
 
-    },
-
+    }
 
 };
 
@@ -180,7 +177,7 @@ Object.defineProperties(Phaser.Camera.prototype, {
 
         get: function ()
         {
-            return this.transform._posX + (this.width * this.transform._scaleX);
+            return this.transform._posX + (this.viewportWidth * this.transform._scaleX);
         }
 
     },
@@ -191,7 +188,7 @@ Object.defineProperties(Phaser.Camera.prototype, {
 
         get: function ()
         {
-            return this.transform._posY + (this.height * this.transform._scaleY);
+            return this.transform._posY + (this.viewportHeight * this.transform._scaleY);
         }
 
     },

src/components/Transform.js

@@ -16,10 +16,12 @@ Phaser.Component.Transform = function (gameObject, x, y, scaleX, scaleY)
     if (scaleX === undefined) { scaleX = 1; }
     if (scaleY === undefined) { scaleY = 1; }
 
-    this.game = gameObject.game;
-
     this.gameObject = gameObject;
 
+    this.state = gameObject.state;
+
+    this.game = gameObject.state.game;
+
     //  Local Transform
     //  a = scale X
     //  b = shear Y
@@ -56,12 +58,12 @@ Phaser.Component.Transform = function (gameObject, x, y, scaleX, scaleY)
 
     this._dirty = true;
 
-    this.game.updates.add(this);
+    this.state.sys.updates.add(this);
 
     //  The parent Transform (NOT the parent GameObject, although very often they are related)
     this.parent = null;
 
-    //  Any child Tranforms of this one - note that they don't have to belong to Game Objects
+    //  Any child Transforms of this one - note that they don't have to belong to Game Objects
     //  that are children of the owner of this Transform
     this.children = [];
 };
@@ -515,6 +517,11 @@ Phaser.Component.Transform.prototype = {
 
     },
 
+    getVertexData: function (interpolationPercentage)
+    {
+        return this.glVertextData;
+    },
+
     cloneVertexData: function ()
     {
         var src = this.glVertextData;
@@ -778,7 +785,7 @@ Object.defineProperties(Phaser.Component.Transform.prototype, {
             {
                 if (!this._dirty)
                 {
-                    this.game.updates.add(this);
+                    this.state.sys.updates.add(this);
                 }
 
                 this._dirty = true;

src/components/UpdateManager.js

@@ -9,9 +9,11 @@
 *
 * @class
 */
-Phaser.UpdateManager = function (game)
+Phaser.UpdateManager = function (state)
 {
-    this.game = game;
+    this.state = state;
+
+    this.game = state.game;
 
     this.list = [];