Multiple Anims update, Tilemap fixes and some new examples.

examples/animation/multiple anims.js

@@ -2,19 +2,77 @@
 var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create });
 
 function preload() {
-    game.load.atlas('bot', 'assets/misc/NumberSprite.png', 'assets/misc/NumberSprite.json');
+
+    //  Here we load the Starling Texture Atlas and XML file
+    game.load.atlasXML('seacreatures', 'assets/sprites/seacreatures.png', 'assets/sprites/seacreatures.xml');
+    //	Here is the exact same set of animations but as a JSON file instead
+    // 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() {
 
-    var bot = game.add.sprite(200, 200, 'bot');
+    game.add.sprite(0, 0, 'undersea');
 
-    bot.animations.add('num1', ['num10000','num10001','num10002','num10003','num10004','num10005'], 24, false, false);
-    bot.animations.add('num2', ['num20000','num20001','num20002','num20003','num20004','num20005'], 24, false, false);
-    bot.animations.add('num3', ['num30000','num30001','num30002','num30003','num30004','num30005'], 24, false, false);
+    jellyfish = game.add.sprite(670, 20, 'seacreatures');
 
-    //  bot.animations.play('num1', 15, true);
-    //  bot.animations.play('num2', 15, true);
-    //  bot.animations.play('num3', 15, true);
+    //	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');
+
+	// to: function ( properties, duration, ease, autoStart, delay, repeat, yoyo ) {
+
+    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/animation/starling atlas.js

@@ -0,0 +1,28 @@
+
+var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create });
+
+function preload() {
+
+    //  Here we load the Starling Texture Atlas and XML file
+    game.load.atlasXML('octopus', 'assets/sprites/octopus.png', 'assets/sprites/octopus.xml');
+
+}
+
+function create() {
+
+    //  A more suitable underwater background color
+    game.stage.backgroundColor = '#1873CE';
+
+    //  Create our octopus
+    var octopus = game.add.sprite(300, 200, 'octopus');
+
+    //  Create an animation called 'swim', the fact we don't specify any frames means it will use all frames in the atlas
+    octopus.animations.add('swim');
+
+    //  Play the animation at 30fps on a loop
+    octopus.animations.play('swim', 30, true);
+
+    //  Bob the octopus up and down with a tween
+    game.add.tween(octopus).to({ y: 300 }, 2000, Phaser.Easing.Quadratic.InOut, true, 0, 1000, true);
+
+}