Fixed issue with the camera being slightly out of sync with 'fixedToCamera' sprites. Also fixed 'jitter' issue with camera targets.

Author: photonstorm

examples/wip/rabbit map.js

@@ -34,6 +34,9 @@ console.log(' --- state create start ---');
         game.step();
     });
 
+    // game.stage.backgroundColor = '#124184';
+
+
     marker = new Phaser.Line(256, 0, 256, 600);
 
     map = game.add.tilemap('map');
@@ -48,22 +51,21 @@ console.log(' --- state create start ---');
 
     // layer.debug = true;
 
-    // layer.resizeWorld();
+    layer.resizeWorld();
 
-    game.physics.gravity.y = 200;
+    // game.physics.gravity.y = 200;
 
 
     sprite = game.add.sprite(100, 300, 'phaser'); // up test
 
     // sprite = game.add.sprite(200, 240, 'phaser'); // 3-block corner test
 
-    sprite.debug = true;
-
-    game.stepping = true;
+    // sprite.debug = true;
+    // game.stepping = true;
 
     // sprite.body.velocity.y = -300;
 
-    sprite.body.velocity.y = 200;
+    // sprite.body.velocity.y = 200;
 
 
     // sprite.anchor.setTo(0.5, 0.5);
@@ -79,7 +81,7 @@ console.log(' --- state create start ---');
 
     // sprite.angle = 35;
 
-    // game.camera.follow(sprite);
+    game.camera.follow(sprite);
 
     // game.input.onDown.add(getIt, this);
 
