diff --git a/README.md b/README.md index 9b3aec4e..0b8f4598 100644 --- a/README.md +++ b/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 diff --git a/examples/wip/image2.js b/examples/wip/image2.js index 15560680..b289ac4f 100644 --- a/examples/wip/image2.js +++ b/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,6 +10,7 @@ function preload() { var image; var image2; +var r; function create() { @@ -16,6 +18,10 @@ function create() { 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); } diff --git a/src/gameobjects/Image.js b/src/gameobjects/Image.js index 3ee0d82b..d56b6db7 100644 --- a/src/gameobjects/Image.js +++ b/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) { - // this.crop = new Phaser.Rectangle(0, 0, this._cache.width, this._cache.height); - // this.texture.setFrame(this.crop); - // this.cropEnabled = false; + 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.texture = local; + + this.texture.updateFrame = true; + PIXI.Texture.frameUpdates.push(this.texture); + } + else + { + this.texture.setFrame(rect); + } + } };