Sprite.crop() now takes a Phaser.Rectangle instead of explicit parameters.

Phaser.Image is a brand new display object perfect for logos, backgrounds, etc. You can scale, rotate, tint and blend and Image, but it has no animation, physics body or input events.
Previously if you used Sprite.crop() it would crop all Sprites using the same base image. It now takes a local copy of the texture data and crops just that.

Author: photonstorm

README.md

@@ -68,10 +68,12 @@ Significant API changes:
 * PIXI.Rectangle is now aliased to Phaser.Rectangle - saves on code duplication and works exactly the same.
 * PIXI.Circle is now aliased to Phaser.Circle - saves on code duplication and works exactly the same.
 * Sprite.deltaX and deltaY swapped to functions: Sprite.deltaX() and Sprite.deltaY()
+* Sprite.crop() now takes a Phaser.Rectangle instead of explicit parameters.
 
 
 New features:
 
+* Phaser.Image is a brand new display object perfect for logos, backgrounds, etc. You can scale, rotate, tint and blend and Image, but it has no animation, physics body or input events.
 
 New Examples:
 
@@ -84,6 +86,7 @@ Bug Fixes:
 * Explicitly paused Timer continues if you un-focus and focus the browser window (thanks georgiee)
 * Added TimerEvent.pendingDelete and checks in Timer.update, so that removing an event in a callback no longer throws an exception (thanks georgiee)
 * Fixed TypeScript defs on lines 1741-1748 (thanks wombatbuddy)
+* Previously if you used Sprite.crop() it would crop all Sprites using the same base image. It now takes a local copy of the texture data and crops just that.
 
 
 You can view the Change Log for all previous versions at https://github.com/photonstorm/phaser/changelog.md

examples/wip/image2.js

@@ -1,4 +1,5 @@
 
+// var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update, render: render });
 var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });
 
 function preload() {
@@ -9,13 +10,18 @@ function preload() {
 
 var image;
 var image2;
+var r;
 
 function create() {
 
 	image = game.add.image(32, 50, 'pic');
 
 	image2 = game.add.image(32, 250, 'pic');
 
+	r = new Phaser.Rectangle(0, 0, 100, 100);
+
+	image2.crop(r);
+
 	game.input.onDown.add(tint, this);
 
 }
@@ -28,12 +34,21 @@ function tint() {
 
 function update() {
 
-	// image.angle += 1;
+	if (r && r.width < 300)
+	{
+		r.width += 1;
+		image2.crop(r);
+	}
+	else
+	{
+		image2.crop();
+		r = null;
+	}
 
 }
 
 function render() {
 
-	// game.debug.renderText(sprite.position.y, 32, 32);
+	game.debug.renderText(image2.width, 32, 32);
 
 }

src/gameobjects/Image.js

@@ -90,6 +90,8 @@ Phaser.Image = function (game, x, y, key, frame) {
     */
     this.fixedToCamera = false;
 
+
+
 };
 
 Phaser.Image.prototype = Object.create(PIXI.Sprite.prototype);
@@ -243,13 +245,44 @@ Phaser.Image.prototype.loadTexture = function (key, frame) {
 *
 * @method Phaser.Image#crop
 * @memberof Phaser.Image
-* @param {number} frame - If this Sprite is using part of a sprite sheet or texture atlas you can specify the exact frame to use by giving a string or numeric index.
+* @param {Phaser.Rectangle} rect - The Rectangle to crop the Image to. Pass as null to clear any previously set crop.
 */
-Phaser.Image.prototype.crop = function(x, y, width, height) {
+Phaser.Image.prototype.crop = function(rect) {
+
+    if (typeof rect === 'undefined' || rect === null)
+    {
+        //  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));
+        }
+    }
+    else
+    {
+        //  Do we need to clone the PIXI.Texture object?
+        if (this.texture instanceof PIXI.Texture)
+        {
+            //  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.crop = new Phaser.Rectangle(0, 0, this._cache.width, this._cache.height);
-    // this.texture.setFrame(this.crop);
-    // this.cropEnabled = false;
+            this.texture = local;
+
+            this.texture.updateFrame = true;
+            PIXI.Texture.frameUpdates.push(this.texture);
+        }
+        else
+        {
+            this.texture.setFrame(rect);
+        }
+    }
 
 };