Phaser.AnimationParser now sets the trimmed data directly for Pixi Texture frames. Tested across JSON Hash, JSON Data, Sprite Sheet and XML.

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
 ------------
 

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);
+
+}

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);
+
+}

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);
+
+}

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);
+
+}

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
+                }
             }
         }
 

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);
         }
 
     }

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

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();
         
     },