From 2a26257caac70c9903bdf35fe7a6aa700cb8ea9c Mon Sep 17 00:00:00 2001
From: Richard Davey <rdavey@gmail.com>
Date: Wed, 29 May 2013 11:40:05 +0100
Subject: [PATCH] Fixed scale, flippedX/Y and rotation so they all work from a
 single setTransform in any combination, taking the origin into account. Phew!

---
 Phaser/renderers/CanvasRenderer.ts | 128 +++++++++++++++------
 Tests/phaser.js                    | 178 ++++++++++++++++++++---------
 Tests/sprites/scale sprite 5.js    |  12 +-
 Tests/sprites/scale sprite 5.ts    |  13 ++-
 build/phaser.d.ts                  |   1 +
 build/phaser.js                    | 178 ++++++++++++++++++++---------
 6 files changed, 354 insertions(+), 156 deletions(-)

diff --git a/Phaser/renderers/CanvasRenderer.ts b/Phaser/renderers/CanvasRenderer.ts
index e8070ea4..ae40419f 100644
--- a/Phaser/renderers/CanvasRenderer.ts
+++ b/Phaser/renderers/CanvasRenderer.ts
@@ -16,6 +16,8 @@ module Phaser {
          */
         private _game: Phaser.Game;
 
+        private _wibble = 123;
+
         //  local rendering related temp vars to help avoid gc spikes with var creation
         private _sx: number = 0;
         private _sy: number = 0;
@@ -72,22 +74,22 @@ module Phaser {
                 sprite.texture.context.globalAlpha = sprite.texture.alpha;
             }
 
-            this._fx = sprite.scale.x;
-            this._fy = sprite.scale.y;
+            this._fx = 1;
+            this._fy = 1;
             this._sx = 0;
             this._sy = 0;
             this._sw = sprite.frameBounds.width;
             this._sh = sprite.frameBounds.height;
 
-            //if (sprite.texture.flippedX)
-            //{
-            //    this._fx = -1;
-            //}
+            if (sprite.texture.flippedX)
+            {
+                this._fx = -1;
+            }
 
-            //if (sprite.texture.flippedY)
-            //{
-            //    this._fy = -1;
-            //}
+            if (sprite.texture.flippedY)
+            {
+                this._fy = -1;
+            }
 
             this._dx = (camera.scaledX * sprite.scrollFactor.x) + sprite.frameBounds.x - (camera.worldView.x * sprite.scrollFactor.x);
             this._dy = (camera.scaledY * sprite.scrollFactor.y) + sprite.frameBounds.y - (camera.worldView.y * sprite.scrollFactor.y);
@@ -120,25 +122,81 @@ module Phaser {
             //  Apply origin / alignment
             if (sprite.origin.x != 0 || sprite.origin.y != 0)
             {
+                //sprite.origin.x *= sprite.scale.x;
+                //sprite.origin.y *= sprite.scale.y;
                 //this._dx += (sprite.origin.x * sprite.scale.x);
                 //this._dy += (sprite.origin.y * sprite.scale.y);
             }
 
+
+            //  this relates to the SPRITE! not the CanvasRenderer, because of the way sprite.render bound itself to this function
+            //console.log(this);
+
+            //  no rotation
+            var sin = Math.sin(sprite.game.math.degreesToRadians(sprite.position.rotation));
+            var cos = Math.cos(sprite.game.math.degreesToRadians(sprite.position.rotation));
+
+            var ssx = sprite.scale.x;
+            var ssy = sprite.scale.y;
+
+            if (sprite.texture.flippedX)
+            {
+                //sin = -sin;
+                ssx = -ssx;
+            }
+
+            if (sprite.texture.flippedY)
+            {
+                //this._dy += this._dh;
+                ssy = -ssy;
+            }
+
+            //  setTransform(a, b, c, d, e, f);
+            //  a = scale x
+            //  b = skew x
+            //  c = skew y
+            //  d = scale y
+            //  e = translate x
+            //  f = translate y
+
+            sprite.texture.context.save();
+            sprite.texture.context.setTransform(cos * ssx, sin * ssx, -sin * ssy, cos * ssy, this._dx, this._dy);
+
+            this._dx = -sprite.origin.x;
+            this._dy = -sprite.origin.y;
+            //this._dx = -(sprite.origin.x * sprite.scale.x);
+            //this._dy = -(sprite.origin.y * sprite.scale.y);
+
+            //  If scaled
+            if (sprite.scale.x != 1 || sprite.scale.y != 1)
+            {
+                //  Adjust along x/y based on origin
+                //console.log('scale adjust 1', this._dx, this._dw);
+                //this._dx += (this._dw - sprite.origin.x) * sprite.scale.x;
+                //this._dx += (sprite.origin.x * sprite.scale.x);
+                //console.log('scale adjust 2', this._dx, sprite.origin.x * sprite.scale.x);
+            }
+
+            //this._dw = sprite.frameBounds.width * sprite.scale.x;
+            //this._dh = sprite.frameBounds.height * sprite.scale.y;
+
+
+            /*
             //	Rotation and Flipped
-            if (sprite.scale.x != 1 || sprite.scale.y != 1 || sprite.position.rotation != 0 || sprite.position.rotationOffset != 0 || sprite.texture.flippedX || sprite.texture.flippedY)
-            //if (sprite.position.rotation != 0 || sprite.position.rotationOffset != 0 || sprite.texture.flippedX || sprite.texture.flippedY)
+            //if (sprite.scale.x != 1 || sprite.scale.y != 1 || sprite.position.rotation != 0 || sprite.position.rotationOffset != 0 || sprite.texture.flippedX || sprite.texture.flippedY)
+            if (sprite.position.rotation != 0 || sprite.position.rotationOffset != 0 || sprite.texture.flippedX || sprite.texture.flippedY)
             {
                 sprite.texture.context.save();
 
-                if (sprite.texture.flippedX)
-                {
-                    this._dx += this._dw * sprite.scale.x;
-                }
+                //if (sprite.texture.flippedX)
+                //{
+                //    this._dx += this._dw * sprite.scale.x;
+                //}
 
-                if (sprite.texture.flippedY)
-                {
-                    this._dy += this._dh * sprite.scale.y;
-                }
+                //if (sprite.texture.flippedY)
+                //{
+                //    this._dy += this._dh * sprite.scale.y;
+                //}
 
                 sprite.texture.context.translate(this._dx, this._dy);
 
@@ -150,20 +208,21 @@ module Phaser {
                 if (sprite.texture.renderRotation == true && (sprite.position.rotation !== 0 || sprite.position.rotationOffset !== 0))
                 {
                     //  Apply point of rotation here
-                    sprite.texture.context.rotate((sprite.position.rotationOffset + sprite.position.rotation) * (Math.PI / 180));
+                    //sprite.texture.context.rotate((sprite.position.rotationOffset + sprite.position.rotation) * (Math.PI / 180));
                 }
 
-                if (sprite.scale.x != 1 || sprite.scale.y != 1 || sprite.texture.flippedX || sprite.texture.flippedY)
+                //if (sprite.scale.x != 1 || sprite.scale.y != 1 || sprite.texture.flippedX || sprite.texture.flippedY)
+                if (sprite.texture.flippedX || sprite.texture.flippedY)
                 {
-                    if (sprite.texture.flippedX)
-                    {
-                        this._fx = -sprite.scale.x;
-                    }
+                    //if (sprite.texture.flippedX)
+                    //{
+                    //    this._fx = -sprite.scale.x;
+                    //}
 
-                    if (sprite.texture.flippedY)
-                    {
-                        this._fy = -sprite.scale.y;
-                    }
+                    //if (sprite.texture.flippedY)
+                    //{
+                    //    this._fy = -sprite.scale.y;
+                    //}
 
                     sprite.texture.context.scale(this._fx, this._fy);
 
@@ -174,8 +233,8 @@ module Phaser {
                 //    sprite.texture.context.scale(this._fx, this._fy);
                 //}
 
-                this._dx = -(sprite.origin.x * sprite.scale.x);
-                this._dy = -(sprite.origin.y * sprite.scale.y);
+                this._dx = -sprite.origin.x;
+                this._dy = -sprite.origin.y;
                 //this._dx = -(sprite.origin.x * sprite.scale.x);
                 //this._dy = -(sprite.origin.y * sprite.scale.y);
                 //this._dx = -(this._dw / 2) * sprite.scale.x;
@@ -191,6 +250,7 @@ module Phaser {
                     //this._dy -= (sprite.origin.y * sprite.scale.y);
                 }
             }
+            */
 
             this._sx = Math.round(this._sx);
             this._sy = Math.round(this._sy);
@@ -225,9 +285,11 @@ module Phaser {
             //if (sprite.position.rotation != 0 || sprite.position.rotationOffset != 0 || sprite.texture.flippedX || sprite.texture.flippedY)
             {
                 //this.context.translate(0, 0);
-                sprite.texture.context.restore();
+                //sprite.texture.context.restore();
             }
 
+            sprite.texture.context.restore();
+
             //if (this.renderDebug)
             //{
             //    this.renderBounds(camera, cameraOffsetX, cameraOffsetY);
diff --git a/Tests/phaser.js b/Tests/phaser.js
index 9fcb30c6..026e0121 100644
--- a/Tests/phaser.js
+++ b/Tests/phaser.js
@@ -10366,6 +10366,7 @@ var Phaser;
 (function (Phaser) {
     var CanvasRenderer = (function () {
         function CanvasRenderer(game) {
+            this._wibble = 123;
             //  local rendering related temp vars to help avoid gc spikes with var creation
             this._sx = 0;
             this._sy = 0;
@@ -10405,20 +10406,18 @@ var Phaser;
                 var globalAlpha = sprite.texture.context.globalAlpha;
                 sprite.texture.context.globalAlpha = sprite.texture.alpha;
             }
-            this._fx = sprite.scale.x;
-            this._fy = sprite.scale.y;
+            this._fx = 1;
+            this._fy = 1;
             this._sx = 0;
             this._sy = 0;
             this._sw = sprite.frameBounds.width;
             this._sh = sprite.frameBounds.height;
-            //if (sprite.texture.flippedX)
-            //{
-            //    this._fx = -1;
-            //}
-            //if (sprite.texture.flippedY)
-            //{
-            //    this._fy = -1;
-            //}
+            if(sprite.texture.flippedX) {
+                this._fx = -1;
+            }
+            if(sprite.texture.flippedY) {
+                this._fy = -1;
+            }
             this._dx = (camera.scaledX * sprite.scrollFactor.x) + sprite.frameBounds.x - (camera.worldView.x * sprite.scrollFactor.x);
             this._dy = (camera.scaledY * sprite.scrollFactor.y) + sprite.frameBounds.y - (camera.worldView.y * sprite.scrollFactor.y);
             //this._dw = sprite.frameBounds.width * sprite.scale.x;
@@ -10445,55 +10444,119 @@ var Phaser;
                             }
             //  Apply origin / alignment
             if(sprite.origin.x != 0 || sprite.origin.y != 0) {
+                //sprite.origin.x *= sprite.scale.x;
+                //sprite.origin.y *= sprite.scale.y;
                 //this._dx += (sprite.origin.x * sprite.scale.x);
                 //this._dy += (sprite.origin.y * sprite.scale.y);
                             }
-            //	Rotation and Flipped
-            if(sprite.scale.x != 1 || sprite.scale.y != 1 || sprite.position.rotation != 0 || sprite.position.rotationOffset != 0 || sprite.texture.flippedX || sprite.texture.flippedY)//if (sprite.position.rotation != 0 || sprite.position.rotationOffset != 0 || sprite.texture.flippedX || sprite.texture.flippedY)
-             {
-                sprite.texture.context.save();
-                if(sprite.texture.flippedX) {
-                    this._dx += this._dw * sprite.scale.x;
-                }
-                if(sprite.texture.flippedY) {
-                    this._dy += this._dh * sprite.scale.y;
-                }
-                sprite.texture.context.translate(this._dx, this._dy);
-                //sprite.texture.context.translate(this._dx + (this._dw / 2), this._dy + (this._dh / 2));
-                //sprite.texture.context.translate(this._dx + (sprite.origin.x * sprite.scale.x), this._dy + (sprite.origin.y * sprite.scale.y));
-                //sprite.texture.context.translate(this._dx + sprite.origin.x, this._dy + sprite.origin.y);
-                //sprite.texture.context.translate(this._dx + sprite.origin.x - (this._dw / 2), this._dy + sprite.origin.y - (this._dh / 2));
-                if(sprite.texture.renderRotation == true && (sprite.position.rotation !== 0 || sprite.position.rotationOffset !== 0)) {
-                    //  Apply point of rotation here
-                    sprite.texture.context.rotate((sprite.position.rotationOffset + sprite.position.rotation) * (Math.PI / 180));
-                }
-                if(sprite.scale.x != 1 || sprite.scale.y != 1 || sprite.texture.flippedX || sprite.texture.flippedY) {
-                    if(sprite.texture.flippedX) {
-                        this._fx = -sprite.scale.x;
-                    }
-                    if(sprite.texture.flippedY) {
-                        this._fy = -sprite.scale.y;
-                    }
-                    sprite.texture.context.scale(this._fx, this._fy);
-                }
-                //if (sprite.texture.flippedX || sprite.texture.flippedY)
-                //{
-                //    sprite.texture.context.scale(this._fx, this._fy);
-                //}
-                this._dx = -(sprite.origin.x * sprite.scale.x);
-                this._dy = -(sprite.origin.y * sprite.scale.y);
-                //this._dx = -(sprite.origin.x * sprite.scale.x);
-                //this._dy = -(sprite.origin.y * sprite.scale.y);
-                //this._dx = -(this._dw / 2) * sprite.scale.x;
-                //this._dy = -(this._dh / 2) * sprite.scale.y;
-                //this._dx = 0;
-                //this._dy = 0;
-                            } else {
-                if(sprite.origin.x != 0 || sprite.origin.y != 0) {
-                    //this._dx -= (sprite.origin.x * sprite.scale.x);
-                    //this._dy -= (sprite.origin.y * sprite.scale.y);
-                                    }
+            //  this relates to the SPRITE! not the CanvasRenderer, because of the way sprite.render bound itself to this function
+            //console.log(this);
+            //  no rotation
+            var sin = Math.sin(sprite.game.math.degreesToRadians(sprite.position.rotation));
+            var cos = Math.cos(sprite.game.math.degreesToRadians(sprite.position.rotation));
+            var ssx = sprite.scale.x;
+            var ssy = sprite.scale.y;
+            if(sprite.texture.flippedX) {
+                //sin = -sin;
+                ssx = -ssx;
             }
+            if(sprite.texture.flippedY) {
+                //this._dy += this._dh;
+                ssy = -ssy;
+            }
+            //  setTransform(a, b, c, d, e, f);
+            //  a = scale x
+            //  b = skew x
+            //  c = skew y
+            //  d = scale y
+            //  e = translate x
+            //  f = translate y
+            sprite.texture.context.save();
+            sprite.texture.context.setTransform(cos * ssx, sin * ssx, -sin * ssy, cos * ssy, this._dx, this._dy);
+            this._dx = -sprite.origin.x;
+            this._dy = -sprite.origin.y;
+            //this._dx = -(sprite.origin.x * sprite.scale.x);
+            //this._dy = -(sprite.origin.y * sprite.scale.y);
+            //  If scaled
+            if(sprite.scale.x != 1 || sprite.scale.y != 1) {
+                //  Adjust along x/y based on origin
+                //console.log('scale adjust 1', this._dx, this._dw);
+                //this._dx += (this._dw - sprite.origin.x) * sprite.scale.x;
+                //this._dx += (sprite.origin.x * sprite.scale.x);
+                //console.log('scale adjust 2', this._dx, sprite.origin.x * sprite.scale.x);
+                            }
+            //this._dw = sprite.frameBounds.width * sprite.scale.x;
+            //this._dh = sprite.frameBounds.height * sprite.scale.y;
+            /*
+            //	Rotation and Flipped
+            //if (sprite.scale.x != 1 || sprite.scale.y != 1 || sprite.position.rotation != 0 || sprite.position.rotationOffset != 0 || sprite.texture.flippedX || sprite.texture.flippedY)
+            if (sprite.position.rotation != 0 || sprite.position.rotationOffset != 0 || sprite.texture.flippedX || sprite.texture.flippedY)
+            {
+            sprite.texture.context.save();
+            
+            //if (sprite.texture.flippedX)
+            //{
+            //    this._dx += this._dw * sprite.scale.x;
+            //}
+            
+            //if (sprite.texture.flippedY)
+            //{
+            //    this._dy += this._dh * sprite.scale.y;
+            //}
+            
+            sprite.texture.context.translate(this._dx, this._dy);
+            
+            //sprite.texture.context.translate(this._dx + (this._dw / 2), this._dy + (this._dh / 2));
+            //sprite.texture.context.translate(this._dx + (sprite.origin.x * sprite.scale.x), this._dy + (sprite.origin.y * sprite.scale.y));
+            //sprite.texture.context.translate(this._dx + sprite.origin.x, this._dy + sprite.origin.y);
+            //sprite.texture.context.translate(this._dx + sprite.origin.x - (this._dw / 2), this._dy + sprite.origin.y - (this._dh / 2));
+            
+            if (sprite.texture.renderRotation == true && (sprite.position.rotation !== 0 || sprite.position.rotationOffset !== 0))
+            {
+            //  Apply point of rotation here
+            //sprite.texture.context.rotate((sprite.position.rotationOffset + sprite.position.rotation) * (Math.PI / 180));
+            }
+            
+            //if (sprite.scale.x != 1 || sprite.scale.y != 1 || sprite.texture.flippedX || sprite.texture.flippedY)
+            if (sprite.texture.flippedX || sprite.texture.flippedY)
+            {
+            //if (sprite.texture.flippedX)
+            //{
+            //    this._fx = -sprite.scale.x;
+            //}
+            
+            //if (sprite.texture.flippedY)
+            //{
+            //    this._fy = -sprite.scale.y;
+            //}
+            
+            sprite.texture.context.scale(this._fx, this._fy);
+            
+            }
+            
+            //if (sprite.texture.flippedX || sprite.texture.flippedY)
+            //{
+            //    sprite.texture.context.scale(this._fx, this._fy);
+            //}
+            
+            this._dx = -sprite.origin.x;
+            this._dy = -sprite.origin.y;
+            //this._dx = -(sprite.origin.x * sprite.scale.x);
+            //this._dy = -(sprite.origin.y * sprite.scale.y);
+            //this._dx = -(this._dw / 2) * sprite.scale.x;
+            //this._dy = -(this._dh / 2) * sprite.scale.y;
+            //this._dx = 0;
+            //this._dy = 0;
+            }
+            else
+            {
+            if (sprite.origin.x != 0 || sprite.origin.y != 0)
+            {
+            //this._dx -= (sprite.origin.x * sprite.scale.x);
+            //this._dy -= (sprite.origin.y * sprite.scale.y);
+            }
+            }
+            */
             this._sx = Math.round(this._sx);
             this._sy = Math.round(this._sy);
             this._sw = Math.round(this._sw);
@@ -10523,8 +10586,9 @@ var Phaser;
             if(sprite.scale.x != 1 || sprite.scale.y != 1 || sprite.position.rotation != 0 || sprite.position.rotationOffset != 0 || sprite.texture.flippedX || sprite.texture.flippedY)//if (sprite.position.rotation != 0 || sprite.position.rotationOffset != 0 || sprite.texture.flippedX || sprite.texture.flippedY)
              {
                 //this.context.translate(0, 0);
-                sprite.texture.context.restore();
-            }
+                //sprite.texture.context.restore();
+                            }
+            sprite.texture.context.restore();
             //if (this.renderDebug)
             //{
             //    this.renderBounds(camera, cameraOffsetX, cameraOffsetY);
diff --git a/Tests/sprites/scale sprite 5.js b/Tests/sprites/scale sprite 5.js
index 0ce541a8..312eae8b 100644
--- a/Tests/sprites/scale sprite 5.js	
+++ b/Tests/sprites/scale sprite 5.js	
@@ -12,13 +12,17 @@
         game.stage.backgroundColor = 'rgb(0,0,100)';
         //  Here we'll assign the new sprite to the local fuji variable
         //fuji = game.add.sprite(game.stage.centerX - 160, game.stage.centerY - 100, 'fuji');
-        fuji = game.add.sprite(100, game.stage.centerY - 100, 'fuji');
-        //fuji.scale.x = 2;
-        //fuji.scale.y = 2;
+        fuji = game.add.sprite(200, 200, 'fuji');
+        //  sets origin to the center of the sprite (half the width and half the height)
+        fuji.origin.setTo(160, 100);
+        fuji.scale.x = 2;
+        fuji.scale.y = 2;
         //fuji.texture.flippedX = true;
         fuji.texture.flippedY = true;
-        //fuji.origin.setTo(160, 100);
         //fuji.rotation = 45;
+        game.add.tween(fuji.scale).to({
+            x: 0
+        }, 3000).start();
         game.add.tween(fuji.position).to({
             rotation: 360
         }, 3000).start();
diff --git a/Tests/sprites/scale sprite 5.ts b/Tests/sprites/scale sprite 5.ts
index 1dc09851..d43cd2df 100644
--- a/Tests/sprites/scale sprite 5.ts	
+++ b/Tests/sprites/scale sprite 5.ts	
@@ -22,15 +22,18 @@
 
         //  Here we'll assign the new sprite to the local fuji variable
         //fuji = game.add.sprite(game.stage.centerX - 160, game.stage.centerY - 100, 'fuji');
-        fuji = game.add.sprite(100, game.stage.centerY - 100, 'fuji');
+        fuji = game.add.sprite(200, 200, 'fuji');
 
-        //fuji.scale.x = 2;
-        //fuji.scale.y = 2;
+        //  sets origin to the center of the sprite (half the width and half the height)
+        fuji.origin.setTo(160, 100);
+
+        fuji.scale.x = 2;
+        fuji.scale.y = 2;
         //fuji.texture.flippedX = true;
         fuji.texture.flippedY = true;
-
-        //fuji.origin.setTo(160, 100);
         //fuji.rotation = 45;
+
+        //game.add.tween(fuji.scale).to({ x: 0 }, 3000).start();
         game.add.tween(fuji.position).to({ rotation: 360 }, 3000).start();
 
         //  We set the origin of the Sprite to be the center so that the scaling happens around the center, not the left-hand side
diff --git a/build/phaser.d.ts b/build/phaser.d.ts
index aa077827..d4aa8e4e 100644
--- a/build/phaser.d.ts
+++ b/build/phaser.d.ts
@@ -5811,6 +5811,7 @@ module Phaser {
         * The essential reference to the main game object
         */
         private _game;
+        private _wibble;
         private _sx;
         private _sy;
         private _sw;
diff --git a/build/phaser.js b/build/phaser.js
index 9fcb30c6..026e0121 100644
--- a/build/phaser.js
+++ b/build/phaser.js
@@ -10366,6 +10366,7 @@ var Phaser;
 (function (Phaser) {
     var CanvasRenderer = (function () {
         function CanvasRenderer(game) {
+            this._wibble = 123;
             //  local rendering related temp vars to help avoid gc spikes with var creation
             this._sx = 0;
             this._sy = 0;
@@ -10405,20 +10406,18 @@ var Phaser;
                 var globalAlpha = sprite.texture.context.globalAlpha;
                 sprite.texture.context.globalAlpha = sprite.texture.alpha;
             }
-            this._fx = sprite.scale.x;
-            this._fy = sprite.scale.y;
+            this._fx = 1;
+            this._fy = 1;
             this._sx = 0;
             this._sy = 0;
             this._sw = sprite.frameBounds.width;
             this._sh = sprite.frameBounds.height;
-            //if (sprite.texture.flippedX)
-            //{
-            //    this._fx = -1;
-            //}
-            //if (sprite.texture.flippedY)
-            //{
-            //    this._fy = -1;
-            //}
+            if(sprite.texture.flippedX) {
+                this._fx = -1;
+            }
+            if(sprite.texture.flippedY) {
+                this._fy = -1;
+            }
             this._dx = (camera.scaledX * sprite.scrollFactor.x) + sprite.frameBounds.x - (camera.worldView.x * sprite.scrollFactor.x);
             this._dy = (camera.scaledY * sprite.scrollFactor.y) + sprite.frameBounds.y - (camera.worldView.y * sprite.scrollFactor.y);
             //this._dw = sprite.frameBounds.width * sprite.scale.x;
@@ -10445,55 +10444,119 @@ var Phaser;
                             }
             //  Apply origin / alignment
             if(sprite.origin.x != 0 || sprite.origin.y != 0) {
+                //sprite.origin.x *= sprite.scale.x;
+                //sprite.origin.y *= sprite.scale.y;
                 //this._dx += (sprite.origin.x * sprite.scale.x);
                 //this._dy += (sprite.origin.y * sprite.scale.y);
                             }
-            //	Rotation and Flipped
-            if(sprite.scale.x != 1 || sprite.scale.y != 1 || sprite.position.rotation != 0 || sprite.position.rotationOffset != 0 || sprite.texture.flippedX || sprite.texture.flippedY)//if (sprite.position.rotation != 0 || sprite.position.rotationOffset != 0 || sprite.texture.flippedX || sprite.texture.flippedY)
-             {
-                sprite.texture.context.save();
-                if(sprite.texture.flippedX) {
-                    this._dx += this._dw * sprite.scale.x;
-                }
-                if(sprite.texture.flippedY) {
-                    this._dy += this._dh * sprite.scale.y;
-                }
-                sprite.texture.context.translate(this._dx, this._dy);
-                //sprite.texture.context.translate(this._dx + (this._dw / 2), this._dy + (this._dh / 2));
-                //sprite.texture.context.translate(this._dx + (sprite.origin.x * sprite.scale.x), this._dy + (sprite.origin.y * sprite.scale.y));
-                //sprite.texture.context.translate(this._dx + sprite.origin.x, this._dy + sprite.origin.y);
-                //sprite.texture.context.translate(this._dx + sprite.origin.x - (this._dw / 2), this._dy + sprite.origin.y - (this._dh / 2));
-                if(sprite.texture.renderRotation == true && (sprite.position.rotation !== 0 || sprite.position.rotationOffset !== 0)) {
-                    //  Apply point of rotation here
-                    sprite.texture.context.rotate((sprite.position.rotationOffset + sprite.position.rotation) * (Math.PI / 180));
-                }
-                if(sprite.scale.x != 1 || sprite.scale.y != 1 || sprite.texture.flippedX || sprite.texture.flippedY) {
-                    if(sprite.texture.flippedX) {
-                        this._fx = -sprite.scale.x;
-                    }
-                    if(sprite.texture.flippedY) {
-                        this._fy = -sprite.scale.y;
-                    }
-                    sprite.texture.context.scale(this._fx, this._fy);
-                }
-                //if (sprite.texture.flippedX || sprite.texture.flippedY)
-                //{
-                //    sprite.texture.context.scale(this._fx, this._fy);
-                //}
-                this._dx = -(sprite.origin.x * sprite.scale.x);
-                this._dy = -(sprite.origin.y * sprite.scale.y);
-                //this._dx = -(sprite.origin.x * sprite.scale.x);
-                //this._dy = -(sprite.origin.y * sprite.scale.y);
-                //this._dx = -(this._dw / 2) * sprite.scale.x;
-                //this._dy = -(this._dh / 2) * sprite.scale.y;
-                //this._dx = 0;
-                //this._dy = 0;
-                            } else {
-                if(sprite.origin.x != 0 || sprite.origin.y != 0) {
-                    //this._dx -= (sprite.origin.x * sprite.scale.x);
-                    //this._dy -= (sprite.origin.y * sprite.scale.y);
-                                    }
+            //  this relates to the SPRITE! not the CanvasRenderer, because of the way sprite.render bound itself to this function
+            //console.log(this);
+            //  no rotation
+            var sin = Math.sin(sprite.game.math.degreesToRadians(sprite.position.rotation));
+            var cos = Math.cos(sprite.game.math.degreesToRadians(sprite.position.rotation));
+            var ssx = sprite.scale.x;
+            var ssy = sprite.scale.y;
+            if(sprite.texture.flippedX) {
+                //sin = -sin;
+                ssx = -ssx;
             }
+            if(sprite.texture.flippedY) {
+                //this._dy += this._dh;
+                ssy = -ssy;
+            }
+            //  setTransform(a, b, c, d, e, f);
+            //  a = scale x
+            //  b = skew x
+            //  c = skew y
+            //  d = scale y
+            //  e = translate x
+            //  f = translate y
+            sprite.texture.context.save();
+            sprite.texture.context.setTransform(cos * ssx, sin * ssx, -sin * ssy, cos * ssy, this._dx, this._dy);
+            this._dx = -sprite.origin.x;
+            this._dy = -sprite.origin.y;
+            //this._dx = -(sprite.origin.x * sprite.scale.x);
+            //this._dy = -(sprite.origin.y * sprite.scale.y);
+            //  If scaled
+            if(sprite.scale.x != 1 || sprite.scale.y != 1) {
+                //  Adjust along x/y based on origin
+                //console.log('scale adjust 1', this._dx, this._dw);
+                //this._dx += (this._dw - sprite.origin.x) * sprite.scale.x;
+                //this._dx += (sprite.origin.x * sprite.scale.x);
+                //console.log('scale adjust 2', this._dx, sprite.origin.x * sprite.scale.x);
+                            }
+            //this._dw = sprite.frameBounds.width * sprite.scale.x;
+            //this._dh = sprite.frameBounds.height * sprite.scale.y;
+            /*
+            //	Rotation and Flipped
+            //if (sprite.scale.x != 1 || sprite.scale.y != 1 || sprite.position.rotation != 0 || sprite.position.rotationOffset != 0 || sprite.texture.flippedX || sprite.texture.flippedY)
+            if (sprite.position.rotation != 0 || sprite.position.rotationOffset != 0 || sprite.texture.flippedX || sprite.texture.flippedY)
+            {
+            sprite.texture.context.save();
+            
+            //if (sprite.texture.flippedX)
+            //{
+            //    this._dx += this._dw * sprite.scale.x;
+            //}
+            
+            //if (sprite.texture.flippedY)
+            //{
+            //    this._dy += this._dh * sprite.scale.y;
+            //}
+            
+            sprite.texture.context.translate(this._dx, this._dy);
+            
+            //sprite.texture.context.translate(this._dx + (this._dw / 2), this._dy + (this._dh / 2));
+            //sprite.texture.context.translate(this._dx + (sprite.origin.x * sprite.scale.x), this._dy + (sprite.origin.y * sprite.scale.y));
+            //sprite.texture.context.translate(this._dx + sprite.origin.x, this._dy + sprite.origin.y);
+            //sprite.texture.context.translate(this._dx + sprite.origin.x - (this._dw / 2), this._dy + sprite.origin.y - (this._dh / 2));
+            
+            if (sprite.texture.renderRotation == true && (sprite.position.rotation !== 0 || sprite.position.rotationOffset !== 0))
+            {
+            //  Apply point of rotation here
+            //sprite.texture.context.rotate((sprite.position.rotationOffset + sprite.position.rotation) * (Math.PI / 180));
+            }
+            
+            //if (sprite.scale.x != 1 || sprite.scale.y != 1 || sprite.texture.flippedX || sprite.texture.flippedY)
+            if (sprite.texture.flippedX || sprite.texture.flippedY)
+            {
+            //if (sprite.texture.flippedX)
+            //{
+            //    this._fx = -sprite.scale.x;
+            //}
+            
+            //if (sprite.texture.flippedY)
+            //{
+            //    this._fy = -sprite.scale.y;
+            //}
+            
+            sprite.texture.context.scale(this._fx, this._fy);
+            
+            }
+            
+            //if (sprite.texture.flippedX || sprite.texture.flippedY)
+            //{
+            //    sprite.texture.context.scale(this._fx, this._fy);
+            //}
+            
+            this._dx = -sprite.origin.x;
+            this._dy = -sprite.origin.y;
+            //this._dx = -(sprite.origin.x * sprite.scale.x);
+            //this._dy = -(sprite.origin.y * sprite.scale.y);
+            //this._dx = -(this._dw / 2) * sprite.scale.x;
+            //this._dy = -(this._dh / 2) * sprite.scale.y;
+            //this._dx = 0;
+            //this._dy = 0;
+            }
+            else
+            {
+            if (sprite.origin.x != 0 || sprite.origin.y != 0)
+            {
+            //this._dx -= (sprite.origin.x * sprite.scale.x);
+            //this._dy -= (sprite.origin.y * sprite.scale.y);
+            }
+            }
+            */
             this._sx = Math.round(this._sx);
             this._sy = Math.round(this._sy);
             this._sw = Math.round(this._sw);
@@ -10523,8 +10586,9 @@ var Phaser;
             if(sprite.scale.x != 1 || sprite.scale.y != 1 || sprite.position.rotation != 0 || sprite.position.rotationOffset != 0 || sprite.texture.flippedX || sprite.texture.flippedY)//if (sprite.position.rotation != 0 || sprite.position.rotationOffset != 0 || sprite.texture.flippedX || sprite.texture.flippedY)
              {
                 //this.context.translate(0, 0);
-                sprite.texture.context.restore();
-            }
+                //sprite.texture.context.restore();
+                            }
+            sprite.texture.context.restore();
             //if (this.renderDebug)
             //{
             //    this.renderBounds(camera, cameraOffsetX, cameraOffsetY);