From 3cae06d1addf35e0fe62840a528c159b27df6e55 Mon Sep 17 00:00:00 2001 From: photonstorm Date: Fri, 7 Feb 2014 00:57:41 +0000 Subject: [PATCH] Phaser.AnimationParser now sets the trimmed data directly for Pixi Texture frames. Tested across JSON Hash, JSON Data, Sprite Sheet and XML. --- README.md | 10 +++++ examples/wip/anim1.js | 18 ++++++++ examples/wip/anim2.js | 73 ++++++++++++++++++++++++++++++++ examples/wip/bounds.js | 32 ++++++++++++++ examples/wip/crop.js | 47 ++++++++++++++++++++ src/animation/AnimationParser.js | 30 +++++++++---- src/core/Stage.js | 15 ++----- src/gameobjects/Image.js | 6 +-- src/utils/Debug.js | 19 +++++++-- 9 files changed, 223 insertions(+), 27 deletions(-) create mode 100644 examples/wip/anim1.js create mode 100644 examples/wip/anim2.js create mode 100644 examples/wip/bounds.js create mode 100644 examples/wip/crop.js diff --git a/README.md b/README.md index 0b8f4598..45981fa4 100644 --- a/README.md +++ b/README.md @@ -69,6 +69,7 @@ Significant API changes: * 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. +* PixiPatch no longer needed, all features that it patched are now native in Pixi :) New features: @@ -80,6 +81,9 @@ New Examples: Updates: +* Debug.renderRectangle has a new parameter: filled. If true it renders as with fillRect, if false strokeRect. +* Phaser.AnimationParser now sets the trimmed data directly for Pixi Texture frames. Tested across JSON Hash, JSON Data, Sprite Sheet and XML. + Bug Fixes: @@ -262,6 +266,12 @@ Beyond version 2.0 * Multiple Camera support. +Nadion +------ + +[Nadion](https://github.com/jcd-as/nadion) is a set of powerful enhancements for Phaser that makes level building even easier. It includes features such as Trigger, Area, Alarms and Emitters, debug panels, state machines, parallax layer scrolling, 'developer mode' short-cuts and more. + + Contributing ------------ diff --git a/examples/wip/anim1.js b/examples/wip/anim1.js new file mode 100644 index 00000000..04c438e0 --- /dev/null +++ b/examples/wip/anim1.js @@ -0,0 +1,18 @@ + +var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create }); + +function preload() { + + game.load.spritesheet('mummy', 'assets/sprites/metalslug_mummy37x45.png', 37, 45, 18); + +} + +function create() { + + var mummy = game.add.sprite(300, 200, 'mummy', 5); + + mummy.animations.add('walk'); + + mummy.animations.play('walk', 20, true); + +} diff --git a/examples/wip/anim2.js b/examples/wip/anim2.js new file mode 100644 index 00000000..b5eacdf6 --- /dev/null +++ b/examples/wip/anim2.js @@ -0,0 +1,73 @@ + +var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create }); + +function preload() { + + game.load.atlasXML('seacreatures', 'assets/sprites/seacreatures.png', 'assets/sprites/seacreatures.xml'); + // game.load.atlas('seacreatures', 'assets/sprites/seacreatures_json.png', 'assets/sprites/seacreatures_json.json'); + + // Just a few images to use in our underwater scene + game.load.image('undersea', 'assets/pics/undersea.jpg'); + game.load.image('coral', 'assets/pics/seabed.png'); + +} + +var jellyfish; +var crab; +var greenJellyfish; +var octopus; +var purpleFish; +var seahorse; +var squid; +var stingray; +var flyingfish; + +function create() { + + game.add.sprite(0, 0, 'undersea'); + + jellyfish = game.add.sprite(670, 20, 'seacreatures', 'blueJellyfish0000'); + + // In the texture atlas the jellyfish uses the frame names blueJellyfish0000 to blueJellyfish0032 + // So we can use the handy generateFrameNames function to create this for us. + jellyfish.animations.add('swim', Phaser.Animation.generateFrameNames('blueJellyfish', 0, 32, '', 4), 30, true); + jellyfish.animations.play('swim'); + + // Let's make some more sea creatures in the same way as the jellyfish + crab = game.add.sprite(550, 480, 'seacreatures'); + crab.animations.add('swim', Phaser.Animation.generateFrameNames('crab1', 0, 25, '', 4), 30, true); + crab.animations.play('swim'); + + greenJellyfish = game.add.sprite(330, 100, 'seacreatures'); + greenJellyfish.animations.add('swim', Phaser.Animation.generateFrameNames('greenJellyfish', 0, 39, '', 4), 30, true); + greenJellyfish.animations.play('swim'); + + octopus = game.add.sprite(160, 400, 'seacreatures'); + octopus.animations.add('swim', Phaser.Animation.generateFrameNames('octopus', 0, 24, '', 4), 30, true); + octopus.animations.play('swim'); + + purpleFish = game.add.sprite(800, 413, 'seacreatures'); + purpleFish.animations.add('swim', Phaser.Animation.generateFrameNames('purpleFish', 0, 20, '', 4), 30, true); + purpleFish.animations.play('swim'); + + seahorse = game.add.sprite(491, 40, 'seacreatures'); + seahorse.animations.add('swim', Phaser.Animation.generateFrameNames('seahorse', 0, 5, '', 4), 30, true); + seahorse.animations.play('swim'); + + squid = game.add.sprite(610, 215, 'seacreatures', 'squid0000'); + + stingray = game.add.sprite(80, 190, 'seacreatures'); + stingray.animations.add('swim', Phaser.Animation.generateFrameNames('stingray', 0, 23, '', 4), 30, true); + stingray.animations.play('swim'); + + flyingfish = game.add.sprite(60, 40, 'seacreatures', 'flyingFish0000'); + + + game.add.sprite(0, 466, 'coral'); + + game.add.tween(purpleFish).to({ x: -200 }, 7500, Phaser.Easing.Quadratic.InOut, true, 0, 1000, false); + game.add.tween(octopus).to({ y: 530 }, 2000, Phaser.Easing.Quadratic.InOut, true, 0, 1000, true); + game.add.tween(greenJellyfish).to({ y: 250 }, 4000, Phaser.Easing.Quadratic.InOut, true, 0, 1000, true); + game.add.tween(jellyfish).to({ y: 100 }, 8000, Phaser.Easing.Quadratic.InOut, true, 0, 1000, true); + +} diff --git a/examples/wip/bounds.js b/examples/wip/bounds.js new file mode 100644 index 00000000..e60e2713 --- /dev/null +++ b/examples/wip/bounds.js @@ -0,0 +1,32 @@ + +var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }); + +function preload() { + + game.load.image('pic', 'assets/sprites/exocet_spaceman.png'); + +} + +var sprite; + +function create() { + + game.stage.backgroundColor = '#997683'; + + sprite = game.add.sprite(game.world.centerX, game.world.centerY, 'pic'); + sprite.anchor.setTo(0.5); + +} + + +function update() { + + sprite.rotation += 0.01; + +} + +function render() { + + game.debug.renderRectangle(sprite.getLocalBounds(), 'rgb(255, 255, 255)', false); + +} diff --git a/examples/wip/crop.js b/examples/wip/crop.js new file mode 100644 index 00000000..14f3803f --- /dev/null +++ b/examples/wip/crop.js @@ -0,0 +1,47 @@ + +// 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() { + + game.load.image('pic', 'assets/pics/backscroll.png'); + +} + +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, 0, 176); + + image2.crop(r); + +} + +function update() { + + if (r !== null) + { + r.width += 1; + + image2.crop(r); + + if (r.width == 720) + { + image2.crop(); + r = null; + } + } + +} + +function render() { + + game.debug.renderText(image2.width, 32, 32); + +} diff --git a/src/animation/AnimationParser.js b/src/animation/AnimationParser.js index d8bcd720..03b4b25c 100644 --- a/src/animation/AnimationParser.js +++ b/src/animation/AnimationParser.js @@ -153,10 +153,14 @@ Phaser.AnimationParser = { frames[i].spriteSourceSize.h ); - // We had to hack Pixi to get this to work :( PIXI.TextureCache[uuid].trimmed = true; - PIXI.TextureCache[uuid].trim.x = frames[i].spriteSourceSize.x; - PIXI.TextureCache[uuid].trim.y = frames[i].spriteSourceSize.y; + + PIXI.TextureCache[uuid].trim = { + x: frames[i].spriteSourceSize.x, + y: frames[i].spriteSourceSize.y, + realWidth: frames[i].sourceSize.w, + realHeight: frames[i].sourceSize.h + } } } @@ -225,10 +229,14 @@ Phaser.AnimationParser = { frames[key].spriteSourceSize.h ); - // We had to hack Pixi to get this to work :( PIXI.TextureCache[uuid].trimmed = true; - PIXI.TextureCache[uuid].trim.x = frames[key].spriteSourceSize.x; - PIXI.TextureCache[uuid].trim.y = frames[key].spriteSourceSize.y; + + PIXI.TextureCache[uuid].trim = { + x: frames[i].spriteSourceSize.x, + y: frames[i].spriteSourceSize.y, + realWidth: frames[i].sourceSize.w, + realHeight: frames[i].sourceSize.h + } } @@ -313,10 +321,14 @@ Phaser.AnimationParser = { PIXI.TextureCache[uuid].realSize = { x: frameX, y: frameY, w: frameWidth, h: frameHeight }; - // We had to hack Pixi to get this to work :( PIXI.TextureCache[uuid].trimmed = true; - PIXI.TextureCache[uuid].trim.x = frameX; - PIXI.TextureCache[uuid].trim.y = frameY; + + PIXI.TextureCache[uuid].trim = { + x: frameX, + y: frameY, + realWidth: width, + realHeight: height + } } } diff --git a/src/core/Stage.js b/src/core/Stage.js index e766fe6b..ce3fa01f 100644 --- a/src/core/Stage.js +++ b/src/core/Stage.js @@ -248,21 +248,12 @@ Object.defineProperty(Phaser.Stage.prototype, "backgroundColor", { if (this.game.transparent === false) { - if (this.game.renderType == Phaser.CANVAS) + if (typeof color === 'string') { - // Set it directly, this allows us to use rgb alpha values in Canvas mode. - this.game.canvas.style.backgroundColor = color; - } - else - { - if (typeof color === 'string') - { - color = Phaser.Color.hexToRGB(color); - } - - this._stage.setBackgroundColor(color); + color = Phaser.Color.hexToRGB(color); } + this._stage.setBackgroundColor(color); } } diff --git a/src/gameobjects/Image.js b/src/gameobjects/Image.js index d56b6db7..c9fb5073 100644 --- a/src/gameobjects/Image.js +++ b/src/gameobjects/Image.js @@ -90,8 +90,6 @@ Phaser.Image = function (game, x, y, key, frame) { */ this.fixedToCamera = false; - - }; Phaser.Image.prototype = Object.create(PIXI.Sprite.prototype); @@ -185,6 +183,7 @@ Phaser.Image.prototype.loadTexture = function (key, frame) { if (key instanceof Phaser.RenderTexture) { this.game.cache.getTextureFrame(key.name).clone(this.currentFrame); + // WOKWOKSK } else if (key instanceof Phaser.BitmapData) { @@ -241,7 +240,8 @@ Phaser.Image.prototype.loadTexture = function (key, frame) { }; /** -* Crop allows you to crop the texture used to display this Image. Cropping takes place from the top-left of the Image and can be modified in real-time. +* Crop allows you to crop the texture used to display this Image. +* Cropping takes place from the top-left of the Image and can be modified in real-time by providing an updated rectangle object. * * @method Phaser.Image#crop * @memberof Phaser.Image diff --git a/src/utils/Debug.js b/src/utils/Debug.js index b44fc1d5..3da168af 100644 --- a/src/utils/Debug.js +++ b/src/utils/Debug.js @@ -745,19 +745,32 @@ Phaser.Utils.Debug.prototype = { * @method Phaser.Utils.Debug#renderRectangle * @param {Phaser.Rectangle} rect - The Rectangle to render. * @param {string} [color] - Color of the debug info to be rendered (format is css color string). + * @param {boolean} [filled=true] - Render the rectangle as a fillRect (default, true) or a strokeRect (false) */ - renderRectangle: function (rect, color) { + renderRectangle: function (rect, color, filled) { if (this.context == null) { return; } + if (typeof filled === 'undefined') { filled = true; } + color = color || 'rgba(0,255,0,0.3)'; this.start(); - this.context.fillStyle = color; - this.context.fillRect(rect.x, rect.y, rect.width, rect.height); + + if (filled) + { + this.context.fillStyle = color; + this.context.fillRect(rect.x, rect.y, rect.width, rect.height); + } + else + { + this.context.strokeStyle = color; + this.context.strokeRect(rect.x, rect.y, rect.width, rect.height); + } + this.stop(); },