TileSprites are now much more tidy and can run from a frame in a texture. They can also be animated. New TileSprite.autoScroll function added.

labs/code/001 under sea.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);
+
+}

labs/code/002 animated tilesprites.js

@@ -0,0 +1,70 @@
+
+var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });
+
+var tilesprite;
+var cursors;
+var count = 0;
+
+function preload() {
+
+    game.load.image('starfield', 'assets/misc/starfield.jpg');
+    game.load.spritesheet('mummy', 'assets/sprites/metalslug_mummy37x45.png', 37, 45, 18);
+    game.load.atlas('seacreatures', 'assets/sprites/seacreatures_json.png', 'assets/sprites/seacreatures_json.json');
+
+}
+
+var sprite;
+
+function create() {
+
+    // sprite = game.add.tileSprite(0, 0, 800, 600, 'starfield');
+    // sprite = game.add.tileSprite(100, 100, 400, 300, 'starfield');
+
+    sprite = game.add.tileSprite(0, 0, 800, 600, 'mummy');
+    sprite.animations.add('walk');
+    sprite.animations.play('walk', 20, true);
+
+    // sprite = game.add.tileSprite(0, 0, 800, 600, 'seacreatures');
+    // sprite.animations.add('swim', Phaser.Animation.generateFrameNames('octopus', 0, 24, '', 4), 30, true);
+    // sprite.animations.play('swim');
+
+
+    cursors = game.input.keyboard.createCursorKeys();
+
+}
+
+function update() {
+
+    count += 0.005
+
+    sprite.tileScale.x = 2 + Math.sin(count);
+    sprite.tileScale.y = 2 + Math.cos(count);
+    
+    sprite.tilePosition.x += 1;
+    sprite.tilePosition.y += 1;
+
+    if (cursors.left.isDown)
+    {
+        sprite.tilePosition.x += 4;
+    }
+    else if (cursors.right.isDown)
+    {
+        sprite.tilePosition.x -= 4;
+    }
+
+    if (cursors.up.isDown)
+    {
+        sprite.tilePosition.y += 4;
+    }
+    else if (cursors.down.isDown)
+    {
+        sprite.tilePosition.y -= 4;
+    }
+
+}
+
+function render() {
+
+    // game.debug.renderText(sprite.frame, 32, 32);
+
+}

labs/code/003 thrust.js

@@ -0,0 +1,60 @@
+
+var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });
+
+function preload() {
+
+    game.load.image('backdrop', 'assets/pics/remember-me.jpg');
+	game.load.image('ship', 'assets/sprites/thrust_ship2.png');
+
+}
+
+var ship;
+var cursors;
+
+function create() {
+
+    game.world.setBounds(0, 0, 1920, 1200);
+
+    var bg = game.add.sprite(0, 0, 'backdrop');
+    bg.alpha = 0.8;
+
+	ship = game.add.sprite(200, 200, 'ship');
+	ship.physicsEnabled = true;
+
+	game.camera.follow(ship);
+
+    cursors = game.input.keyboard.createCursorKeys();
+
+    game.physics.defaultRestitution = 0.8;
+
+}
+
+function update() {
+
+    if (cursors.left.isDown)
+    {
+		ship.body.rotateLeft(100);
+    }
+    else if (cursors.right.isDown)
+    {
+		ship.body.rotateRight(100);
+    }
+    else
+    {
+		ship.body.setZeroRotation();
+    }
+
+    if (cursors.up.isDown)
+    {
+    	ship.body.thrust(400);
+    }
+
+}
+
+function render() {
+
+	// game.debug.renderText('x: ' + box2.body.velocity.x, 32, 32);
+	// game.debug.renderText('y: ' + box2.body.velocity.y, 32, 64);
+
+}
+