Finally managed to get crop x/y/width/height working across all texture types. Needs optimising for the trim rect, but works.

src/animation/Animation.js

@@ -184,7 +184,10 @@ Phaser.Animation.prototype = {
         this._frameIndex = 0;
 
         this.currentFrame = this._frameData.getFrame(this._frames[this._frameIndex]);
-        this._parent.setTexture(PIXI.TextureCache[this.currentFrame.uuid]);
+
+        this._parent.setFrame(this.currentFrame.x, this.currentFrame.y, this.currentFrame.width, this.currentFrame.height);
+
+        // this._parent.setTexture(PIXI.TextureCache[this.currentFrame.uuid]);
 
         //  TODO: Double check if required
         if (this._parent.__tilePattern)
@@ -351,7 +354,7 @@ Phaser.Animation.prototype = {
             return false;
         }
 
-        if (this.isPlaying === true && this.game.time.now >= this._timeNextFrame)
+        if (this.isPlaying && this.game.time.now >= this._timeNextFrame)
         {
             this._frameSkip = 1;
 
@@ -378,11 +381,12 @@ Phaser.Animation.prototype = {
                 if (this.loop)
                 {
                     this._frameIndex %= this._frames.length;
-                    // this.currentFrame = this._frameData.getFrame(this._frames[this._frameIndex]);
+                    this.currentFrame = this._frameData.getFrame(this._frames[this._frameIndex]);
 
                     // if (this.currentFrame)
                     // {
-                    //     this._parent.setTexture(PIXI.TextureCache[this.currentFrame.uuid]);
+                        // this._parent.setTexture(PIXI.TextureCache[this.currentFrame.uuid]);
+                    //     this._parent.setFrame(this.currentFrame.x, this.currentFrame.y, this.currentFrame.width, this.currentFrame.height);
 
                     //     if (this._parent.__tilePattern)
                     //     {
@@ -409,7 +413,9 @@ Phaser.Animation.prototype = {
 
             if (this.currentFrame)
             {
-                this._parent.setTexture(PIXI.TextureCache[this.currentFrame.uuid]);
+                // this._parent.setTexture(PIXI.TextureCache[this.currentFrame.uuid]);
+                // this._parent.setFrame(this.currentFrame.x, this.currentFrame.y, this.currentFrame.width, this.currentFrame.height);
+                this._parent.setFrame(this.currentFrame);
 
                 // console.log('a1', this._parent.texture.frame, PIXI.TextureCache[this.currentFrame.uuid].frame);
 
@@ -550,7 +556,9 @@ Object.defineProperty(Phaser.Animation.prototype, 'frame', {
         if (this.currentFrame !== null)
         {
             this._frameIndex = value;
-            this._parent.setTexture(PIXI.TextureCache[this.currentFrame.uuid]);
+            // this._parent.setTexture(PIXI.TextureCache[this.currentFrame.uuid]);
+            this._parent.setFrame(this.currentFrame);
+            // this._parent.setFrame(this.currentFrame.x, this.currentFrame.y, this.currentFrame.width, this.currentFrame.height);
         }
 
     }

src/animation/AnimationManager.js

@@ -138,9 +138,13 @@ Phaser.AnimationManager.prototype = {
         this._frameData.getFrameIndexes(frames, useNumericIndex, this._outputFrames);
 
         this._anims[name] = new Phaser.Animation(this.game, this.sprite, name, this._frameData, this._outputFrames, frameRate, loop);
+
         this.currentAnim = this._anims[name];
         this.currentFrame = this.currentAnim.currentFrame;
-        this.sprite.setTexture(PIXI.TextureCache[this.currentFrame.uuid]);
+
+        this.sprite.setFrame(this.currentFrame);
+        // this.sprite.setFrame(this.currentFrame.x, this.currentFrame.y, this.currentFrame.width, this.currentFrame.height);
+        // this.sprite.setTexture(PIXI.TextureCache[this.currentFrame.uuid]);
 
         if (this.sprite.__tilePattern)
         {
@@ -424,7 +428,10 @@ Object.defineProperty(Phaser.AnimationManager.prototype, 'frame', {
             if (this.currentFrame)
             {
                 this._frameIndex = value;
-                this.sprite.setTexture(PIXI.TextureCache[this.currentFrame.uuid]);
+
+                this.sprite.setFrame(this.currentFrame);
+                // this.sprite.setFrame(this.currentFrame.x, this.currentFrame.y, this.currentFrame.width, this.currentFrame.height);
+                // this.sprite.setTexture(PIXI.TextureCache[this.currentFrame.uuid]);
 
                 if (this.sprite.__tilePattern)
                 {
@@ -462,7 +469,9 @@ Object.defineProperty(Phaser.AnimationManager.prototype, 'frameName', {
             if (this.currentFrame)
             {
                 this._frameIndex = this.currentFrame.index;
-                this.sprite.setTexture(PIXI.TextureCache[this.currentFrame.uuid]);
+                this.sprite.setFrame(this.currentFrame);
+                // this.sprite.setFrame(this.currentFrame.x, this.currentFrame.y, this.currentFrame.width, this.currentFrame.height);
+                // this.sprite.setTexture(PIXI.TextureCache[this.currentFrame.uuid]);
 
                 if (this.sprite.__tilePattern)
                 {

src/animation/AnimationParser.js

@@ -72,14 +72,15 @@ Phaser.AnimationParser = {
         {
             var uuid = game.rnd.uuid();
 
+            //  uuid needed?
             data.addFrame(new Phaser.Frame(i, x, y, frameWidth, frameHeight, '', uuid));
 
-            PIXI.TextureCache[uuid] = new PIXI.Texture(PIXI.BaseTextureCache[key], {
+            // PIXI.TextureCache[uuid] = new PIXI.Texture(PIXI.BaseTextureCache[key], {
-                x: x,
+            //     x: x,
-                y: y,
+            //     y: y,
-                width: frameWidth,
+            //     width: frameWidth,
-                height: frameHeight
+            //     height: frameHeight
-            });
+            // });
 
             x += frameWidth + spacing;
 
@@ -134,15 +135,27 @@ Phaser.AnimationParser = {
                 uuid
             ));
 
-            PIXI.TextureCache[uuid] = new PIXI.Texture(PIXI.BaseTextureCache[cacheKey], {
+            // PIXI.TextureCache[uuid] = new PIXI.Texture(PIXI.BaseTextureCache[cacheKey], {
-                x: frames[i].frame.x,
+            //     x: frames[i].frame.x,
-                y: frames[i].frame.y,
+            //     y: frames[i].frame.y,
-                width: frames[i].frame.w,
+            //     width: frames[i].frame.w,
-                height: frames[i].frame.h
+            //     height: frames[i].frame.h
-            });
+            // });
+
+/*
+    "filename": "octopus0000",
+    "frame": {"x":888,"y":1399,"w":82,"h":88},
+    "rotated": false,
+    "trimmed": true,
+    "spriteSourceSize": {"x":0,"y":0,"w":82,"h":95},
+    "sourceSize": {"w":82,"h":95}
+
+ */
 
             if (frames[i].trimmed)
             {
+                // setTrim: function (trimmed, actualWidth, actualHeight, destX, destY, destWidth, destHeight) {
+
                 newFrame.setTrim(
                     frames[i].trimmed,
                     frames[i].sourceSize.w,
@@ -153,7 +166,8 @@ Phaser.AnimationParser = {
                     frames[i].spriteSourceSize.h
                 );
 
-                PIXI.TextureCache[uuid].trim = new Phaser.Rectangle(frames[i].spriteSourceSize.x, frames[i].spriteSourceSize.y, frames[i].sourceSize.w, frames[i].sourceSize.h);
+
+                // PIXI.TextureCache[uuid].trim = new Phaser.Rectangle(frames[i].spriteSourceSize.x, frames[i].spriteSourceSize.y, frames[i].sourceSize.w, frames[i].sourceSize.h);
             }
 
         }

src/animation/Frame.js

@@ -143,8 +143,8 @@ Phaser.Frame.prototype = {
 
         if (trimmed)
         {
-            this.width = actualWidth;
+            // this.width = actualWidth;
-            this.height = actualHeight;
+            // this.height = actualHeight;
             this.sourceSizeW = actualWidth;
             this.sourceSizeH = actualHeight;
             this.centerX = Math.floor(actualWidth / 2);

src/gameobjects/Sprite.js

@@ -291,27 +291,7 @@ Phaser.Sprite.prototype.preUpdate = function() {
         this._cache[3] = this.game.stage.currentRenderOrderID++;
     }
 
-    if (this.animations.update() && this._crop)
+    this.animations.update();
-    {
-        //  Reset?
-        this.texture.frame.x = this._frame.x;
-        this.texture.frame.y = this._frame.y;
-        this.texture.frame.width = this._frame.width;
-        this.texture.frame.height = this._frame.height;
-
-
-        this._frame.x = this.texture.frame.x;
-        this._frame.y = this.texture.frame.y;
-        this._frame.width = this.texture,frame.width;
-        this._frame.height = this.texture,frame.height;
-
-        this.texture.frame.x += this._crop.x;
-        this.texture.frame.y += this._crop.y;
-        this.texture.frame.width = this._crop.width;
-        this.texture.frame.height = this._crop.height;
-
-        // console.log('a2', this.texture.frame);
-    }
 
     if (this.body && this.body.enable)
     {
@@ -420,8 +400,11 @@ Phaser.Sprite.prototype.loadTexture = function (key, frame) {
 
         if (this.game.cache.isSpriteSheet(key))
         {
+console.log('create animation', this.key);
             this.key = key;
+            this.setTexture(new PIXI.Texture(PIXI.BaseTextureCache[key]));
             this.animations.loadFrameData(this.game.cache.getFrameData(key));
+            this.textureChange = true;
 
             if (typeof frame === 'string')
             {
@@ -435,7 +418,7 @@ Phaser.Sprite.prototype.loadTexture = function (key, frame) {
         else
         {
             this.key = key;
-            this.setTexture(PIXI.TextureCache[key]);
+            this.setTexture(new PIXI.Texture(PIXI.BaseTextureCache[key]));
             this.animations.loadFrameData(null);
             return;
         }
@@ -443,6 +426,117 @@ Phaser.Sprite.prototype.loadTexture = function (key, frame) {
 
 };
 
+
+Phaser.Sprite.prototype.setFrame = function(frame) {
+
+    if (frame.trimmed)
+    {
+        if (this._crop)
+        {
+            //  Works but doesn't take crop x/y into account
+            // this.texture.frame.x = frame.x;
+            // this.texture.frame.y = frame.y;
+            // this.texture.frame.width = this._crop.width - frame.spriteSourceSizeX;
+            // this.texture.frame.height = this._crop.height - frame.spriteSourceSizeY;
+            // this.texture.trim = new Phaser.Rectangle(frame.spriteSourceSizeX, frame.spriteSourceSizeY, frame.width, frame.height);
+
+            var fx = frame.x + this._crop.x - frame.spriteSourceSizeX;
+
+            if (fx < frame.x)
+            {
+                fx = frame.x;
+            }
+
+            var fy = frame.y + this._crop.y - frame.spriteSourceSizeY;
+
+            if (fy < frame.y)
+            {
+                fy = frame.y;
+            }
+
+            this.texture.frame.x = fx;
+            this.texture.frame.y = fy;
+
+            var tx = 0;
+            var ty = 0;
+
+            if (this._crop.x === 0)
+            {
+                tx = frame.spriteSourceSizeX;
+            }
+
+            if (this._crop.y === 0)
+            {
+                ty = frame.spriteSourceSizeY;
+            }
+
+            this.texture.frame.width = this._crop.width - tx;
+            this.texture.frame.height = this._crop.height - ty;
+
+            this.texture.trim = new Phaser.Rectangle(tx, ty, this._crop.width, this._crop.height);
+        }
+        else
+        {
+            this.texture.frame.x = frame.x;
+            this.texture.frame.y = frame.y;
+            this.texture.frame.width = frame.width;
+            this.texture.frame.height = frame.height;
+            this.texture.trim = new Phaser.Rectangle(frame.spriteSourceSizeX, frame.spriteSourceSizeY, frame.width, frame.height);
+        }
+    }
+    else
+    {
+        this.texture.frame.x = frame.x;
+        this.texture.frame.y = frame.y;
+        this.texture.frame.width = frame.width;
+        this.texture.frame.height = frame.height;
+
+        if (this._crop)
+        {
+            this.texture.frame.x += this._crop.x;
+            this.texture.frame.y += this._crop.y;
+            this.texture.frame.width = this._crop.width;
+            this.texture.frame.height = this._crop.height;
+        }
+    }
+
+    if (this.game.renderType === Phaser.WEBGL)
+    {
+        PIXI.WebGLRenderer.updateTextureFrame(this.texture);
+    }
+
+};
+
+
+Phaser.Sprite.prototype.XsetFrame = function(x, y, width, height) {
+
+    // console.log('setFrame', this.key, x, y);
+
+    this.texture.frame.x = x;
+    this.texture.frame.y = y;
+    this.texture.frame.width = width;
+    this.texture.frame.height = height;
+
+    //  Apply crop?
+
+    if (this._crop)
+    {
+        this.texture.frame.x += this._crop.x;
+        this.texture.frame.y += this._crop.y;
+        this.texture.frame.width = this._crop.width;
+        this.texture.frame.height = this._crop.height;
+    }
+
+    //  Needed?
+    // this.updateFrame = true;
+
+    if (this.game.renderType === Phaser.WEBGL)
+    {
+        PIXI.WebGLRenderer.updateTextureFrame(this.texture);
+    }
+
+};
+
 /**
 * Crop allows you to crop the texture used to display this Sprite.
 * Cropping takes place from the top-left of the Sprite and can be modified in real-time by providing an updated rectangle object.
@@ -458,46 +552,25 @@ Phaser.Sprite.prototype.loadTexture = function (key, frame) {
 */
 Phaser.Sprite.prototype.crop = function(rect, copy) {
 
-    this._frame = { x: 0, y: 0, width: 0, height: 0 };
+    if (rect)
-
-    if (typeof rect === 'undefined' || rect === null)
     {
-        this._crop = null;
+        if (copy)
-
-        //  Clear any crop that may be set
-        if (this.texture.hasOwnProperty('sourceWidth'))
         {
-            this.texture.setFrame(new Phaser.Rectangle(0, 0, this.texture.sourceWidth, this.texture.sourceHeight));
+            this._crop = new Phaser.Rectangle(rect.x, rect.y, rect.width, rect.height);
-        }
-    }
-    else
-    {
-        //  Do we need to clone the PIXI.Texture object?
-        if (this.texture instanceof PIXI.Texture)
-        {
-            this._crop = rect;
-
-            //  Yup, let's rock it ...
-            var local = {};
-
-            Phaser.Utils.extend(true, local, this.texture);
-
-            local.sourceWidth = local.width;
-            local.sourceHeight = local.height;
-            local.frame = rect;
-            local.width = rect.width;
-            local.height = rect.height;
-
-            this.texture = local;
-
-            this.texture.updateFrame = true;
-            PIXI.Texture.frameUpdates.push(this.texture);
         }
         else
         {
             this._crop = rect;
-            this.texture.setFrame(rect);
         }
+
+        // this.setFrame(this.texture.frame.x, this.texture.frame.y, this.texture.frame.width, this.texture.frame.height);
+        this.setFrame(this.texture);
+    }
+    else
+    {
+        this._crop = null;
+        //  How to reset the frame
+        // this.setFrame(this.texture.frame.x, this.texture.frame.y, this.texture.frame.width, this.texture.frame.height);
     }
 
 };