Changed canvasData to remove duplicate properties.

src/renderer/canvas/utils/BlitImage.js

@@ -29,14 +29,14 @@ var BlitImage = function (dx, dy, frame)
 
     ctx.drawImage(
         frame.source.image,
-        cd.sx,
+        cd.x,
-        cd.sy,
+        cd.y,
-        cd.sWidth,
+        cd.width,
-        cd.sHeight,
+        cd.height,
         dx,
         dy,
-        cd.dWidth,
+        cd.width,
-        cd.dHeight
+        cd.height
     );
 };
 

src/renderer/canvas/utils/DrawImage.js

@@ -58,7 +58,7 @@ var DrawImage = function (src, camera, parentMatrix)
     if (src.flipX)
     {
         fx = -1;
-        dx -= cd.dWidth - src.displayOriginX;
+        dx -= cd.width - src.displayOriginX;
     }
     else
     {
@@ -68,7 +68,7 @@ var DrawImage = function (src, camera, parentMatrix)
     if (src.flipY)
     {
         fy = -1;
-        dy -= cd.dHeight - src.displayOriginY;
+        dy -= cd.height - src.displayOriginY;
     }
     else
     {
@@ -104,7 +104,16 @@ var DrawImage = function (src, camera, parentMatrix)
     ctx.scale(src.scaleX, src.scaleY);
     ctx.scale(fx, fy);
 
-    ctx.drawImage(frame.source.image, cd.sx, cd.sy, cd.sWidth, cd.sHeight, dx, dy, cd.dWidth, cd.dHeight);
+    if (src.isCropped)
+    {
+        var crop = src._crop;
+
+        ctx.drawImage(frame.source.image, crop.cx, crop.cy, crop.width, crop.height, crop.x + dx, crop.y + dy, crop.width, crop.height);
+    }
+    else
+    {
+        ctx.drawImage(frame.source.image, cd.x, cd.y, cd.width, cd.height, dx, dy, cd.width, cd.height);
+    }
 
     ctx.restore();
 };

src/textures/Frame.js

@@ -326,12 +326,10 @@ var Frame = new Class({
             },
             radius: 0,
             drawImage: {
-                sx: 0,
+                x: 0,
-                sy: 0,
+                y: 0,
-                sWidth: 0,
+                width: 0,
-                sHeight: 0,
+                height: 0
-                dWidth: 0,
-                dHeight: 0
             }
         };
 
@@ -393,12 +391,10 @@ var Frame = new Class({
 
         var drawImage = data.drawImage;
 
-        drawImage.sx = x;
+        drawImage.x = x;
-        drawImage.sy = y;
+        drawImage.y = y;
-        drawImage.sWidth = width;
+        drawImage.width = width;
-        drawImage.sHeight = height;
+        drawImage.height = height;
-        drawImage.dWidth = width;
-        drawImage.dHeight = height;
 
         return this.updateUVs();
     },
@@ -475,51 +471,91 @@ var Frame = new Class({
     {
         //  Clamp the input values
 
-        x = Clamp(x, 0, this.width);
+        var cx = this.cutX;
-        y = Clamp(y, 0, this.height);
+        var cy = this.cutY;
-        width = Clamp(width, 0, this.width);
+        var cw = this.cutWidth;
-        height = Clamp(height, 0, this.height);
+        var ch = this.cutHeight;
 
-        if (x + width > this.width)
+        x = Clamp(x, 0, cw);
+        y = Clamp(y, 0, ch);
+        width = Clamp(width, 0, cw);
+        height = Clamp(height, 0, ch);
+
+        //  Reserved for flipX/Y
+        var cropWidth = width;
+        var cropHeight = height;
+
+        if (x + width > cw)
         {
-            width = (this.width - x);
+            width = (cw - x);
         }
 
-        if (y + height > this.height)
+        if (y + height > ch)
         {
-            height = (this.height - y);
+            height = (ch - y);
         }
 
         var tw = this.source.width;
         var th = this.source.height;
-        var ox = 0;
+
-        var oy = 0;
+        var ox = cx;
+        var oy = cy;
 
         if (flipX)
         {
             ox = (tw - width) - (x * 2);
+            // ox -= cropWidth;
         }
 
         if (flipY)
         {
             oy = (th - height) - (y * 2);
+            // oy -= cropHeight;
         }
 
-        crop.u0 = (x + ox) / tw;
+        this.setUVs(crop, ox + x, oy + y, width, height);
-        crop.v0 = (y + oy) / th;
+
-        crop.u1 = (x + ox + width) / tw;
+        // console.log(crop.u0, crop.v0, crop.u1, crop.v1);
-        crop.v1 = (y + oy + height) / th;
+        
+
+        // crop.u0 = (x + ox) / tw;
+        // crop.v0 = (y + oy) / th;
+        // crop.u1 = (x + ox + width) / tw;
+        // crop.v1 = (y + oy + height) / th;
+
+        // crop.u0 = (cx + x + ox) / tw;
+        // crop.v0 = (cy + y + oy) / th;
+        // crop.u1 = (cx + x + ox + width) / tw;
+        // crop.v1 = (cy + y + oy + height) / th;
 
         crop.width = width;
         crop.height = height;
+
         crop.x = x;
         crop.y = y;
+
+        crop.cx = cx + x;
+        crop.cy = cy + y;
+
         crop.flipX = flipX;
         crop.flipY = flipY;
 
         return crop;
     },
 
+    setUVs: function (dest, x, y, width, height)
+    {
+        var tw = this.source.width;
+        var th = this.source.height;
+
+        //  Map the given coordinates into UV space, clamping to the 0-1 range.
+
+        dest.u0 = Math.max(0, x / tw);
+        dest.v0 = Math.max(0, y / th);
+        dest.u1 = Math.min(1, (x + width) / tw);
+        dest.v1 = Math.min(1, (y + height) / th);
+    },
+
     /**
      * Takes a crop data object and recalculates the UVs based on the dimensions inside the crop object.
      * Called automatically by `setFrame`.
@@ -557,10 +593,8 @@ var Frame = new Class({
 
         var cd = this.data.drawImage;
 
-        cd.sWidth = cw;
+        cd.width = cw;
-        cd.sHeight = ch;
+        cd.height = ch;
-        cd.dWidth = cw;
-        cd.dHeight = ch;
 
         //  WebGL data