Fixing up Pixis setBackgroundColor.

examples/wip/pixi1.js

@@ -14,6 +14,10 @@ var p;
 
 function create() {
 
+	// game.stage.backgroundColor = '#ff5500';
+
+	game.stage._stage.setBackgroundColor(0xff5500);
+
 	sprite = game.add.sprite(0, 0, 'pic');
 
 	g = game.add.group(null, 'billy');

src/gameobjects/Sprite.js

@@ -166,6 +166,7 @@ Phaser.Sprite.prototype.constructor = Phaser.Sprite;
 */
 Phaser.Sprite.prototype.preUpdate = function() {
 
+    /*
     if (this._cache[4] === 1)
     {
         console.log('sprite cache fresh');
@@ -187,6 +188,7 @@ Phaser.Sprite.prototype.preUpdate = function() {
 
         return;
     }
+    */
 
     this._cache[0] = this.world.x;
     this._cache[1] = this.world.y;

src/physics/arcade/Body.js

@@ -69,6 +69,12 @@ Phaser.Physics.Arcade.Body = function (sprite) {
     */
     this.angle = 0;
 
+    /**
+    * @property {number} deltaCap - The maximum a delta is allowed to reach before its capped.
+    * @default
+    */
+    this.deltaCap = 2;
+
     /**
     * @property {Phaser.Point} gravity - The gravity applied to the motion of the Body. This works in addition to any gravity set on the world.
     */
@@ -381,7 +387,7 @@ Phaser.Physics.Arcade.Body.prototype = {
         this.x = (this.sprite.world.x - (this.sprite.anchor.x * this.sprite.width)) + this.offset.x;
         this.y = (this.sprite.world.y - (this.sprite.anchor.y * this.sprite.height)) + this.offset.y;
 
-        console.log('body pre', this.preX, this.preY, 'now', this.x, this.y);
+        // console.log('body pre', this.preX, this.preY, 'now', this.x, this.y);
 
         //  This covers any motion that happens during this frame, not since the last frame
         this.preX = this.x;
@@ -1438,32 +1444,74 @@ Phaser.Physics.Arcade.Body.prototype = {
 
     /**
     * Returns the delta x value. The amount the Body has moved horizontally in the current step.
+    * This value is capped by Body.deltaCap.
     *
     * @method Phaser.Physics.Arcade.Body#deltaX
     * @return {number} The delta value. Positive if the motion was to the right, negative if to the left.
     */
     deltaX: function () {
-        return this.x - this.preX;
+
+        var d = this.x - this.preX;
+
+        if (d < -this.deltaCap)
+        {
+            d = -this.deltaCap;
+        }
+        else if (d > this.deltaCap)
+        {
+            d = this.deltaCap;
+        }
+
+        return d;
+
     },
 
     /**
     * Returns the delta y value. The amount the Body has moved vertically in the current step.
+    * This value is capped by Body.deltaCap.
     *
     * @method Phaser.Physics.Arcade.Body#deltaY
     * @return {number} The delta value. Positive if the motion was downwards, negative if upwards.
     */
     deltaY: function () {
-        return this.y - this.preY;
+
+        var d = this.y - this.preY;
+
+        if (d < -this.deltaCap)
+        {
+            d = -this.deltaCap;
+        }
+        else if (d > this.deltaCap)
+        {
+            d = this.deltaCap;
+        }
+
+        return d;
+
     },
 
     /**
     * Returns the delta z value. The amount the Body has rotated in the current step.
+    * This value is capped by Body.deltaCap.
     *
     * @method Phaser.Physics.Arcade.Body#deltaZ
     * @return {number} The delta value.
     */
     deltaZ: function () {
-        return this.rotation - this.preRotation;
+
+        var d = this.rotation - this.preRotation;
+
+        if (d < -this.deltaCap)
+        {
+            d = -this.deltaCap;
+        }
+        else if (d > this.deltaCap)
+        {
+            d = this.deltaCap;
+        }
+
+        return d;
+
     }
 
 };

src/pixi/Pixi.js

@@ -41,6 +41,21 @@ PIXI.scaleModes = {
     NEAREST:1
 };
 
+//  Canvas specific controls
+PIXI.canvas = {
+
+    //  If the Stage is transparent Pixi will use a canvas sized fillRect operation every frame to set the canvas background color.
+    //  Setting this to false forces Pixi to update the view.style.backgroundColor instead.
+    FILL_RECT: true,
+
+    //  If the Stage is transparent Pixi will use clearRect to clear the canvas unless you set this to false.
+    //  You often don't need clearRect if you've got a large background image fully covering your canvas.
+    CLEAR_RECT: true,
+
+    //  If true Pixi will round all x/y values for rendering only, stopping pixel interpolation. Handy for crisp pixel art.
+    PX_ROUND: false
+}
+
 // interaction frequency 
 PIXI.INTERACTION_FREQUENCY = 30;
 PIXI.AUTO_PREVENT_DEFAULT = true;

src/pixi/display/Stage.js

@@ -63,6 +63,8 @@ PIXI.Stage = function(backgroundColor)
     //optimize hit detection a bit
     this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000);
 
+    this.resetBackgroundColor = false;
+
     this.setBackgroundColor(backgroundColor);
 };
 
@@ -121,6 +123,7 @@ PIXI.Stage.prototype.setBackgroundColor = function(backgroundColor)
     var hex = this.backgroundColor.toString(16);
     hex = '000000'.substr(0, 6 - hex.length) + hex;
     this.backgroundColorString = '#' + hex;
+    this.resetBackgroundColor = true;
 };
 
 /**

src/pixi/renderers/canvas/CanvasRenderer.js

@@ -156,36 +156,35 @@ PIXI.CanvasRenderer.prototype.constructor = PIXI.CanvasRenderer;
  */
 PIXI.CanvasRenderer.prototype.render = function(stage)
 {
-    //stage.__childrenAdded = [];
-    //stage.__childrenRemoved = [];
-
     // update textures if need be
     PIXI.texturesToUpdate.length = 0;
     PIXI.texturesToDestroy.length = 0;
 
     stage.updateTransform();
 
-    // update the background color
-  /*  if(this.view.style.backgroundColor !== stage.backgroundColorString && !this.transparent)
-        this.view.style.backgroundColor = stage.backgroundColorString; */
-
     this.context.setTransform(1,0,0,1,0,0);
+    this.context.globalAlpha = 1;
 
-    if(this.view.style.backgroundColor !== stage.backgroundColorString )
+    //  Update the background color / cls
+    if (!this.transparent)
     {
-        if(!this.transparent)
+        if (PIXI.canvas.FILL_RECT)
         {
-            this.context.globalAlpha = 1;
             this.context.fillStyle = stage.backgroundColorString;
             this.context.fillRect(0, 0, this.width, this.height);
         }
-        else
+        else if (stage.resetBackgroundColor)
         {
-            this.context.clearRect(0, 0, this.width, this.height);
+            this.view.style.backgroundColor = stage.backgroundColorString;
+            stage.resetBackgroundColor = false;
+            console.log('bgcolor reset', this.view.style.backgroundColor);
         }
     }
-
-    //console.log(this.view.style.backgroundColor)
+    
+    if (PIXI.canvas.CLEAR_RECT && !PIXI.canvas.FILL_RECT)
+    {
+        this.context.clearRect(0, 0, this.width, this.height);
+    }
    
     this.renderDisplayObject(stage);