First pass at adding rotated atlas frame support in to the Canvas renderer.

Author: photonstorm

src/animation/AnimationParser.js

@@ -138,6 +138,11 @@ Phaser.AnimationParser = {
                     frames[i].spriteSourceSize.h
                 );
             }
+
+            if (frames[i].rotated)
+            {
+                newFrame.rotated = true;
+            }
         }
 
         return data;
@@ -251,6 +256,11 @@ Phaser.AnimationParser = {
                 );
             }
 
+            if (frames[key].rotated)
+            {
+                newFrame.rotated = true;
+            }
+
             i++;
         }
 

src/animation/Frame.js

@@ -64,7 +64,7 @@ Phaser.Frame = function (index, x, y, width, height, name) {
     this.distance = Phaser.Math.distance(0, 0, width, height);
 
     /**
-    * @property {boolean} rotated - Rotated? (not yet implemented)
+    * @property {boolean} rotated - Is the frame rotated in the source texture?
     * @default
     */
     this.rotated = false;

src/gameobjects/components/LoadTexture.js

@@ -190,6 +190,11 @@ Phaser.Component.LoadTexture.prototype = {
             this.texture.trim = null;
         }
 
+        if (frame.rotated)
+        {
+            this.texture.rotated = true;
+        }
+
         if (this.cropRect)
         {
             this.updateCrop();

src/pixi/display/Sprite.js

@@ -448,62 +448,86 @@ PIXI.Sprite.prototype._renderCanvas = function(renderSession, matrix)
     }
 
     //  Ignore null sources
-    if (this.texture.valid)
+    if (!this.texture.valid)
     {
-        var resolution = this.texture.baseTexture.resolution / renderSession.resolution;
-
-        renderSession.context.globalAlpha = this.worldAlpha;
+        //  Update the children and leave
+        for (var i = 0; i < this.children.length; i++)
+        {
+            this.children[i]._renderCanvas(renderSession);
+        }
 
-        //  If smoothingEnabled is supported and we need to change the smoothing property for this texture
-        if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode)
+        if (this._mask)
         {
-            renderSession.scaleMode = this.texture.baseTexture.scaleMode;
-            renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR);
+            renderSession.maskManager.popMask(renderSession);
         }
 
-        //  If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions
-        var dx = (this.texture.trim) ? this.texture.trim.x - this.anchor.x * this.texture.trim.width : this.anchor.x * -this.texture.frame.width;
-        var dy = (this.texture.trim) ? this.texture.trim.y - this.anchor.y * this.texture.trim.height : this.anchor.y * -this.texture.frame.height;
+        return;
+    }
 
-        var tx = (wt.tx * renderSession.resolution) + renderSession.shakeX;
-        var ty = (wt.ty * renderSession.resolution) + renderSession.shakeY;
+    var resolution = this.texture.baseTexture.resolution / renderSession.resolution;
 
-        //  Allow for pixel rounding
-        if (renderSession.roundPixels)
-        {
-            renderSession.context.setTransform(wt.a, wt.b, wt.c, wt.d, tx | 0, ty | 0);
-            dx |= 0;
-            dy |= 0;
-        }
-        else
-        {
-            renderSession.context.setTransform(wt.a, wt.b, wt.c, wt.d, tx, ty);
-        }
+    renderSession.context.globalAlpha = this.worldAlpha;
 
-        var cw = this.texture.crop.width;
-        var ch = this.texture.crop.height;
+    //  If smoothingEnabled is supported and we need to change the smoothing property for this texture
+    if (renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode)
+    {
+        renderSession.scaleMode = this.texture.baseTexture.scaleMode;
+        renderSession.context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR);
+    }
 
-        dx /= resolution;
-        dy /= resolution;
+    //  If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions
+    var dx = (this.texture.trim) ? this.texture.trim.x - this.anchor.x * this.texture.trim.width : this.anchor.x * -this.texture.frame.width;
+    var dy = (this.texture.trim) ? this.texture.trim.y - this.anchor.y * this.texture.trim.height : this.anchor.y * -this.texture.frame.height;
 
-        if (this.tint !== 0xFFFFFF)
-        {
-            if (this.texture.requiresReTint || this.cachedTint !== this.tint)
-            {
-                this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint);
+    var tx = (wt.tx * renderSession.resolution) + renderSession.shakeX;
+    var ty = (wt.ty * renderSession.resolution) + renderSession.shakeY;
 
-                this.cachedTint = this.tint;
-                this.texture.requiresReTint = false;
-            }
+    //  Allow for pixel rounding
+    if (renderSession.roundPixels)
+    {
+        renderSession.context.setTransform(wt.a, wt.b, wt.c, wt.d, tx | 0, ty | 0);
+        dx |= 0;
+        dy |= 0;
+    }
+    else
+    {
+        renderSession.context.setTransform(wt.a, wt.b, wt.c, wt.d, tx, ty);
+    }
 
-            renderSession.context.drawImage(this.tintedTexture, 0, 0, cw, ch, dx, dy, cw / resolution, ch / resolution);
-        }
-        else
+    var cw = this.texture.crop.width;
+    var ch = this.texture.crop.height;
+
+    if (this.texture.rotated)
+    {
+        //  90 degree coordinate rotation
+        cw = ch;
+        ch = this.texture.crop.width;
+
+        renderSession.context.translate(0, cw);
+        renderSession.context.rotate(-1.5707963267948966);
+    }
+
+    dx /= resolution;
+    dy /= resolution;
+
+    if (this.tint !== 0xFFFFFF)
+    {
+        if (this.texture.requiresReTint || this.cachedTint !== this.tint)
         {
-            var cx = this.texture.crop.x;
-            var cy = this.texture.crop.y;
-            renderSession.context.drawImage(this.texture.baseTexture.source, cx, cy, cw, ch, dx, dy, cw / resolution, ch / resolution);
+            this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint);
+
+            this.cachedTint = this.tint;
+            this.texture.requiresReTint = false;
         }
+
+        renderSession.context.drawImage(this.tintedTexture, 0, 0, cw, ch, dx, dy, cw / resolution, ch / resolution);
+    }
+    else
+    {
+        var cx = this.texture.crop.x;
+        var cy = this.texture.crop.y;
+
+        renderSession.context.drawImage(this.texture.baseTexture.source, cx, cy, cw, ch, dx, dy, cw / resolution, ch / resolution);
     }
 
     for (var i = 0; i < this.children.length; i++)

src/pixi/textures/Texture.js

@@ -134,6 +134,8 @@ PIXI.Texture = function(baseTexture, frame, crop, trim)
      */
     this.crop = crop || new PIXI.Rectangle(0, 0, 1, 1);
 
+    this.rotated = false;
+
     if (baseTexture.hasLoaded)
     {
         if (this.noFrame) frame = new PIXI.Rectangle(0, 0, baseTexture.width, baseTexture.height);