@@ -89,7 +91,7 @@ console.log(' --- state create start ---');
 
 function update() {
 
-console.log(' --- state update start ---');
+// console.log(' --- state update start ---');
 
 /*
     if (cursors.left.isDown)
@@ -114,8 +116,8 @@ console.log(' --- state update start ---');
 
     // sprite.body.velocity.y = -300;
 
-    // sprite.body.velocity.x = 0;
-    // sprite.body.velocity.y = 0;
+    sprite.body.velocity.x = 0;
+    sprite.body.velocity.y = 0;
     // sprite.body.angularVelocity = 0;
 
     // sprite.body.acceleration.x = 0;
@@ -157,8 +159,8 @@ console.log(' --- state update start ---');
 
     if (cursors.up.isDown)
     {
-        console.log('cursor up');
-        sprite.body.velocity.y = -300;
+        // console.log('cursor up');
+        sprite.body.velocity.y = -200;
     }
     else if (cursors.down.isDown)
     {
@@ -167,14 +169,13 @@ console.log(' --- state update start ---');
 
     if (cursors.left.isDown)
     {
-        sprite.body.velocity.x = -100;
+        sprite.body.velocity.x = -200;
     }
     else if (cursors.right.isDown)
     {
-        sprite.body.velocity.x = 100;
+        sprite.body.velocity.x = 200;
     }
 
-
 }
 
 function render() {

src/core/Camera.js

@@ -39,7 +39,7 @@ Phaser.Camera = function (game, id, x, y, width, height) {
     * Camera view. 
     * The view into the world we wish to render (by default the game dimensions).
     * The x/y values are in world coordinates, not screen coordinates, the width/height is how many pixels to render.
-    * Objects outside of this view are not rendered (unless set to ignore the Camera, i.e. UI?).
+    * Objects outside of this view are not rendered if set to camera cull.
     * @property {Phaser.Rectangle} view
     */
     this.view = new Phaser.Rectangle(x, y, width, height);
@@ -86,6 +86,9 @@ Phaser.Camera = function (game, id, x, y, width, height) {
     */
     this._edge = 0;
 
+    /**
+    * @property {PIXI.DisplayObject} displayObject - The display object to which all game objects are added. Set by World.boot
+    */
     this.displayObject = null;
 
 };
@@ -203,35 +206,36 @@ Phaser.Camera.prototype = {
 
     },
 
+    /**
+    * Internal method
+    * @method Phaser.Camera#updateTarget
+    * @private
+    */
     updateTarget: function () {
 
         if (this.deadzone)
         {
-            // this._edge = this.target.bounds.x - this.deadzone.x;
             this._edge = this.target.x - this.deadzone.x;
 
             if (this.view.x > this._edge)
             {
                 this.view.x = this._edge;
             }
 
-            // this._edge = this.target.bounds.right - this.deadzone.x - this.deadzone.width;
             this._edge = this.target.x + this.target.width - this.deadzone.x - this.deadzone.width;
 
             if (this.view.x < this._edge)
             {
                 this.view.x = this._edge;
             }
 
-            // this._edge = this.target.bounds.y - this.deadzone.y;
             this._edge = this.target.y - this.deadzone.y;
 
             if (this.view.y > this._edge)
             {
                 this.view.y = this._edge;
             }
 
-            // this._edge = this.target.bounds.bottom - this.deadzone.y - this.deadzone.height;
             this._edge = this.target.y + this.target.height - this.deadzone.y - this.deadzone.height;
 
             if (this.view.y < this._edge)
@@ -246,6 +250,10 @@ Phaser.Camera.prototype = {
 
     },
 
+    /**
+    * Update the Camera bounds to match the game world.
+    * @method Phaser.Camera#setBoundsToWorld
+    */
     setBoundsToWorld: function () {
 
         this.bounds.setTo(this.game.world.bounds.x, this.game.world.bounds.y, this.game.world.bounds.width, this.game.world.bounds.height);
@@ -268,10 +276,10 @@ Phaser.Camera.prototype = {
             this.view.x = this.bounds.x;
         }
 
-        if (this.view.x > this.bounds.right - this.width)
+        if (this.view.right > this.bounds.right)
         {
             this.atLimit.x = true;
-            this.view.x = (this.bounds.right - this.width) + 1;
+            this.view.x = this.bounds.right - this.width;
         }
 
         if (this.view.y < this.bounds.top)
@@ -280,10 +288,10 @@ Phaser.Camera.prototype = {
             this.view.y = this.bounds.top;
         }
 
-        if (this.view.y > this.bounds.bottom - this.height)
+        if (this.view.bottom > this.bounds.bottom)
         {
             this.atLimit.y = true;
-            this.view.y = (this.bounds.bottom - this.height) + 1;
+            this.view.y = this.bounds.bottom - this.height;
         }
 
         this.view.floor();

src/core/Game.js

@@ -592,7 +592,7 @@ Phaser.Game.prototype = {
                 }
 
                 this.plugins.preUpdate();
-        console.log('world preUpdate');
+        // console.log('world preUpdate');
                 this.world.preUpdate();
 
                 this.stage.update();
@@ -606,7 +606,7 @@ Phaser.Game.prototype = {
                 this.particles.update();            
                 this.plugins.update();
 
-        console.log('world postUpdate');
+        // console.log('world postUpdate');
                 this.world.postUpdate();
                 this.plugins.postUpdate();
             }

src/core/World.js

@@ -61,7 +61,8 @@ Phaser.World.prototype.boot = function () {
 }
 
 /**
-* This is called automatically every frame, and is where main logic happens.
+* This is called automatically after the plugins preUpdate and before the State.update.
+* Most objects have preUpdate methods and it's where initial movement, drawing and calculations are done.
 * 
 * @method Phaser.World#update
 */
@@ -90,7 +91,8 @@ Phaser.World.prototype.preUpdate = function () {
 }
 
 /**
-* This is called automatically every frame, and is where main logic happens.
+* This is called automatically after the State.update, but before particles or plugins update.
+* Most objects won't have an update method set unless explicitly given one.
 * 
 * @method Phaser.World#update
 */
@@ -121,31 +123,58 @@ Phaser.World.prototype.update = function () {
 }
 
 /**
-* This is called automatically every frame, and is where main logic happens.
+* This is called automatically before the renderer runs and after the plugins have updated.
+* In postUpdate this is where all the final physics calculatations and object positioning happens.
+* The objects are processed in the order of the display list.
+* The only exception to this is if the camera is following an object, in which case that is updated first.
+* 
 * @method Phaser.World#postUpdate
 */
 Phaser.World.prototype.postUpdate = function () {
 
-    this.camera.update();
-
-    if (this.game.stage._stage.first._iNext)
+    if (this.camera.target && this.camera.target['postUpdate'])
     {
-        var currentNode = this.game.stage._stage.first._iNext;
-        
-        do
+        this.camera.target.postUpdate();
+
+        this.camera.update();
+
+        if (this.game.stage._stage.first._iNext)
         {
-            if (currentNode['postUpdate'])
+            var currentNode = this.game.stage._stage.first._iNext;
+            
+            do
             {
-                currentNode.postUpdate();
+                if (currentNode['postUpdate'] && currentNode !== this.camera.target)
+                {
+                    currentNode.postUpdate();
+                }
+                
+                currentNode = currentNode._iNext;
             }
+            while (currentNode != this.game.stage._stage.last._iNext)
+        }
+    }
+    else
+    {
+        this.camera.update();
+
+        if (this.game.stage._stage.first._iNext)
+        {
+            var currentNode = this.game.stage._stage.first._iNext;
 
-            currentNode = currentNode._iNext;
+            do
+            {
+                if (currentNode['postUpdate'])
+                {
+                    currentNode.postUpdate();
+                }
+                
+                currentNode = currentNode._iNext;
+            }
+            while (currentNode != this.game.stage._stage.last._iNext)
         }
-        while (currentNode != this.game.stage._stage.last._iNext)
     }
 
-    this.camera.update();
-    
 }
 
 /**
@@ -154,8 +183,8 @@ Phaser.World.prototype.postUpdate = function () {
 * @method Phaser.World#setBounds
 * @param {number} x - Top left most corner of the world.
 * @param {number} y - Top left most corner of the world.
-* @param {number} width - New width of the world.
-* @param {number} height - New height of the world.
+* @param {number} width - New width of the world. Can never be smaller than the Game.width.
+* @param {number} height - New height of the world. Can never be smaller than the Game.height.
 */
 Phaser.World.prototype.setBounds = function (x, y, width, height) {