Moved transform for rotated texture clipping to a single transform. Added support for webgl rotated textures

Author: bitnenfer

src/pixi/display/Sprite.js

@@ -482,6 +482,33 @@ PIXI.Sprite.prototype._renderCanvas = function(renderSession, matrix)
     var tx = (wt.tx * renderSession.resolution) + renderSession.shakeX;
     var ty = (wt.ty * renderSession.resolution) + renderSession.shakeY;
 
+    var cw = this.texture.crop.width;
+    var ch = this.texture.crop.height;
+
+    if (this.texture.rotated)
+    {
+        var a = wt.a;
+        var b = wt.b;
+        var c = wt.c;
+        var d = wt.d;
+        var e = cw;
+        
+        // Offset before rotating
+        tx = wt.c * ch + tx;
+        ty = wt.d * ch + ty;
+        
+        // Rotate matrix by 90 degrees
+        // We use precalculated values for sine and cosine of rad(90)
+        wt.a = a * 6.123233995736766e-17 + -c;
+        wt.b = b * 6.123233995736766e-17 + -d;
+        wt.c = a + c * 6.123233995736766e-17;
+        wt.d = b + d * 6.123233995736766e-17;
+
+        // Update cropping dimensions.
+        cw = ch;
+        ch = e;
+    }
+
     //  Allow for pixel rounding
     if (renderSession.roundPixels)
     {
@@ -494,19 +521,6 @@ PIXI.Sprite.prototype._renderCanvas = function(renderSession, matrix)
         renderSession.context.setTransform(wt.a, wt.b, wt.c, wt.d, tx, ty);
     }
 
-    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;
 

src/pixi/renderers/webgl/utils/WebGLSpriteBatch.js

@@ -286,6 +286,39 @@ PIXI.WebGLSpriteBatch.prototype.render = function (sprite, matrix) {
     var tx = wt.tx;
     var ty = wt.ty;
 
+    var cw = texture.crop.width;
+    var ch = texture.crop.height;
+
+    if (texture.rotated)
+    {
+        var a0 = wt.a;
+        var b0 = wt.b;
+        var c0 = wt.c;
+        var d0 = wt.d;
+        var _w1 = w1;
+        var _w0 = w0;
+
+        // Offset before rotating
+        tx = wt.c * ch + tx;
+        ty = wt.d * ch + ty;
+        
+        // Rotate matrix by 90 degrees
+        // We use precalculated values for sine and cosine of rad(90)
+        a = a0 * 6.123233995736766e-17 + -c0;
+        b = b0 * 6.123233995736766e-17 + -d0;
+        c = a0 + c0 * 6.123233995736766e-17;
+        d = b0 + d0 * 6.123233995736766e-17;
+
+        // Update UV coordinates
+        texture._updateUvsInverted();
+
+        // Rotate dimensions
+        w0 = h0;
+        w1 = h1;
+        h0 = _w0;
+        h1 = _w1;   
+    }
+
     var colors = this.colors;
     var positions = this.positions;
     var tint = sprite.tint;

src/pixi/textures/Texture.js

@@ -248,6 +248,26 @@ PIXI.Texture.prototype._updateUvs = function()
     this._uvs.y3 = (frame.y + frame.height) / th;
 };
 
+PIXI.Texture.prototype._updateUvsInverted = function () {
+    if(!this._uvs)this._uvs = new PIXI.TextureUvs();
+
+    var frame = this.crop;
+    var tw = this.baseTexture.width;
+    var th = this.baseTexture.height;
+    
+    this._uvs.x0 = frame.x / tw;
+    this._uvs.y0 = frame.y / th;
+
+    this._uvs.x1 = (frame.x + frame.height) / tw;
+    this._uvs.y1 = frame.y / th;
+
+    this._uvs.x2 = (frame.x + frame.height) / tw;
+    this._uvs.y2 = (frame.y + frame.width) / th;
+
+    this._uvs.x3 = frame.x / tw;
+    this._uvs.y3 = (frame.y + frame.width) / th;
+};
+
 /**
  * Helper function that creates a new a Texture based on the given canvas element.
  *