46 tests with assets and javascript code.

Tests/cameras/camera fade.js

@@ -1,42 +0,0 @@
-/// <reference path="../../Phaser/Game.ts" />
-(function () {
-    var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render);
-
-    var circle1, circle2, circle3;
-    var fx;
-
-    function init() {
-        game.world.setSize(800, 600, true);
-        game.load.image('blue', 'assets/tests/blue-circle.png');
-        game.load.image('yellow', 'assets/tests/yellow-circle.png');
-        game.load.image('magenta', 'assets/tests/magenta-circle.png');
-
-        game.load.start();
-    }
-    function create() {
-        circle1 = game.add.sprite(114, 34, 'blue');
-        circle2 = game.add.sprite(426, 86, 'yellow');
-        circle3 = game.add.sprite(221, 318, 'magenta');
-
-        circle1.input.start(0, false, true);
-        circle1.events.onInputUp.add(fade1, this);
-
-        fx = game.camera.fx.add(Phaser.FX.Camera.Fade);
-    }
-    function update() {
-    }
-    function render() {
-        game.camera.fx.render(game.camera,
-            game.camera.x, game.camera.y,
-            game.camera.width, game.camera.height);
-        game.camera.fx.postRender(game.camera,
-            game.camera.x, game.camera.y,
-            game.camera.width, game.camera.height);
-    }
-    function fade1(pointer) {
-        console.log('pressed');
-        fx.start(0.05, 0.5, function() {
-            console.log('fin');
-        });
-    }
-})();

Tests/cameras/camera fx 1.js

@@ -0,0 +1,43 @@
+/// <reference path="../../Phaser/Game.ts" />
+(function () {
+    var game = new Phaser.Game(this, 'game', 800, 600, init, create, null, render);
+
+    var btn1, btn2, btn3;
+    var fx;
+
+    function init() {
+        game.world.setSize(800, 600, true);
+        game.load.image('blue', 'assets/tests/blue-circle.png');
+        game.load.image('yellow', 'assets/tests/yellow-circle.png');
+        game.load.image('magenta', 'assets/tests/magenta-circle.png');
+
+        game.load.start();
+    }
+    function create() {
+        btn1 = game.add.button(114, 34, 'blue', simpleFade, this);
+        btn2 = game.add.button(426, 86, 'yellow', forceFade, this);
+        btn3 = game.add.button(221, 318, 'magenta', fadeWithCallback, this);
+
+        fx = game.camera.fx.add(Phaser.FX.Camera.Fade);
+    }
+    function render() {
+        Phaser.DebugUtils.context.fillStyle = '#fff';
+        Phaser.DebugUtils.context.fillText('Press to fade.', 114 + 90, 34 + 130);
+        Phaser.DebugUtils.context.fillText('Force to fade every time you press it.', 426 + 20, 86 + 130);
+        Phaser.DebugUtils.context.fillText('Popup a window when fade finished.', 221 + 30, 318 + 130);
+    }
+    function simpleFade() {
+        // Simply fade to black in 0.5 seconds.
+        fx.start(0x330033, 0.5);
+    }
+    function forceFade() {
+        // Force restart fade effect each time you pressed the button.
+        fx.start(0x003333, 0.5, null, true);
+    }
+    function fadeWithCallback() {
+        // Popup a alert window when fade finished.
+        fx.start(0x333300, 0.5, function() {
+            alert('Fade finished!');
+        });
+    }
+})();

Tests/cameras/camera fx 2.js

@@ -0,0 +1,44 @@
+/// <reference path="../../Phaser/Game.ts" />
+(function () {
+    var game = new Phaser.Game(this, 'game', 800, 600, init, create, null, render);
+
+    var btn1, btn2, btn3;
+    var fx;
+
+    function init() {
+        game.world.setSize(800, 600, true);
+        game.load.image('blue', 'assets/tests/blue-circle.png');
+        game.load.image('yellow', 'assets/tests/yellow-circle.png');
+        game.load.image('magenta', 'assets/tests/magenta-circle.png');
+
+        game.load.start();
+    }
+    function create() {
+        btn1 = game.add.button(114, 34, 'blue', simpleFlash, this);
+        btn2 = game.add.button(426, 86, 'yellow', forceFlash, this);
+        btn3 = game.add.button(221, 318, 'magenta', flashWithCallback, this);
+
+        // Usage of flash fx is the same as fade.
+        fx = game.camera.fx.add(Phaser.FX.Camera.Flash);
+    }
+    function render() {
+        Phaser.DebugUtils.context.fillStyle = '#fff';
+        Phaser.DebugUtils.context.fillText('Press to flash.', 114 + 90, 34 + 130);
+        Phaser.DebugUtils.context.fillText('Force to flash every time you press it.', 426 + 20, 86 + 130);
+        Phaser.DebugUtils.context.fillText('Popup a window when flash finished.', 221 + 30, 318 + 130);
+    }
+    function simpleFlash() {
+        // Simply flash to black in 0.5 seconds.
+        fx.start(0x330033, 0.5);
+    }
+    function forceFlash() {
+        // Force restart flash effect each time you pressed the button.
+        fx.start(0x003333, 0.5, null, true);
+    }
+    function flashWithCallback() {
+        // Popup a alert window when flash finished.
+        fx.start(0x333300, 0.5, function() {
+            alert('Flash finished!');
+        });
+    }
+})();

Tests/cameras/camera fx 3.js

@@ -0,0 +1,44 @@
+/// <reference path="../../Phaser/Game.ts" />
+(function () {
+    var game = new Phaser.Game(this, 'game', 800, 600, init, create, null, render);
+
+    var btn1, btn2, btn3;
+    var fx;
+
+    function init() {
+        game.world.setSize(800, 600, true);
+        game.load.image('blue', 'assets/tests/blue-circle.png');
+        game.load.image('yellow', 'assets/tests/yellow-circle.png');
+        game.load.image('magenta', 'assets/tests/magenta-circle.png');
+
+        game.load.start();
+    }
+    function create() {
+        btn1 = game.add.button(114, 34, 'blue', simpleShake, this);
+        btn2 = game.add.button(426, 86, 'yellow', forceShake, this);
+        btn3 = game.add.button(221, 318, 'magenta', shakeWithCallback, this);
+
+        // Usage of shake fx is the same as fade and flash.
+        fx = game.camera.fx.add(Phaser.FX.Camera.Shake);
+    }
+    function render() {
+        Phaser.DebugUtils.context.fillStyle = '#fff';
+        Phaser.DebugUtils.context.fillText('Press to shake.', 114 + 90, 34 + 130);
+        Phaser.DebugUtils.context.fillText('Force to shake every time you press it.', 426 + 20, 86 + 130);
+        Phaser.DebugUtils.context.fillText('Popup a window when shake finished.', 221 + 30, 318 + 130);
+    }
+    function simpleShake() {
+        // Simply shake to black in 0.5 seconds.
+        fx.start(0x330033, 0.5);
+    }
+    function forceShake() {
+        // Force restart shake effect each time you pressed the button.
+        fx.start(0x003333, 0.5, null, true);
+    }
+    function shakeWithCallback() {
+        // Popup a alert window when shake finished.
+        fx.start(0x333300, 0.5, function() {
+            alert('Shake finished!');
+        });
+    }
+})();

Tests/cameras/camera scale.js

@@ -0,0 +1,72 @@
+/// <reference path="../../Phaser/Game.ts" />
+(function () {
+    var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render);
+
+    var zombieCamera;
+
+    var zombie;
+    var walkSpeed = 2,
+        direction = 1;
+
+    function init() {
+        game.world.setSize(1280, 600, true);
+        game.load.image('ground', 'assets/tests/ground-2x.png');
+        game.load.image('river', 'assets/tests/river-2x.png');
+        game.load.image('sky', 'assets/tests/sky-2x.png');
+
+        game.load.spritesheet('zombie', 'assets/sprites/metalslug_monster39x40.png', 39, 40);
+
+        game.load.start();
+    }
+    function create() {
+        // Add background images.
+        game.add.sprite(0, 0, 'sky');
+        game.add.sprite(0, 360, 'ground');
+        game.add.sprite(0, 400, 'river');
+
+        // Create zombie spirte
+        zombie = game.add.sprite(480, 336, 'zombie');
+        zombie.animations.add('walk', null, 30, true);
+        zombie.animations.play('walk');
+
+        // Create a small camera which looks at the zombie.
+        // Use the same settings as the default camera.
+        zombieCamera = game.add.camera(0, 0, 800, 600);
+        // Use x and y properties to set the target area.
+        zombieCamera.x = 420;
+        zombieCamera.y = 240;
+        // Resize the camera so that it will only look at 200x200 area.
+        zombieCamera.setSize(200, 200);
+        // Scale the camera to 2.0, now its target will be 100x100.
+        zombieCamera.transform.scale.setTo(2.0, 2.0);
+        // Use setPosition() method to set where the camera rendered
+        // on the screen.
+        zombieCamera.setPosition(0, 0);
+    }
+    function update() {
+        if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT)) {
+            zombieCamera.x -= 2;
+        }
+        else if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT)) {
+            zombieCamera.x += 2;
+        }
+        if (game.input.keyboard.isDown(Phaser.Keyboard.UP)) {
+            zombieCamera.y -= 2;
+        }
+        else if (game.input.keyboard.isDown(Phaser.Keyboard.DOWN)) {
+            zombieCamera.y += 2;
+        }
+        // zombie wandering update
+        zombie.x += walkSpeed * direction;
+        if (zombie.x > 540 || zombie.x < 440) {
+            // Change walk direction.
+            direction *= -1;
+            // Flip zombie's animation.
+            zombie.texture.flippedX = !zombie.texture.flippedX;
+        }
+    }
+    function render() {
+        game.camera.renderDebugInfo(32, 32);
+        zombieCamera.renderDebugInfo(32, 128);
+    }
+})();

Tests/cameras/hide from camera.js

@@ -0,0 +1,53 @@
+/// <reference path="../../Phaser/Game.ts" />
+(function () {
+    var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render);
+
+    var radar;
+    var ships = [];
+
+    var enemyCamera;
+
+    function init() {
+        game.world.setSize(800, 600, true);
+        game.load.image('radar-surface', 'assets/tests/radar-surface.png');
+        game.load.image('ship', 'assets/sprites/asteroids_ship_white.png');
+        game.load.image('enemy-ship', 'assets/sprites/asteroids_ship.png');
+
+        game.load.start();
+    }
+    function create() {
+        // Add enemies and our ship the the world.
+        for (var i = 0; i < 4; i++) {
+            ships.push(game.add.sprite(100 + i * 10, 280 + i * 16, 'enemy-ship'));
+        }
+        var ourShip = game.add.sprite(160, 300, 'ship');
+        ships.push(ourShip);
+
+        // Radar sprite is a HUD.
+        radar = game.add.sprite(0, 0, 'radar-surface');
+        radar.transform.scrollFactor.setTo(0, 0);
+
+        // Make the default camera rendered on the left half screen.
+        game.camera.setSize(400, 600);
+        // Add a new camera and render it on the right half screen.
+        // The newly created is the enemies' camera, which cannot "see" our ship.
+        enemyCamera = game.add.camera(0, 0, 800, 600);
+        enemyCamera.setSize(400, 600);
+        enemyCamera.setPosition(400, 0);
+
+        // Hide our ship on the enemies' camera.
+        enemyCamera.hide(ourShip);
+    }
+    function update() {
+        for (var i = 0; i < ships.length; i++) {
+            ships[i].x += 1;
+            if (ships[i].x > 400) {
+                ships[i].x = 40;
+            }
+        }
+    }
+    function render() {
+        Phaser.DebugUtils.context.fillStyle = '#fff';
+        Phaser.DebugUtils.context.fillText('Left is the player\'s camera, and right is the enemies\' camera.', 32, 100);
+    }
+})();

Tests/cameras/multi camera.js

@@ -19,22 +19,27 @@
         game.load.start();
     }
     function create() {
-        // background images
+        // Add background images.
         game.add.sprite(0, 0, 'sky');
         game.add.sprite(0, 360, 'ground');
         game.add.sprite(0, 400, 'river');
 
-        // zombie spirte
+        // Create zombie spirte
         zombie = game.add.sprite(480, 336, 'zombie');
         zombie.animations.add('walk', null, 30, true);
         zombie.animations.play('walk');
 
-        // create a small camera which looks at the zombie
+        // Create a small camera which looks at the zombie.
+        // Use the same settings as the default camera.
         zombieCamera = game.add.camera(0, 0, 800, 600);
+        // Use x and y properties to set the target area.
         zombieCamera.x = 420;
         zombieCamera.y = 240;
-        zombieCamera.setPosition(0, 0);
+        // Resize the camera so that it will only look at 200x200 area.
         zombieCamera.setSize(200, 200);
+        // Use setPosition() method to set where the camera rendered
+        // on the screen.
+        zombieCamera.setPosition(0, 0);
     }
     function update() {
         if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT)) {
@@ -52,8 +57,10 @@
         // zombie wandering update
         zombie.x += walkSpeed * direction;
         if (zombie.x > 540 || zombie.x < 440) {
+            // Change walk direction.
             direction *= -1;
-            zombie.transform.scale.setTo(direction, 1);
+            // Flip zombie's animation.
+            zombie.texture.flippedX = !zombie.texture.flippedX;
         }
     }
     function render() {

Tests/cameras/radar template.js

@@ -1,47 +0,0 @@
-/// <reference path="../../Phaser/Game.ts" />
-(function () {
-    var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render);
-
-    var radar;
-    var ships = [];
-
-    var button;
-
-    function init() {
-        game.world.setSize(800, 600, true);
-        game.load.image('radar-surface', 'assets/tests/radar-surface.png');
-        game.load.image('ship', 'assets/sprites/asteroids_ship_white.png');
-        game.load.image('enemy-ship', 'assets/sprites/asteroids_ship.png');
-
-        game.load.image('button', 'assets/tests/320x200.png');
-
-        game.load.start();
-    }
-    function create() {
-        for (var i = 0; i < 4; i++) {
-            ships.push(game.add.sprite(100 + i * 10, 300 + i * 16, 'ship'));
-        }
-        ships.push(game.add.sprite(160, 320, 'enemy-ship'));
-        radar = game.add.sprite(0, 0, 'radar-surface');
-
-        game.camera.setSize(400, 600);
-        var camera2 = game.add.camera(0, 0, 400, 600);
-        camera2.x = 400;
-
-        button = game.add.sprite(500, 100, 'button');
-        button.input.start(0, false, true);
-    }
-    function update() {
-        if (button.input.justReleased(0, 20)) {
-        }
-
-        for (var i = 0; i < ships.length; i++) {
-            ships[i].x += 1;
-            if (ships[i].x > 400) {
-                ships[i].x = 40;
-            }
-        }
-    }
-    function render() {
-    }
-})();

Tests/groups/add to group 1.js

@@ -0,0 +1,40 @@
+/// <reference path="../../Phaser/Game.ts" />
+(function () {
+    var game = new Phaser.Game(this, 'game', 800, 600, init, create, null, render);
+
+    var friendAndFoe,
+        enemies;
+
+    function init() {
+        game.load.image('ufo', 'assets/sprites/ufo.png');
+        game.load.image('baddie', 'assets/sprites/space-baddie.png');
+        game.load.start();
+    }
+    function create() {
+        // Create some local groups for later use.
+        friendAndFoe = game.add.group();
+        enemies = game.add.group();
+
+        // Use game.add (GameObjectFactory) to create sprites, those
+        // newly created ones will be added to game.world.group
+        // automatically. While you can still use new to allocate and
+        // only add them to your own groups.
+        var ufo = game.add.sprite(200, 240, 'ufo');
+        friendAndFoe.add(ufo);
+
+        // Create some enemies using new keyword.
+        // (Don't forget to pass game as the first parameter.)
+        var enemy;
+        for (var i = 0; i < 16; i++) {
+            enemy = new Phaser.Sprite(game,
+                360 + Math.random() * 200, 120 + Math.random() * 200,
+                'baddie');
+            enemies.add(enemy);
+        }
+    }
+    function render() {
+        Phaser.DebugUtils.context.fillStyle = '#fff';
+        Phaser.DebugUtils.context.fillText('ufo added to game.world.group and "friendAndFoe" group', 16, 24);
+        Phaser.DebugUtils.context.fillText('others ONLY added to "enemies" group', 16, 40);
+    }
+})();

Tests/groups/add to group 2.js

@@ -0,0 +1,37 @@
+/// <reference path="../../Phaser/Game.ts" />
+(function () {
+    var game = new Phaser.Game(this, 'game', 800, 600, init, create, null, render);
+    function init() {
+        game.load.image('ufo', 'assets/sprites/ufo.png');
+        game.load.image('baddie', 'assets/sprites/space-baddie.png');
+        game.load.start();
+    }
+    function create() {
+        // Create some local groups for later use.
+        friendAndFoe = game.add.group();
+        enemies = game.add.group();
+
+        // You can directly create sprite and add it to a group
+        // using just one line. (One thing you should know is, the body type
+        // of this sprite is set to BODY_DINAMIC by default, while it's
+        // BODY_DISABLED by default using other creating methods.)
+        friendAndFoe.addNewSprite(200, 240, 'ufo', null, Phaser.Types.BODY_DISABLED);
+
+        // Create some enemies.
+        for (var i = 0; i < 8; i++) {
+            createBaddie();
+        }
+
+        // Tap to create new baddie sprites.
+        game.input.onTap.add(createBaddie, this);
+    }
+    function createBaddie() {
+        enemies.addNewSprite(360 + Math.random() * 200, 120 + Math.random() * 200,
+            'baddie', null,
+            Phaser.Types.BODY_DISABLED);
+    }
+    function render() {
+        Phaser.DebugUtils.context.fillStyle = '#fff';
+        Phaser.DebugUtils.context.fillText('Tap screen or click to create new baddies.', 16, 24);
+    }
+})();

Tests/groups/bring to top.js

@@ -0,0 +1,30 @@
+(function() {
+    var game = new Phaser.Game(this, 'game', 800, 600, init, create, null, render);
+
+    var container;
+
+    function init() {
+        game.load.spritesheet('button', 'assets/buttons/number-buttons.png', 160, 160);
+        game.load.start();
+    }
+    function create() {
+        // Container for sorting the buttons, which we'll use to make buttons
+        // to the top later.
+        container = game.add.group();
+
+        // Add buttons to container.
+        container.add(game.add.button(200, 100, 'button', bringMeToTop, this, 0, 0, 0));
+        container.add(game.add.button(300, 100, 'button', bringMeToTop, this, 1, 1, 1));
+        container.add(game.add.button(100, 200, 'button', bringMeToTop, this, 2, 2, 2));
+        container.add(game.add.button(400, 200, 'button', bringMeToTop, this, 3, 3, 3));
+        container.add(game.add.button(300, 300, 'button', bringMeToTop, this, 4, 4, 4));
+        container.add(game.add.button(200, 300, 'button', bringMeToTop, this, 5, 5, 5));
+    }
+    function render() {
+        Phaser.DebugUtils.context.fillStyle = '#fff';
+        Phaser.DebugUtils.context.fillText('Tap or click buttons to bring it to the top.', 32, 32);
+    }
+    function bringMeToTop(btn) {
+        container.bringToTop(btn);
+    }
+})();

Tests/groups/call all.js

@@ -0,0 +1,37 @@
+/// <reference path="../../Phaser/Game.ts" />
+(function () {
+    var game = new Phaser.Game(this, 'game', 800, 600, init, create, null, render);
+
+    function init() {
+        game.load.spritesheet('item', 'assets/buttons/number-buttons-90x90.png', 90, 90);
+        game.load.image('reviveBtn', 'assets/buttons/revive-button.png');
+        game.load.start();
+    }
+    function create() {
+        // Add some items.
+        var item;
+        for (var i = 0; i < 3; i++) {
+            // Give the items a different alpha increase speed.
+            item = game.add.sprite(290, 98 * (i + 1), 'item', i);
+            // Enable input.
+            item.input.start(0, false, true);
+            item.events.onInputUp.add(kill);
+            // An item besides the left one.
+            item = game.add.sprite(388, 98 * (i + 1), 'item', i + 3);
+            item.input.start(0, false, true);
+            item.events.onInputUp.add(kill);
+        }
+        // Add a button to revive all the items.
+        game.add.button(270, 400, 'reviveBtn', reviveAll, this, 0, 0, 0);
+    }
+    function kill(item) {
+        item.kill();
+    }
+    function reviveAll() {
+        game.world.group.callAll('revive');
+    }
+    function render() {
+        Phaser.DebugUtils.context.fillStyle = '#fff';
+        Phaser.DebugUtils.context.fillText('Tap or click an item to kill it, and press the revive button to revive them all.', 160, 500);
+    }
+})();

Tests/groups/direct render.js

@@ -0,0 +1,38 @@
+/// <reference path="../../Phaser/Game.ts" />
+(function () {
+    var game = new Phaser.Game(this, 'game', 800, 600, init, create, null, render);
+
+    // Left and right group.
+    var left, right;
+    // The first selected item.
+    var selected = null;
+
+    function init() {
+        game.load.spritesheet('item', 'assets/buttons/number-buttons-90x90.png', 90, 90);
+        game.load.start();
+    }
+    function create() {
+        left = game.add.group();
+        right = new Phaser.Group(game);
+        // Add some items to left side, and set a onDragStop listener
+        // to limit its location when dropped.
+        var item;
+        for (var i = 0; i < 3; i++) {
+            // Directly create sprites from the left group.
+            item = left.addNewSprite(250, 98 * (i + 1), 'item', i, Phaser.Types.BODY_DISABLED);
+            // Add another to the right group.
+            item = right.addNewSprite(348, 98 * (i + 1), 'item', i + 3, Phaser.Types.BODY_DISABLED);
+        }
+
+        exCamera = game.add.camera(0, 0, 800, 600);
+        exCamera.setPosition(120, 0);
+    }
+    function render() {
+        right.directRender(exCamera);
+
+        Phaser.DebugUtils.context.fillStyle = '#fff';
+        Phaser.DebugUtils.context.fillText('Left Group', 300, 80);
+        Phaser.DebugUtils.context.fillText('Right Group', 400, 80);
+        Phaser.DebugUtils.context.fillText('Left group is normally rendered, while the right one is ONLY rendered directly to another camera.', 120, 480);
+    }
+})();

Tests/groups/for each.js

@@ -0,0 +1,35 @@
+/// <reference path="../../Phaser/Game.ts" />
+(function () {
+    var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render);
+
+    var baseAlphaIncSpeed = 0.006;
+
+    function init() {
+        game.load.spritesheet('item', 'assets/buttons/number-buttons-90x90.png', 90, 90);
+        game.load.start();
+    }
+    function create() {
+        // Add some items.
+        for (var i = 0; i < 3; i++) {
+            game.add.sprite(290, 98 * (i + 1), 'item', i)
+                .alphaIncSpeed = baseAlphaIncSpeed * (i + 1);
+            game.add.sprite(388, 98 * (i + 1), 'item', i + 3)
+                .alphaIncSpeed = baseAlphaIncSpeed * (i + 4);
+        }
+    }
+    function update() {
+        // Animating alpha property of each item using forEach() method.
+        game.world.group.forEach(function(item) {
+            // Update alpha first.
+            item.alpha -= item.alphaIncSpeed;
+            // Check for switch between increasing and descreasing.
+            if (item.alpha < 0.001 || item.alpha > 0.999) {
+                item.alphaIncSpeed *= -1;
+            }
+        });
+    }
+    function render() {
+        Phaser.DebugUtils.context.fillStyle = '#fff';
+        Phaser.DebugUtils.context.fillText('Alpha of items is always changing.', 280, 480);
+    }
+})();

Tests/groups/get first 1.js

@@ -0,0 +1,44 @@
+/// <reference path="../../Phaser/Game.ts" />
+(function () {
+    var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render);
+
+    var timer, cycle;
+
+    function init() {
+        game.load.spritesheet('item', 'assets/buttons/number-buttons-90x90.png', 90, 90);
+        game.load.image('reviveBtn', 'assets/buttons/revive-button.png');
+        game.load.start();
+    }
+    function create() {
+        // Add some items.
+        var item;
+        for (var i = 0; i < 3; i++) {
+            // Give the items a different alpha increase speed.
+            item = game.add.sprite(290, 98 * (i + 1), 'item', i);
+            // An item besides the left one.
+            item = game.add.sprite(388, 98 * (i + 1), 'item', i + 3);
+        }
+
+        // Set a timer so we can perform an action after a delay.
+        timer = 0;
+        cycle = 1000;
+    }
+    function update() {
+        // Update timer.
+        timer += game.time.delta;
+        if (timer > cycle) {
+            timer -= cycle;
+            // Get the first alive item and kill it.
+            var item = game.world.group.getFirstAlive();
+            if (item) {
+                item.kill();
+            }
+        }
+    }
+    function render() {
+        Phaser.DebugUtils.context.fillStyle = '#fff';
+        Phaser.DebugUtils.context.fillText('One item will be killed each second.', 280, 420);
+        // Get living and dead number of a group.
+        Phaser.DebugUtils.context.fillText('Living: ' + game.world.group.countLiving() + ', Dead: ' + game.world.group.countDead(), 330, 440);
+    }
+})();

Tests/groups/get first 2.js

@@ -0,0 +1,49 @@
+/// <reference path="../../Phaser/Game.ts" />
+(function () {
+    var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render);
+
+    var timer, cycle;
+
+    function init() {
+        game.load.spritesheet('item', 'assets/buttons/number-buttons-90x90.png', 90, 90);
+        game.load.image('reviveBtn', 'assets/buttons/revive-button.png');
+        game.load.start();
+    }
+    function create() {
+        // Add some items.
+        var item;
+        for (var i = 0; i < 3; i++) {
+            // Give the items a different alpha increase speed.
+            item = game.add.sprite(290, 98 * (i + 1), 'item', i);
+            // An item besides the left one.
+            item = game.add.sprite(388, 98 * (i + 1), 'item', i + 3);
+        }
+
+        // Set a timer so we can perform an action after a delay.
+        timer = 0;
+        cycle = 1000;
+    }
+    function update() {
+        // Update timer.
+        timer += game.time.delta;
+        if (timer > cycle) {
+            timer -= cycle;
+            // Get an alive item from the group randomly, so it may not
+            // be the first to be killed.
+            // Also you can specific a range, only items between that range
+            // will be found and return.
+            // Set a range of (0, 5), so the first item will not be kill at all.
+            var item = game.world.group.getRandom(1, 5);
+            if (item) {
+                item.kill();
+            }
+        }
+    }
+    function render() {
+        Phaser.DebugUtils.context.fillStyle = '#fff';
+        Phaser.DebugUtils.context.fillText('One item will be killed each second.', 280, 420);
+        Phaser.DebugUtils.context.fillText('Yet the first one will NEVER be killed since we use a range from 1 to 5 for selection.', 140, 432);
+        // Get living and dead number of a group.
+        Phaser.DebugUtils.context.fillText('Living: ' + game.world.group.countLiving() + ', Dead: ' + game.world.group.countDead(), 330, 460);
+    }
+})();

Tests/groups/get first 3.js

@@ -0,0 +1,58 @@
+/// <reference path="../../Phaser/Game.ts" />
+(function () {
+    var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render);
+
+    var killTimer, reviveTimer, cycle;
+
+    function init() {
+        game.load.spritesheet('item', 'assets/buttons/number-buttons-90x90.png', 90, 90);
+        game.load.image('reviveBtn', 'assets/buttons/revive-button.png');
+        game.load.start();
+    }
+    function create() {
+        // Add some items.
+        var item;
+        for (var i = 0; i < 3; i++) {
+            // Give the items a different alpha increase speed.
+            item = game.add.sprite(290, 98 * (i + 1), 'item', i);
+            // An item besides the left one.
+            item = game.add.sprite(388, 98 * (i + 1), 'item', i + 3);
+        }
+
+        // Set a timer so we can perform an action after a delay.
+        killTimer = 0;
+        // Another timer for reviving.
+        reviveTimer = 0;
+        cycle = 1000;
+    }
+    function update() {
+        // Update timers.
+        killTimer += game.time.delta;
+        reviveTimer += game.time.delta;
+
+        // Kill first alive item every "cycle" duration.
+        if (killTimer > cycle) {
+            killTimer -= cycle;
+            // Get an alive item from the group and kill it.
+            var item = game.world.group.getFirstAlive();
+            if (item) {
+                item.kill();
+            }
+        }
+        // Revive first dead item every 1.5 "cycle" duration.
+        if (reviveTimer > cycle * 1.5) {
+            reviveTimer -= cycle * 1.5;
+            // Get a dead item from the group and revive it.
+            var item = game.world.group.getFirstDead();
+            if (item) {
+                item.revive();
+            }
+        }
+    }
+    function render() {
+        Phaser.DebugUtils.context.fillStyle = '#fff';
+        Phaser.DebugUtils.context.fillText('One item will be killed each second and revived later.', 240, 420);
+        // Get living and dead number of a group.
+        Phaser.DebugUtils.context.fillText('Living: ' + game.world.group.countLiving() + ', Dead: ' + game.world.group.countDead(), 330, 440);
+    }
+})();

Tests/groups/group as layer.js

@@ -0,0 +1,74 @@
+/// <reference path="../../Phaser/Game.ts" />
+(function () {
+    var game = new Phaser.Game(this, 'game', 800, 600, init, create, null, render);
+    function init() {
+        game.world.setSize(1280, 800, true);
+
+        game.load.image('ground', 'assets/tests/ground-2x.png');
+        game.load.image('river', 'assets/tests/river-2x.png');
+        game.load.image('sky', 'assets/tests/sky-2x.png');
+        game.load.image('cloud0', 'assets/tests/cloud-big-2x.png');
+        game.load.image('cloud1', 'assets/tests/cloud-narrow-2x.png');
+        game.load.image('cloud2', 'assets/tests/cloud-small-2x.png');
+
+        game.load.spritesheet('ufo', 'assets/sprites/ufo.png', 24, 21);
+
+        game.load.start();
+    }
+    function create() {
+        // Create the sky layer, behind everything and donot move.
+        var skyLayer = game.add.group();
+        skyLayer.z = 0;
+        // Create the cloud layer, only beyond the sky.
+        var cloudLayer = game.add.group();
+        cloudLayer.z = 1;
+        // Create the ground, behind the river and beyond clouds.
+        var groundLayer = game.add.group();
+        groundLayer.z = 2;
+        // Create the sprite layer. This should behind the river,
+        // and beyond the ground, cloud and sky layer.
+        var spriteLayer = game.add.group();
+        spriteLayer.z = 3;
+        // Create the river layer, beyond everything.
+        var riverLayer = game.add.group();
+        riverLayer.z = 4;
+
+        // Add sky background to skyLayer.
+        var sky = new Phaser.Sprite(game, 0, 0, 'sky');
+        sky.transform.scrollFactor.setTo(0, 0);
+        skyLayer.add(sky);
+        // Add clouds to cloudLayer.
+        var cloud0 = new Phaser.Sprite(game, 200, 120, 'cloud0');
+        cloud0.transform.scrollFactor.setTo(0.3, 0.1);
+        var cloud1 = new Phaser.Sprite(game, -60, 120, 'cloud1');
+        cloud1.transform.scrollFactor.setTo(0.5, 0.1);
+        var cloud2 = new Phaser.Sprite(game, 900, 170, 'cloud2');
+        cloud2.transform.scrollFactor.setTo(0.7, 0.1);
+        cloudLayer.add(cloud0);
+        cloudLayer.add(cloud1);
+        cloudLayer.add(cloud2);
+        // Add ground sprite to groundLayer.
+        var ground = new Phaser.Sprite(game, 0, 360, 'ground');
+        ground.transform.scrollFactor.setTo(0.5, 0.1);
+        groundLayer.add(ground);
+        // Add river to riverLayer.
+        var river = new Phaser.Sprite(game, 0, 400, 'river');
+        river.transform.scrollFactor.setTo(1.3, 0.16);
+        riverLayer.add(river);
+
+        // Add animating sprites to spriteLayer.
+        var ufo = new Phaser.Sprite(game, 360, 240, 'ufo');
+        ufo.animations.add('fly', null, 0, false);
+        ufo.animations.play('fly');
+        ufo.transform.origin.setTo(0.5, 0.5);
+        spriteLayer.add(ufo);
+    }
+    function render() {
+        Phaser.DebugUtils.context.fillStyle = '#fff';
+        Phaser.DebugUtils.context.fillText('sky layer:    z = 0', 16, 20);
+        Phaser.DebugUtils.context.fillText('cloud layer:  z = 1', 16, 36);
+        Phaser.DebugUtils.context.fillText('ground layer: z = 2', 16, 52);
+        Phaser.DebugUtils.context.fillText('sprite layer: z = 3', 16, 68);
+        Phaser.DebugUtils.context.fillText('river layer:  z = 4', 16, 84);
+    }
+})();

Tests/groups/group texture.js

@@ -0,0 +1,21 @@
+/// <reference path="../../Phaser/Game.ts" />
+(function () {
+    var game = new Phaser.Game(this, 'game', 800, 600, init, create, null, render);
+
+    var robot;
+    var eye, body, leftArm, rightArm, leftLeg, rightLeg;
+
+    function init() {
+        game.load.spritesheet('buttons', 'assets/buttons/number-buttons.png', 90, 90);
+        game.load.start();
+    }
+    function create() {
+        // Add 6 groups and childs.
+        var item = game.add.group();
+        item.texture.loadImage('buttons');
+    }
+    function render() {
+        Phaser.DebugUtils.context.fillStyle = 'rgb(0, 160, 213)';
+        Phaser.DebugUtils.context.fillText('Group can have a texture too, so you can use it just like a simple sprite.', 180, 380);
+    }
+})();

Tests/groups/group transform 1.js

@@ -0,0 +1,65 @@
+/// <reference path="../../Phaser/Game.ts" />
+(function () {
+    var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render);
+
+    var robot;
+    var eye, body, leftArm, rightArm, leftLeg, rightLeg;
+
+    function init() {
+        game.load.image('eye', 'assets/sprites/robot/eye.png');
+        game.load.image('body', 'assets/sprites/robot/body.png');
+        game.load.image('arm-l', 'assets/sprites/robot/arm-l.png');
+        game.load.image('arm-r', 'assets/sprites/robot/arm-r.png');
+        game.load.image('leg-l', 'assets/sprites/robot/leg-l.png');
+        game.load.image('leg-r', 'assets/sprites/robot/leg-r.png');
+        game.load.start();
+    }
+    function create() {
+        // Add some items.
+        var item;
+        for (var i = 0; i < 3; i++) {
+            // Give the items a different alpha increase speed.
+            item = game.add.sprite(290, 98 * (i + 1), 'item', i);
+            // An item besides the left one.
+            item = game.add.sprite(388, 98 * (i + 1), 'item', i + 3);
+        }
+        // Use groups of sprites to create a big robot.
+        // Robot itself, you can subclass group class in a real game.
+        robot = game.add.group();
+        // Robot components.
+        leftArm = robot.addNewSprite(90, 175, 'arm-l', 0, Phaser.Types.BODY_DISABLED);
+        rightArm = robot.addNewSprite(549, 175, 'arm-r', 0, Phaser.Types.BODY_DISABLED);
+        leftLeg = robot.addNewSprite(270, 325, 'leg-l', 0, Phaser.Types.BODY_DISABLED);
+        rightLeg = robot.addNewSprite(410, 325, 'leg-r', 0, Phaser.Types.BODY_DISABLED);
+        body = robot.addNewSprite(219, 32, 'body', 0, Phaser.Types.BODY_DISABLED);
+        eye = robot.addNewSprite(335, 173,'eye', 0, Phaser.Types.BODY_DISABLED);
+
+        leftArm.input.start(0, false, true);
+        leftArm.input.enableDrag();
+        rightArm.input.start(0, false, true);
+        rightArm.input.enableDrag();
+        leftLeg.input.start(0, false, true);
+        leftLeg.input.enableDrag();
+        rightLeg.input.start(0, false, true);
+        rightLeg.input.enableDrag();
+        body.input.start(0, false, true);
+        body.input.enableDrag();
+        eye.input.start(0, false, true);
+        eye.input.enableDrag();
+    }
+    function update() {
+    }
+    function render() {
+        Phaser.DebugUtils.renderSpriteInfo(leftArm, 32, 32);
+        Phaser.DebugUtils.renderSpriteInfo(rightArm, 32, 152);
+        Phaser.DebugUtils.renderSpriteInfo(leftLeg, 32, 272);
+        Phaser.DebugUtils.renderSpriteInfo(rightLeg, 32, 392);
+        Phaser.DebugUtils.renderSpriteInfo(rightLeg, 450, 32);
+        Phaser.DebugUtils.renderSpriteInfo(rightLeg, 450, 152);
+
+        Phaser.DebugUtils.context.fillStyle = 'rgb(0, 160, 213)';
+        Phaser.DebugUtils.context.fillText('The robot is a group and every component is a sprite.', 240, 580);
+        // Phaser.DebugUtils.context.fillText('Drag each part to re-position them.', 288, 592);
+        Phaser.DebugUtils.context.fillText('Drag each part to re-position them. ', 288, 592);
+    }
+})();

Tests/groups/group transform 2.js

@@ -0,0 +1,48 @@
+/// <reference path="../../Phaser/Game.ts" />
+(function () {
+    var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render);
+
+    var robot;
+    var eye, body, leftArm, rightArm, leftLeg, rightLeg;
+    var draggable;
+
+    function init() {
+        game.load.image('eye', 'assets/sprites/robot/eye.png');
+        game.load.image('body', 'assets/sprites/robot/body.png');
+        game.load.image('arm-l', 'assets/sprites/robot/arm-l.png');
+        game.load.image('arm-r', 'assets/sprites/robot/arm-r.png');
+        game.load.image('leg-l', 'assets/sprites/robot/leg-l.png');
+        game.load.image('leg-r', 'assets/sprites/robot/leg-r.png');
+
+        game.load.start();
+    }
+    function create() {
+        // Add some items.
+        var item;
+        for (var i = 0; i < 3; i++) {
+            // Give the items a different alpha increase speed.
+            item = game.add.sprite(290, 98 * (i + 1), 'item', i);
+            // An item besides the left one.
+            item = game.add.sprite(388, 98 * (i + 1), 'item', i + 3);
+        }
+        // Use groups of sprites to create a big robot.
+        // Robot itself, you can subclass group class in a real game.
+        robot = game.add.group();
+        // Robot components.
+        leftArm = robot.addNewSprite(90, 175, 'arm-l', 0, Phaser.Types.BODY_DISABLED);
+        rightArm = robot.addNewSprite(549, 175, 'arm-r', 0, Phaser.Types.BODY_DISABLED);
+        leftLeg = robot.addNewSprite(270, 325, 'leg-l', 0, Phaser.Types.BODY_DISABLED);
+        rightLeg = robot.addNewSprite(410, 325, 'leg-r', 0, Phaser.Types.BODY_DISABLED);
+        body = robot.addNewSprite(219, 32, 'body', 0, Phaser.Types.BODY_DISABLED);
+        eye = robot.addNewSprite(335, 173,'eye', 0, Phaser.Types.BODY_DISABLED);
+    }
+    function update() {
+        // Change parent's rotation to change all the childs.
+        // robot.transform.rotation += 2;
+        game.world.group.transform.rotation += 2;
+    }
+    function render() {
+        Phaser.DebugUtils.context.fillStyle = 'rgb(0, 160, 213)';
+        Phaser.DebugUtils.context.fillText('The robot is a group and every component is a sprite.', 240, 580);
+    }
+})();

Tests/groups/group transform 3.js

@@ -0,0 +1,51 @@
+/// <reference path="../../Phaser/Game.ts" />
+(function () {
+    var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render);
+
+    var robot;
+    var eye, body, leftArm, rightArm, leftLeg, rightLeg;
+    var draggable;
+
+    function init() {
+        game.load.image('eye', 'assets/sprites/robot/eye.png');
+        game.load.image('body', 'assets/sprites/robot/body.png');
+        game.load.image('arm-l', 'assets/sprites/robot/arm-l.png');
+        game.load.image('arm-r', 'assets/sprites/robot/arm-r.png');
+        game.load.image('leg-l', 'assets/sprites/robot/leg-l.png');
+        game.load.image('leg-r', 'assets/sprites/robot/leg-r.png');
+
+        game.load.start();
+    }
+    function create() {
+        // Add some items.
+        var item;
+        for (var i = 0; i < 3; i++) {
+            // Give the items a different alpha increase speed.
+            item = game.add.sprite(290, 98 * (i + 1), 'item', i);
+            // An item besides the left one.
+            item = game.add.sprite(388, 98 * (i + 1), 'item', i + 3);
+        }
+        // Use groups of sprites to create a big robot.
+        // Robot itself, you can subclass group class in a real game.
+        robot = game.add.group();
+        // Robot components.
+        leftArm = robot.addNewSprite(90, 175, 'arm-l', 0, Phaser.Types.BODY_DISABLED);
+        rightArm = robot.addNewSprite(549, 175, 'arm-r', 0, Phaser.Types.BODY_DISABLED);
+        leftLeg = robot.addNewSprite(270, 325, 'leg-l', 0, Phaser.Types.BODY_DISABLED);
+        rightLeg = robot.addNewSprite(410, 325, 'leg-r', 0, Phaser.Types.BODY_DISABLED);
+        body = robot.addNewSprite(219, 32, 'body', 0, Phaser.Types.BODY_DISABLED);
+        eye = robot.addNewSprite(335, 173,'eye', 0, Phaser.Types.BODY_DISABLED);
+
+        // Tween the robot's size, so all the components also scaled.
+        // game.add.tween(robot.transform.scale)
+        game.add.tween(game.world.group.transform.scale)
+            .to({x: 1.2, y: 1.2}, 1000, Phaser.Easing.Back.InOut, true, 0, false)
+            .yoyo(true);
+    }
+    function update() {
+    }
+    function render() {
+        Phaser.DebugUtils.context.fillStyle = 'rgb(0, 160, 213)';
+        Phaser.DebugUtils.context.fillText('The robot is a group and every component is a sprite.', 240, 580);
+    }
+})();

Tests/groups/recycle 1.js

@@ -0,0 +1,46 @@
+/// <reference path="../../Phaser/Game.ts" />
+(function () {
+    var game = new Phaser.Game(this, 'game', 800, 600, init, create, null, render);
+    function init() {
+        game.load.image('ufo', 'assets/sprites/ufo.png');
+        game.load.image('baddie', 'assets/sprites/space-baddie.png');
+        game.load.spritesheet('button', 'assets/buttons/baddie-buttons.png', 224, 70);
+        game.load.start();
+    }
+    function create() {
+        // Create some local groups for later use.
+        friendAndFoe = game.add.group();
+        enemies = game.add.group();
+
+        // Create a ufo.
+        friendAndFoe.addNewSprite(200, 240, 'ufo', null, Phaser.Types.BODY_DISABLED);
+
+        // Create some enemies.
+        for (var i = 0; i < 8; i++) {
+            createBaddie();
+        }
+
+        // Create buttons to create and kill baddies.
+        game.add.button(16, 50, 'button', createBaddie, 0, 0, 0);
+        game.add.button(16, 130, 'button', killBaddie, 1, 1, 1);
+    }
+    function killBaddie() {
+        var baddie = enemies.getFirstAlive();
+        if (baddie) baddie.kill();
+    }
+    function createBaddie() {
+        // Group's recycle() method will always return a valid object unless
+        // you did not pass an objectClass parameter.
+        // It will create new object instance of the given class if no "dead"
+        // object can be found inside the group.
+        var enemy = enemies.recycle(Phaser.Sprite);
+        enemy.texture.loadImage('baddie', false);
+        enemy.texture.opaque = false;
+        enemy.x = 360 + Math.random() * 200;
+        enemy.y = 120 + Math.random() * 200;
+    }
+    function render() {
+        Phaser.DebugUtils.context.fillStyle = '#fff';
+        Phaser.DebugUtils.context.fillText('Add new baddies using recyle() instead of allocating new object every time.', 16, 24);
+    }
+})();

Tests/groups/recycle 2.js

@@ -0,0 +1,49 @@
+/// <reference path="../../Phaser/Game.ts" />
+(function () {
+    var game = new Phaser.Game(this, 'game', 800, 600, init, create, null, render);
+    function init() {
+        game.load.image('ufo', 'assets/sprites/ufo.png');
+        game.load.image('baddie', 'assets/sprites/space-baddie.png');
+        game.load.spritesheet('button', 'assets/buttons/baddie-buttons.png', 224, 70);
+        game.load.start();
+    }
+    function create() {
+        // Create some local groups for later use.
+        friendAndFoe = game.add.group();
+        enemies = game.add.group();
+
+        // Create a ufo.
+        friendAndFoe.addNewSprite(200, 240, 'ufo', null, Phaser.Types.BODY_DISABLED);
+
+        // Create some enemies.
+        for (var i = 0; i < 8; i++) {
+            // Since the getFirstAvailable() which we'll use for recycling
+            // cannot allocate new objects, create them manually here.
+            enemies.addNewSprite(360 + Math.random() * 200, 120 + Math.random() * 200,
+                'baddie', null, Phaser.Types.BODY_DISABLED);
+        }
+
+        // Create buttons to create and kill baddies.
+        game.add.button(16, 50, 'button', createBaddie, 0, 0, 0);
+        game.add.button(16, 130, 'button', killBaddie, 1, 1, 1);
+    }
+    function killBaddie() {
+        var baddie = enemies.getFirstAlive();
+        if (baddie) baddie.kill();
+    }
+    function createBaddie() {
+        // Recycle using getFirstAvailable() as an alternative to recycle().
+        // Notice that this method will not create new objects if there's no one
+        // available, and it won't change size of this group.
+        var enemy = enemies.getFirstAvailable();
+        if (enemy) {
+            enemy.revive();
+        }
+    }
+    function render() {
+        Phaser.DebugUtils.context.fillStyle = '#fff';
+        Phaser.DebugUtils.context.fillText('Recycle baddies from a group using getFirstAvailable() instead of recycle().', 16, 24);
+        Phaser.DebugUtils.context.fillText('Notice that you cannot add more than 8 baddies since we only create 8 instance.', 16, 36);
+        Phaser.DebugUtils.context.fillText('Living baddies: ' + enemies.countLiving(), 340, 420);
+    }
+})();

Tests/groups/remove.js

@@ -0,0 +1,65 @@
+/// <reference path="../../Phaser/Game.ts" />
+(function () {
+    var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render);
+
+    // Group contains items.
+    var items;
+
+    function init() {
+        game.load.spritesheet('item', 'assets/buttons/number-buttons-90x90.png', 90, 90);
+        game.load.image('rect', 'assets/tests/200x100corners.png');
+        game.load.image('rect2', 'assets/tests/200x100corners2.png');
+        game.load.start();
+    }
+    function create() {
+        // Create item container group.
+        items = game.add.group();
+
+        // Add some items and add them to the container group,
+        // then you can drag and drop them to remove.
+        var item;
+        for (var i = 0; i < 6; i++) {
+            // Directly create sprites from the group.
+            item = items.addNewSprite(90, 90 * i, 'item', i, Phaser.Types.BODY_DISABLED);
+            // Enable input detection, then it's possible be dragged.
+            item.input.start(0, false, true);
+            // Make this item draggable.
+            item.input.enableDrag();
+            // Then we make it snap to 90x90 grids.
+            item.input.enableSnap(90, 90, false, true);
+            // Add a handler to remove it using different options when dropped.
+            item.events.onDragStop.add(dropHandler);
+        }
+
+        // Create 2 rectangles, drop it at these rectangle to
+        // remove it from origin group normally or
+        // cut it from the group's array entirely.
+        var rect = game.add.sprite(400, 0, 'rect');
+        rect.transform.scale.setTo(2.0, 3.0);
+        var rect2 = game.add.sprite(400, 300, 'rect2');
+        rect2.transform.scale.setTo(2.0, 3.0);
+    }
+    function update() {
+    }
+    function render() {
+        Phaser.DebugUtils.context.fillStyle = '#fff';
+        Phaser.DebugUtils.context.fillText('Size of group: ' + items.length, 100, 560);
+        Phaser.DebugUtils.context.fillText('Drop here to cut items from groups entirely.', 450, 24);
+        Phaser.DebugUtils.context.fillText('Drop here to remove it normally.', 450, 324);
+    }
+    function dropHandler(item, pointer) {
+        if (item.x < 90) {
+            item.x = 90;
+        }
+        else if (item.x > 400) { // So it is dropped in one rectangle.
+            if (item.y < 300) {
+                // Remove it from group normally, so the group's size does not change.
+                items.remove(item, true);
+            }
+            else {
+                // Remove it from group and cut from it, so the group's size decreases.
+                items.remove(item);
+            }
+        }
+    }
+})();

Tests/groups/replace.js

@@ -0,0 +1,66 @@
+/// <reference path="../../Phaser/Game.ts" />
+(function () {
+    var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render);
+
+    // Left and right group.
+    var left, right;
+    // The first selected item.
+    var selected = null;
+
+    function init() {
+        game.load.spritesheet('item', 'assets/buttons/number-buttons-90x90.png', 90, 90);
+        game.load.start();
+    }
+    function create() {
+        left = game.add.group();
+        right = game.add.group();
+        // Add some items to left side, and set a onDragStop listener
+        // to limit its location when dropped.
+        var item;
+        for (var i = 0; i < 3; i++) {
+            // Directly create sprites from the left group.
+            item = left.addNewSprite(290, 98 * (i + 1), 'item', i, Phaser.Types.BODY_DISABLED);
+            // Enable input.
+            item.input.start(0, false, true);
+            item.events.onInputUp.add(select);
+            // Add another to the right group.
+            item = right.addNewSprite(388, 98 * (i + 1), 'item', i + 3, Phaser.Types.BODY_DISABLED);
+            // Enable input.
+            item.input.start(0, false, true);
+            item.events.onInputUp.add(select);
+        }
+    }
+    function select(item, pointer) {
+        // If there's no one selected, mark it as selected.
+        if (!selected) {
+            selected = item;
+            selected.alpha = 0.5;
+        }
+        else {
+            // Items from different group selected, replace with each other;
+            // Something like a swap action, maybe better done with
+            // group.swap() method.
+            if (selected.group !== item.group) {
+                // Move the later selected to the first selected item's position.
+                item.x = selected.x;
+                item.y = selected.y;
+                // Replace first selected with the second one.
+                selected.group.replace(selected, item);
+            }
+            else {
+                selected.alpha = 1;
+            }
+
+            // After checking, now clear the helper var.
+            selected = null;
+        }
+    }
+    function update() {
+    }
+    function render() {
+        Phaser.DebugUtils.context.fillStyle = '#fff';
+        Phaser.DebugUtils.context.fillText('Left Group', 300, 80);
+        Phaser.DebugUtils.context.fillText('Right Group', 400, 80);
+        Phaser.DebugUtils.context.fillText('Click an item and one from another group to replace it.', 240, 480);
+    }
+})();

Tests/groups/set all.js

@@ -0,0 +1,31 @@
+/// <reference path="../../Phaser/Game.ts" />
+(function () {
+    var game = new Phaser.Game(this, 'game', 800, 600, init, create, null, render);
+
+    var baseIncSpeed = 0.006;
+
+    function init() {
+        game.load.spritesheet('item', 'assets/buttons/number-buttons-90x90.png', 90, 90);
+        game.load.start();
+    }
+    function create() {
+        // Add some items.
+        for (var i = 0; i < 3; i++) {
+            // Give the items a different alpha increase speed.
+            game.add.sprite(290, 98 * (i + 1), 'item', i)
+                .alphaIncSpeed = baseIncSpeed * (i + 1);
+            game.add.sprite(388, 98 * (i + 1), 'item', i + 3)
+                .alphaIncSpeed = baseIncSpeed * (i + 4);
+        }
+
+        game.input.onTap.add(resetAlpha);
+    }
+    function resetAlpha() {
+        // Set "alpha" value of all the childs.
+        game.world.group.setAll('alpha', Math.random());
+    }
+    function render() {
+        Phaser.DebugUtils.context.fillStyle = '#fff';
+        Phaser.DebugUtils.context.fillText('Tap or click to set random alpha of all the items.', 240, 480);
+    }
+})();

Tests/groups/sort 1.js

@@ -0,0 +1,46 @@
+(function() {
+    var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render);
+
+    var xTop, yTop, zTop;
+
+    function init() {
+        game.load.image('cell', 'assets/sprites/diamond.png');
+        game.load.start();
+    }
+    function create() {
+        // Create 3 groups which will have different sort "index".
+        xTop = game.add.group();
+        yTop = game.add.group();
+        zTop = game.add.group();
+
+        var i;
+        for (i = 0; i < 64; i++) {
+            xTop.addNewSprite(160 + 48 * Math.cos(i * Math.PI / 8), 540 - i * 8,
+                'cell', 0,
+                Phaser.Types.BODY_DISABLED);
+        }
+        for (i = 0; i < 64; i++) {
+            yTop.addNewSprite(340 + 48 * Math.cos(i * Math.PI / 8), 540 - i * 8,
+                'cell', 0,
+                Phaser.Types.BODY_DISABLED);
+        }
+        for (i = 0; i < 64; i++) {
+            zTop.addNewSprite(520 + 48 * Math.cos(i * Math.PI / 8), 540 - i * 8,
+                'cell', 0,
+                Phaser.Types.BODY_DISABLED);
+        }
+    }
+    function update() {
+        // Sort 3 groups using different methods, all of them are
+        // ascending by default.
+        xTop.sort('x');
+        yTop.sort('y');
+        zTop.sort('z');
+    }
+    function render() {
+        Phaser.DebugUtils.context.fillStyle = '#fff';
+        Phaser.DebugUtils.context.fillText('Left group sorted by x.', 16, 18);
+        Phaser.DebugUtils.context.fillText('Middle group sorted by y.', 16, 36);
+        Phaser.DebugUtils.context.fillText('Right group sorted by z.', 16, 54);
+    }
+})();

Tests/groups/sort 2.js

@@ -0,0 +1,57 @@
+(function() {
+    var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render);
+
+    // Wabbits inside this group is sorted by its "dead" property.
+    // Dead wabbits behinds the others.
+    var wabbits;
+
+    function init() {
+        game.load.image('wabbit', 'assets/sprites/wabbit.png');
+        game.load.start();
+    }
+    function create() {
+        // Create container group.
+        wabbits = game.add.group();
+
+        // Create wabbit and add to the container.
+        var wabbe;
+        for (var i = 0; i < 64; i++) {
+            wabbe = wabbits.addNewSprite(Math.random() * 480 + 64, Math.random() * 480 + 32,
+                'wabbit', 0,
+                Phaser.Types.BODY_DISABLED);
+            wabbe.transform.scale.setTo(2, 2);
+            wabbe.transform.origin.setTo(0.5, 0.5);
+
+            // Give wabbie a flag of living or not.
+            wabbe.dead = false;
+
+            wabbe.input.start(0, false, true);
+            wabbe.events.onInputUp.add(killMe, this);
+        }
+    }
+    function update() {
+        // sort wabbies by "exists", so killed ones will
+        wabbits.sort('dead', Phaser.Group.DESCENDING);
+    }
+    function render() {
+        Phaser.DebugUtils.context.fillStyle = '#fff';
+        Phaser.DebugUtils.context.fillText('Tap or click wabbits to kill them.', 32, 32);
+    }
+    function killMe(wabbe) {
+        // Disable input.
+        wabbe.input.stop();
+
+        // Do not call the kill method, set its "dead" property instead.
+        wabbe.dead = true;
+
+        // Kill effects.
+        game.add.tween(wabbe)
+            .to({x: wabbe.x - 48}, 2000, Phaser.Easing.Linear.None, true, 0, false);
+        game.add.tween(wabbe)
+            .to({y: 640}, 2000 - wabbe.y, Phaser.Easing.Back.In, true, 0, false);
+        game.add.tween(wabbe)
+            .to({rotation: 240}, 1000, Phaser.Easing.Back.In, true, 0, false);
+        game.add.tween(wabbe.transform.scale)
+            .to({x: 2, y: 2}, 1000, Phaser.Easing.Bounce.In, true, 0, false);
+    }
+})();

Tests/groups/sub groups.js

@@ -0,0 +1,60 @@
+/// <reference path="../../Phaser/Game.ts" />
+(function () {
+    var game = new Phaser.Game(this, 'game', 800, 600, init, create, null, render);
+
+    // Groups for storing friends and enemies, may use for collision later.
+    var friendAndFoe,
+        enemies;
+
+    // Groups for teaming up stuff.
+    var normalBaddies,
+        purpleBaddies;
+
+    function init() {
+        game.load.image('ufo', 'assets/sprites/ufo.png');
+        game.load.image('baddie', 'assets/sprites/space-baddie.png');
+        game.load.image('purple-baddie', 'assets/sprites/space-baddie-purple.png');
+        game.load.start();
+    }
+    function create() {
+        // Create some local groups for later use.
+        friendAndFoe = game.add.group();
+        enemies = game.add.group();
+        normalBaddies = game.add.group();
+        purpleBaddies = game.add.group();
+
+        // Add both teams to enemies group.
+        enemies.add(normalBaddies);
+        enemies.add(purpleBaddies);
+
+        // Create a ufo as a friend sprite.
+        friendAndFoe.addNewSprite(200, 240, 'ufo', null, Phaser.Types.BODY_DISABLED);
+
+        // Create some enemies.
+        for (var i = 0; i < 16; i++) {
+            createBaddie();
+        }
+
+        // Tap to create new baddie sprites.
+        game.input.onTap.add(createBaddie, this);
+    }
+    function createBaddie() {
+        var baddie;
+        if (Math.random() > 0.5) {
+            baddie = purpleBaddies.addNewSprite(360 + Math.random() * 200, 120 + Math.random() * 200,
+                'purple-baddie', null, Phaser.Types.BODY_DISABLED);
+        }
+        else {
+            baddie = normalBaddies.addNewSprite(360 + Math.random() * 200, 120 + Math.random() * 200,
+                'baddie', null, Phaser.Types.BODY_DISABLED);
+        }
+    }
+    function render() {
+        Phaser.DebugUtils.context.fillStyle = '#fff';
+        Phaser.DebugUtils.context.fillText('Tap screen or click to create new baddies.', 16, 24);
+        Phaser.DebugUtils.context.fillText('enemies: ' + enemies.length + ' (actually ' + enemies.length + ' groups)', 16, 48);
+        Phaser.DebugUtils.context.fillText('normal baddies: ' + normalBaddies.length, 16, 60);
+        Phaser.DebugUtils.context.fillText('purple baddies: ' + purpleBaddies.length, 16, 72);
+        Phaser.DebugUtils.context.fillText('friends: ' + friendAndFoe.length, 16, 96);
+    }
+})();

Tests/input/drop limitation.js

@@ -0,0 +1,46 @@
+/// <reference path="../../Phaser/Game.ts" />
+(function () {
+    var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render);
+
+    function init() {
+        game.load.spritesheet('item', 'assets/buttons/number-buttons-90x90.png', 90, 90);
+        game.load.start();
+    }
+    function create() {
+        // Add some items to left side, and set a onDragStop listener
+        // to limit its location when dropped.
+        var item;
+        for (var i = 0; i < 6; i++) {
+            // Directly create sprites from the left group.
+            item = game.add.sprite(90, 90 * i, 'item', i);
+            // Enable input detection, then it's possible be dragged.
+            item.input.start(0, false, true);
+            // Make this item draggable.
+            item.input.enableDrag();
+            // Then we make it snap to left and right side,
+            // also make it only snaps when released.
+            item.input.enableSnap(90, 90, false, true);
+            // Limit drop location to only the 2 columns.
+            item.events.onDragStop.add(fixLocation);
+        }
+    }
+    function update() {
+    }
+    function render() {
+        Phaser.DebugUtils.context.fillStyle = '#fff';
+        Phaser.DebugUtils.context.fillText('Group Left.', 100, 560);
+        Phaser.DebugUtils.context.fillText('Group Right.', 280, 560);
+    }
+    function fixLocation(item) {
+        // Move the items when it is already dropped.
+        if (item.x < 90) {
+            item.x = 90;
+        }
+        else if (item.x > 180 && item.x < 270) {
+            item.x = 180;
+        }
+        else if (item.x > 360) {
+            item.x = 270;
+        }
+    }
+})();

Tests/input/keyboard 1.js

@@ -0,0 +1,79 @@
+/// <reference path="../../Phaser/Game.ts" />
+(function () {
+    var game = new Phaser.Game(this, 'game', 800, 600, init, create, update);
+
+    var ufo, leftBtn, rightBtn;
+    var speed = 4;
+
+    function init() {
+        game.world.setSize(1280, 600, true);
+        game.load.image('ground', 'assets/tests/ground-2x.png');
+        game.load.image('river', 'assets/tests/river-2x.png');
+        game.load.image('sky', 'assets/tests/sky-2x.png');
+        game.load.image('cloud0', 'assets/tests/cloud-big-2x.png');
+        game.load.image('cloud1', 'assets/tests/cloud-narrow-2x.png');
+        game.load.image('cloud2', 'assets/tests/cloud-small-2x.png');
+
+        game.load.spritesheet('button', 'assets/buttons/arrow-button.png', 112, 95);
+
+        game.load.spritesheet('ufo', 'assets/sprites/ufo.png', 24, 21);
+
+        game.load.start();
+    }
+    function create() {
+        // background images
+        game.add.sprite(0, 0, 'sky')
+            .transform.scrollFactor.setTo(0, 0);
+        game.add.sprite(0, 360, 'ground')
+            .transform.scrollFactor.setTo(0.5, 0.5);
+        game.add.sprite(0, 400, 'river')
+            .transform.scrollFactor.setTo(1.3, 1.3);
+        game.add.sprite(200, 120, 'cloud0')
+            .transform.scrollFactor.setTo(0.3, 0.3);
+        game.add.sprite(-60, 120, 'cloud1')
+            .transform.scrollFactor.setTo(0.5, 0.3);
+        game.add.sprite(900, 170, 'cloud2')
+            .transform.scrollFactor.setTo(0.7, 0.3);
+
+        // Create a ufo spirte as player.
+        ufo = game.add.sprite(320, 240, 'ufo');
+        ufo.animations.add('fly', null, 30, false);
+        ufo.animations.play('fly');
+        ufo.transform.origin.setTo(0.5, 0.5);
+
+        // Make the default camera follow the ufo.
+        game.camera.follow(ufo);
+
+        // Add 2 sprite to display hold direction.
+        leftBtn = game.add.sprite(160 - 112, 200, 'button', 0);
+        leftBtn.transform.scrollFactor.setTo(0, 0);
+        leftBtn.alpha = 0;
+        rightBtn = game.add.sprite(640 - 112, 200, 'button', 1);
+        rightBtn.alpha = 0;
+        rightBtn.transform.scrollFactor.setTo(0, 0);
+    }
+    function update() {
+        // Check key states every frame.
+        // Move ONLY one of the left and right key is hold.
+        if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT) &&
+            !game.input.keyboard.isDown(Phaser.Keyboard.RIGHT)) {
+            ufo.x -= speed;
+            ufo.rotation = -15;
+            leftBtn.alpha = 0.6;
+        }
+        else if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT) &&
+            !game.input.keyboard.isDown(Phaser.Keyboard.LEFT)) {
+            ufo.x += speed;
+            ufo.rotation = 15;
+            rightBtn.alpha = 0.6;
+        }
+        else {
+            ufo.rotation = 0;
+            leftBtn.alpha = rightBtn.alpha = 0;
+        }
+    }
+    function render() {
+        Phaser.DebugUtils.context.fillStyle = '#fff';
+        Phaser.DebugUtils.context.fillText('Hold left/right to move the ufo.');
+    }
+})();

Tests/input/keyboard 2.js

@@ -0,0 +1,106 @@
+/// <reference path="../../Phaser/Game.ts" />
+(function () {
+    var game = new Phaser.Game(this, 'game', 800, 600, init, create, update);
+
+    var ufo, leftBtn, rightBtn, spaceBtn;
+    var speed = 4;
+
+    function init() {
+        game.world.setSize(1280, 600, true);
+        game.load.image('ground', 'assets/tests/ground-2x.png');
+        game.load.image('river', 'assets/tests/river-2x.png');
+        game.load.image('sky', 'assets/tests/sky-2x.png');
+        game.load.image('cloud0', 'assets/tests/cloud-big-2x.png');
+        game.load.image('cloud1', 'assets/tests/cloud-narrow-2x.png');
+        game.load.image('cloud2', 'assets/tests/cloud-small-2x.png');
+
+        game.load.spritesheet('button', 'assets/buttons/arrow-button.png', 112, 95);
+        game.load.image('spacebar', 'assets/buttons/spacebar.png');
+
+        game.load.spritesheet('ufo', 'assets/sprites/ufo.png', 24, 21);
+
+        game.load.start();
+    }
+    function create() {
+        // background images
+        game.add.sprite(0, 0, 'sky')
+            .transform.scrollFactor.setTo(0, 0);
+        game.add.sprite(0, 360, 'ground')
+            .transform.scrollFactor.setTo(0.5, 0.5);
+        game.add.sprite(0, 400, 'river')
+            .transform.scrollFactor.setTo(1.3, 1.3);
+        game.add.sprite(200, 120, 'cloud0')
+            .transform.scrollFactor.setTo(0.3, 0.3);
+        game.add.sprite(-60, 120, 'cloud1')
+            .transform.scrollFactor.setTo(0.5, 0.3);
+        game.add.sprite(900, 170, 'cloud2')
+            .transform.scrollFactor.setTo(0.7, 0.3);
+
+        // Create a ufo spirte as player.
+        ufo = game.add.sprite(320, 240, 'ufo');
+        ufo.animations.add('fly', null, 30, false);
+        ufo.animations.play('fly');
+        ufo.transform.origin.setTo(0.5, 0.5);
+
+        // Make the default camera follow the ufo.
+        game.camera.follow(ufo);
+
+        // Add 2 sprite to display hold direction.
+        leftBtn = game.add.sprite(160 - 112 / 2, 200, 'button', 0);
+        leftBtn.transform.scrollFactor.setTo(0, 0);
+        leftBtn.alpha = 0;
+        rightBtn = game.add.sprite(640 - 112 / 2, 200, 'button', 1);
+        rightBtn.alpha = 0;
+        rightBtn.transform.scrollFactor.setTo(0, 0);
+        // Add a sprite to display spacebar press.
+        spaceBtn = game.add.sprite(400 - 112, 100, 'spacebar');
+        spaceBtn.transform.scrollFactor.setTo(0, 0);
+        spaceBtn.alpha = 0;
+
+        // Prevent directions and space key events bubbling up to browser,
+        // since these keys will make web page scroll which is not
+        // expected.
+        game.input.keyboard.addKeyCapture([
+            Phaser.Keyboard.LEFT,
+            Phaser.Keyboard.RIGHT,
+            Phaser.Keyboard.UP,
+            Phaser.Keyboard.DOWN,
+            Phaser.Keyboard.SPACEBAR
+        ]);
+    }
+    function update() {
+        // Check key states every frame.
+        // Move ONLY one of the left and right key is hold.
+        if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT) &&
+            !game.input.keyboard.isDown(Phaser.Keyboard.RIGHT)) {
+            ufo.x -= speed;
+            ufo.rotation = -15;
+            leftBtn.alpha = 0.6;
+        }
+        else if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT) &&
+            !game.input.keyboard.isDown(Phaser.Keyboard.LEFT)) {
+            ufo.x += speed;
+            ufo.rotation = 15;
+            rightBtn.alpha = 0.6;
+        }
+        else {
+            ufo.rotation = 0;
+            leftBtn.alpha = rightBtn.alpha = 0;
+        }
+
+        // 50 is a good choice if you are running 60FPS.
+        if (game.input.keyboard.justPressed(Phaser.Keyboard.SPACEBAR, 50)) {
+            console.log('space bar pressed');
+            spaceBtn.alpha = 1;
+        }
+        if (spaceBtn.alpha > 0) {
+            spaceBtn.alpha -= 0.03;
+        }
+    }
+    function render() {
+        Phaser.DebugUtils.context.fillStyle = '#fff';
+        Phaser.DebugUtils.context.fillText('Hold left/right to move the ufo.', 16, 32);
+        Phaser.DebugUtils.context.fillText('Direction and Space key events are stopped by Phaser now, which will no longer be sent to the browser.', 16, 48);
+        Phaser.DebugUtils.context.fillText('Now you can press UP/DOWN or SPACE to see what happened.', 16, 64);
+    }
+})();

Tests/misc/color utils 1.js

@@ -0,0 +1,49 @@
+(function() {
+    var game = new Phaser.Game(this, 'game', 800, 600, init, create, null, render);
+
+    var colorWheel, selected, color = '#CCA22B';
+    var offset = {
+        x: 300 - 578 / 2,
+        y: 300 - 550 / 2
+    };
+    var rect, rectSize = 24;
+
+    function init() {
+        game.load.image('color-wheel', 'assets/pics/color-wheel.png');
+        game.load.start();
+    }
+    function create() {
+        // Create color wheel texture.
+        colorWheel = game.add.dynamicTexture(578, 550);
+        colorWheel.pasteImage('color-wheel');
+
+        // Create a rectangle shows the color you just selected.
+        rect = new Phaser.Rectangle(0, 0, rectSize, rectSize);
+        selected = game.add.sprite(600, 430);
+        selected.width = rectSize;
+        selected.height = rectSize;
+        selected.texture.loadDynamicTexture(game.add.dynamicTexture(rectSize, rectSize));
+        selected.texture.dynamicTexture.fillRect(rect, color);
+
+        // Get the color under the position you tapped or clicked.
+        var pos = {};
+        game.input.onTap.add(function(pointer) {
+            pos.x = pointer.position.x - offset.x;
+            pos.y = pointer.position.y - offset.y;
+            color = Phaser.ColorUtils.RGBtoWebstring(colorWheel.getPixel32(pos.x, pos.y));
+
+            // Set the rectangle's color to new selected one.
+            selected.texture.dynamicTexture.fillRect(rect, color);
+        });
+
+        // Set the background color to white.
+        game.stage.backgroundColor = '#fff';
+}
+    function render() {
+        colorWheel.render(offset.x, offset.y);
+
+        Phaser.DebugUtils.context.fillStyle = '#000';
+        Phaser.DebugUtils.context.fillText('Tap or click the color wheel to select a color.', 480, 52);
+        Phaser.DebugUtils.context.fillText(color, 646, 452);
+    }
+})();

Tests/misc/color utils 2.js

@@ -0,0 +1,57 @@
+(function() {
+    var game = new Phaser.Game(this, 'game', 800, 600, init, create, null, render);
+
+    var colorWheel, selected,
+        color = 0xAACCA22B, colorStr = '#CCA22B';
+    var offset = {
+        x: 300 - 578 / 2,
+        y: 300 - 550 / 2
+    };
+    var rect, rectSize = 24;
+
+    function init() {
+        game.load.image('color-wheel', 'assets/pics/color-wheel.png');
+        game.load.start();
+    }
+    function create() {
+        // Create color wheel texture.
+        colorWheel = game.add.dynamicTexture(578, 550);
+        colorWheel.pasteImage('color-wheel');
+
+        // Create a rectangle shows the color you just selected.
+        rect = new Phaser.Rectangle(0, 0, rectSize, rectSize);
+        selected = game.add.sprite(600, 430);
+        selected.width = rectSize;
+        selected.height = rectSize;
+        selected.texture.loadDynamicTexture(game.add.dynamicTexture(rectSize, rectSize));
+        selected.texture.dynamicTexture.fillRect(rect, colorStr);
+
+        // Get the color under the position you tapped or clicked.
+        var pos = {};
+        game.input.onTap.add(function(pointer) {
+            pos.x = pointer.position.x - offset.x;
+            pos.y = pointer.position.y - offset.y;
+            color = colorWheel.getPixel32(pos.x, pos.y);
+            colorStr = Phaser.ColorUtils.RGBtoWebstring(color);
+
+            // Set the rectangle's color to new selected one.
+            selected.texture.dynamicTexture.fillRect(rect, colorStr);
+        });
+
+        // Set the background color to white.
+        game.stage.backgroundColor = '#fff';
+}
+    function render() {
+        colorWheel.render(offset.x, offset.y);
+
+        Phaser.DebugUtils.context.fillStyle = '#000';
+        Phaser.DebugUtils.context.fillText('Tap or click the color wheel to select a color.', 480, 52);
+
+        // Display more color formated infos here. You can also get a
+        // string contains everything using getColorInfo();
+        Phaser.DebugUtils.context.fillText('Web String: ' + colorStr, 600, 492);
+        Phaser.DebugUtils.context.fillText('Hex String: ' + Phaser.ColorUtils.RGBtoHexstring(color), 600, 508);
+        var hsv = Phaser.ColorUtils.RGBtoHSV(color);
+        Phaser.DebugUtils.context.fillText('HSV: (' + hsv.hue.toFixed() + ', ' + hsv.saturation.toFixed(2) + ', ' + hsv.value.toFixed(2) + ')', 600, 524);
+    }
+})();

Tests/misc/color utils 3.js

@@ -0,0 +1,151 @@
+(function() {
+    var game = new Phaser.Game(this, 'game', 800, 600, init, create, null, render);
+
+    var colorWheel,
+        selected,
+        compHarmony,
+        analoHarmony, analoHarmony1,
+        splitHarmony, splitHarmony1,
+        triaHarmony, triaHarmony1,
+        color = 0xAACCA22B, colorStr = '#CCA22B',
+        compHColor,
+        analoColor, splitColor, triaColor,
+        analoColor1, splitColor1, triaColor1;
+
+    var offset = {
+        x: 300 - 578 / 2,
+        y: 300 - 550 / 2
+    };
+    var rect, rectSize = 24;
+
+    function init() {
+        game.load.image('color-wheel', 'assets/pics/color-wheel.png');
+        game.load.start();
+    }
+    function create() {
+        // Create color wheel texture.
+        colorWheel = game.add.dynamicTexture(578, 550);
+        colorWheel.pasteImage('color-wheel');
+
+        // Create a rectangle shows the color you just selected.
+        rect = new Phaser.Rectangle(0, 0, rectSize, rectSize);
+        selected = game.add.sprite(700, 290);
+        selected.width = rectSize;
+        selected.height = rectSize;
+        selected.texture.loadDynamicTexture(game.add.dynamicTexture(rectSize, rectSize));
+        selected.texture.dynamicTexture.fillRect(rect, colorStr);
+
+        // Create rectangles to show the harmony colors to the selected one.
+        compHColor = Phaser.ColorUtils.getComplementHarmony(color),
+        analoColor = Phaser.ColorUtils.getAnalogousHarmony(color),
+        splitColor = Phaser.ColorUtils.getSplitComplementHarmony(color),
+        triaColor = Phaser.ColorUtils.getTriadicHarmony(color);
+
+        // Complement
+        compHarmony = game.add.sprite(700, 390);
+        compHarmony.width = rectSize;
+        compHarmony.height = rectSize;
+        compHarmony.texture.loadDynamicTexture(game.add.dynamicTexture(rectSize, rectSize));
+        compHarmony.texture.dynamicTexture.fillRect(rect, Phaser.ColorUtils.RGBtoWebstring(compHColor));
+
+        // Analogous
+        analoHarmony = game.add.sprite(700, 434);
+        analoHarmony.width = rectSize;
+        analoHarmony.height = rectSize;
+        analoHarmony.texture.loadDynamicTexture(game.add.dynamicTexture(rectSize, rectSize));
+        analoHarmony.texture.dynamicTexture.fillRect(rect, Phaser.ColorUtils.RGBtoWebstring(analoColor.color2));
+
+        analoHarmony1 = game.add.sprite(744, 434);
+        analoHarmony1.width = rectSize;
+        analoHarmony1.height = rectSize;
+        analoHarmony1.texture.loadDynamicTexture(game.add.dynamicTexture(rectSize, rectSize));
+        analoHarmony1.texture.dynamicTexture.fillRect(rect, Phaser.ColorUtils.RGBtoWebstring(analoColor.color3));
+
+        // Split Complement
+        splitHarmony = game.add.sprite(700, 478);
+        splitHarmony.width = rectSize;
+        splitHarmony.height = rectSize;
+        splitHarmony.texture.loadDynamicTexture(game.add.dynamicTexture(rectSize, rectSize));
+        splitHarmony.texture.dynamicTexture.fillRect(rect, Phaser.ColorUtils.RGBtoWebstring(splitColor.color2));
+
+        splitHarmony1 = game.add.sprite(744, 478);
+        splitHarmony1.width = rectSize;
+        splitHarmony1.height = rectSize;
+        splitHarmony1.texture.loadDynamicTexture(game.add.dynamicTexture(rectSize, rectSize));
+        splitHarmony1.texture.dynamicTexture.fillRect(rect, Phaser.ColorUtils.RGBtoWebstring(splitColor.color3));
+
+        // Triadic
+        triaHarmony = game.add.sprite(700, 522);
+        triaHarmony.width = rectSize;
+        triaHarmony.height = rectSize;
+        triaHarmony.texture.loadDynamicTexture(game.add.dynamicTexture(rectSize, rectSize));
+        triaHarmony.texture.dynamicTexture.fillRect(rect, Phaser.ColorUtils.RGBtoWebstring(triaColor.color2));
+
+        triaHarmony1 = game.add.sprite(744, 522);
+        triaHarmony1.width = rectSize;
+        triaHarmony1.height = rectSize;
+        triaHarmony1.texture.loadDynamicTexture(game.add.dynamicTexture(rectSize, rectSize));
+        triaHarmony1.texture.dynamicTexture.fillRect(rect, Phaser.ColorUtils.RGBtoWebstring(triaColor.color3));
+
+        // Get the color under the position you tapped or clicked.
+        var pos = {};
+        game.input.onTap.add(function(pointer) {
+            pos.x = pointer.position.x - offset.x;
+            pos.y = pointer.position.y - offset.y;
+
+            // Update colors.
+            color = colorWheel.getPixel32(pos.x, pos.y);
+            compHColor = Phaser.ColorUtils.getComplementHarmony(color),
+            analoColor = Phaser.ColorUtils.getAnalogousHarmony(color).color2,
+            analoColor1 = Phaser.ColorUtils.getAnalogousHarmony(color).color3,
+            splitColor = Phaser.ColorUtils.getSplitComplementHarmony(color).color2,
+            splitColor1 = Phaser.ColorUtils.getSplitComplementHarmony(color).color3,
+            triaColor = Phaser.ColorUtils.getTriadicHarmony(color).color2;
+            triaColor1 = Phaser.ColorUtils.getTriadicHarmony(color).color3;
+
+            // Calc color strings.
+            colorStr = Phaser.ColorUtils.RGBtoWebstring(color);
+            var compStr = Phaser.ColorUtils.RGBtoWebstring(compHColor),
+                analStr = Phaser.ColorUtils.RGBtoWebstring(analoColor),
+                analStr1 = Phaser.ColorUtils.RGBtoWebstring(analoColor1),
+                spliStr = Phaser.ColorUtils.RGBtoWebstring(splitColor),
+                spliStr1 = Phaser.ColorUtils.RGBtoWebstring(splitColor1),
+                triaStr = Phaser.ColorUtils.RGBtoWebstring(triaColor),
+                triaStr1 = Phaser.ColorUtils.RGBtoWebstring(triaColor1);
+
+            // Update color of the rectangles.
+            selected.texture.dynamicTexture.fillRect(rect, colorStr);
+            compHarmony.texture.dynamicTexture.fillRect(rect, compStr);
+            analoHarmony.texture.dynamicTexture.fillRect(rect, analStr);
+            analoHarmony1.texture.dynamicTexture.fillRect(rect, analStr1);
+            splitHarmony.texture.dynamicTexture.fillRect(rect, spliStr);
+            splitHarmony1.texture.dynamicTexture.fillRect(rect, spliStr1);
+            triaHarmony.texture.dynamicTexture.fillRect(rect, triaStr);
+            triaHarmony1.texture.dynamicTexture.fillRect(rect, triaStr1);
+        });
+
+        // Set the background color to white.
+        game.stage.backgroundColor = '#fff';
+    }
+    function render() {
+        colorWheel.render(offset.x, offset.y);
+
+        Phaser.DebugUtils.context.fillStyle = '#000';
+        Phaser.DebugUtils.context.fillText('Tap or click the color wheel to select a color.', 480, 52);
+        Phaser.DebugUtils.context.fillText('All the harmony colors are calculated on the fly.', 480, 590);
+
+        // Display more color formated infos here. You can also get a
+        // string contains everything using getColorInfo();
+        Phaser.DebugUtils.context.fillText('Selected Color: ', 600, 312);
+        Phaser.DebugUtils.context.fillText('Web String: ' + colorStr, 640, 342);
+        Phaser.DebugUtils.context.fillText('Hex String: ' + Phaser.ColorUtils.RGBtoHexstring(color), 640, 358);
+        var hsv = Phaser.ColorUtils.RGBtoHSV(color);
+        Phaser.DebugUtils.context.fillText('HSV: (' + hsv.hue.toFixed() + ', ' + hsv.saturation.toFixed(2) + ', ' + hsv.value.toFixed(2) + ')', 640, 374);
+
+        // Harmony color types info.
+        Phaser.DebugUtils.context.fillText('Complement Harmony Color: ', 540, 412);
+        Phaser.DebugUtils.context.fillText(' Analogous Harmony Color: ', 540, 456);
+        Phaser.DebugUtils.context.fillText('Split Complement Harmony Color: ', 502, 500);
+        Phaser.DebugUtils.context.fillText('   Triadic Harmony Color: ', 540, 544);
+    }
+})();

Tests/misc/dynamic texture 1.js

@@ -0,0 +1,23 @@
+(function() {
+    var game = new Phaser.Game(this, 'game', 800, 600, null, create, null, render);
+
+    // Pattern texture for tiling render to the stage later.
+    var pattern;
+
+    function create() {
+        // Create a simple pattern texture.
+        pattern = game.add.dynamicTexture(96, 96);
+        pattern.fillRect(new Phaser.Rectangle(0, 0, 48, 48), '#5b35c0');
+        pattern.fillRect(new Phaser.Rectangle(48, 48, 48, 48), '#5b35c0');
+        pattern.fillRect(new Phaser.Rectangle(48, 0, 48, 48), '#43baf3');
+        pattern.fillRect(new Phaser.Rectangle(0, 48, 48, 48), '#43baf3');
+    }
+    function render() {
+        // Directly render the texture to the stage.
+        // In screen coordinates.
+        pattern.render(400 - 48, 300 - 48);
+
+        Phaser.DebugUtils.context.fillStyle = '#fff';
+        Phaser.DebugUtils.context.fillText('There\'s no sprites here, only a DynamicTexture created on the fly.', 210, 450);
+    }
+})();

Tests/misc/dynamic texture 2.js

@@ -0,0 +1,27 @@
+(function() {
+    var game = new Phaser.Game(this, 'game', 800, 600, null, create, null, render);
+
+    // Pattern texture for tiling render to the stage later.
+    var pattern;
+
+    function create() {
+        // Create a simple pattern texture.
+        pattern = game.add.dynamicTexture(96, 96);
+        pattern.fillRect(new Phaser.Rectangle(0, 0, 48, 48), '#5b35c0');
+        pattern.fillRect(new Phaser.Rectangle(48, 48, 48, 48), '#5b35c0');
+        pattern.fillRect(new Phaser.Rectangle(48, 0, 48, 48), '#43baf3');
+        pattern.fillRect(new Phaser.Rectangle(0, 48, 48, 48), '#43baf3');
+
+        // Create a sprite and load to our newly created DynamicTexture.
+        // Notice that loadDynamicTexture() will destroy sprite's AnimationManager,
+        // so all the animations already added will no longer exist.
+        var sprite = game.add.sprite(game.stage.centerX - 48, game.stage.centerY - 48);
+        sprite.texture.loadDynamicTexture(pattern);
+
+        console.log('Size of the sprite is now: (' + sprite.width + ', ' + sprite.height + ').');
+    }
+    function render() {
+        Phaser.DebugUtils.context.fillStyle = '#fff';
+        Phaser.DebugUtils.context.fillText('This is a sprite whose appearance defined by a DynamicTexture created on the fly.', 160, 450);
+    }
+})();

Tests/misc/dynamic texture 3.js

@@ -0,0 +1,32 @@
+(function() {
+    var game = new Phaser.Game(this, 'game', 800, 600, init, create, null, render);
+
+    // Pattern texture for tiling render to the stage later.
+    var pattern;
+
+    function init() {
+        game.load.spritesheet('cat', 'assets/sprites/baddie_cat_1.png', 16, 16);
+        game.load.start();
+    }
+    function create() {
+        // Create a simple pattern first.
+        pattern = game.add.dynamicTexture(64, 16);
+        for (var i = 0; i < 4; i++) {
+            pattern.fillRect(new Phaser.Rectangle(i * 16, 0, 8, 8), '#5b35c0');
+            pattern.fillRect(new Phaser.Rectangle((i + 1) * 16 - 8, 8, 8, 8), '#5b35c0');
+            pattern.fillRect(new Phaser.Rectangle((i + 1) * 16 - 8, 0, 8, 8), '#43baf3');
+            pattern.fillRect(new Phaser.Rectangle(i * 16, 8, 8, 8), '#43baf3');
+        }
+
+        // Paste cat image to the texture, so the cat is on top of our pattern.
+        pattern.pasteImage('cat');
+
+        // Create a sprite with our result texture.
+        var sprite = game.add.sprite(game.stage.centerX - 32, game.stage.centerY - 8);
+        sprite.texture.loadDynamicTexture(pattern);
+    }
+    function render() {
+        Phaser.DebugUtils.context.fillStyle = '#fff';
+        Phaser.DebugUtils.context.fillText('Paste exist spritesheet to a DynamicTexture created on the fly.', 220, 450);
+    }
+})();

Tests/misc/rectangle utils 1.js

@@ -0,0 +1,10 @@
+(function() {
+    var game = new Phaser.Game(this, 'game', 800, 600, init, create);
+
+    function init() {
+        // body...
+    }
+    function create() {
+
+    }
+})();

Tests/sprites/out of screen.js

@@ -0,0 +1,29 @@
+(function() {
+    var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render);
+
+    function init() {
+        game.load.spritesheet('rect', 'assets/buttons/number-buttons-90x90.png', 90, 90);
+        game.load.start();
+    }
+    function create() {
+        var rect, factor;
+        for (var i = 0; i < 16; i++) {
+            rect = game.add.sprite(10 + Math.random() * 700, 10 + Math.random() * 300, 'rect', Math.round(Math.random() * 5));
+            factor = 0.2 + Math.random() * 2;
+            rect.transform.scale.setTo(factor, factor);
+            factor = 2 + Math.random() * 6;
+            rect.speed = factor;
+        }
+        console.log(game.world.group.length);
+    }
+    function update() {
+        game.world.group.forEach(function(rect) {
+            // Apply speed to each rect.
+            rect.y += rect.speed;
+            // Move the rect back to screen if it's not.
+            if (!Phaser.SpriteUtils.onScreen(rect)) {
+                rect.y = 0;
+            }
+        });
+    }
+})();

Tests/sprites/rotate around.js

@@ -0,0 +1,40 @@
+(function() {
+    var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render);
+
+    var rotationSrv, angle = 0;
+
+    function init() {
+        game.load.spritesheet('x', 'assets/sprites/x.png', 220, 160);
+        game.load.start();
+    }
+    function create() {
+        // Create 6 sprites rotating around the center at the beginning.
+        for (var i = 0; i < 3; i++) {
+            game.add.sprite(210 - ((i % 2) ? 140 : 0), 120 * (i + 1), 'x', i);
+            game.add.sprite(370 + ((i % 2) ? 140 : 0), 120 * (i + 1), 'x', i + 3);
+        }
+
+        // Set a default rotation server pointer.
+        rotationSrv = new Phaser.Point(game.stage.centerX, game.stage.centerY);
+
+        // Rotate all the sprites around the touch point.
+        game.input.onTap.add(function(pointer) {
+            rotationSrv.x = pointer.position.x;
+            rotationSrv.y = pointer.position.y;
+        });
+    }
+    function update() {
+        angle += 0.1;
+
+        game.world.group.forEach(function(obj) {
+            var resPointer = new Phaser.Point(obj.x, obj.y);
+            Phaser.PointUtils.rotateAroundPoint(resPointer, rotationSrv, angle);
+            obj.x = resPointer.x;
+            obj.y = resPointer.y;
+        });
+    }
+    function render() {
+        Phaser.DebugUtils.context.fillStyle = '#fff';
+        Phaser.DebugUtils.context.fillText('Tap or click to set new rotation point.', 280, 100);
+    }
+})();

Tests/tweens/easing example 1.js

@@ -0,0 +1,22 @@
+/// <reference path="../../Phaser/Game.ts" />
+(function () {
+    var game = new Phaser.Game(this, 'game', 800, 600, init, create);
+
+    function init() {
+        game.load.spritesheet('shadow', 'assets/tests/tween/shadow.png', 80, 15);
+        game.load.spritesheet('PHASER', 'assets/tests/tween/PHASER.png', 70, 90);
+        game.load.start();
+    }
+    function create() {
+        var item;
+        for (var i = 0; i < 6; i++) {
+            item = game.add.sprite(190 + 69 * i, -100, 'PHASER', i);
+            // Add a simple bounce tween to each character's position.
+            game.add.tween(item)
+                .to({y: 240}, 2400, Phaser.Easing.Bounce.Out, true, 1000 + 400 * i, false);
+        }
+
+        // Set background color to white.
+        game.stage.backgroundColor = '#fff';
+    }
+})();

Tests/tweens/easing example 2.js

@@ -0,0 +1,27 @@
+/// <reference path="../../Phaser/Game.ts" />
+(function () {
+    var game = new Phaser.Game(this, 'game', 800, 600, init, create);
+
+    function init() {
+        game.load.spritesheet('shadow', 'assets/tests/tween/shadow.png', 80, 15);
+        game.load.spritesheet('PHASER', 'assets/tests/tween/PHASER.png', 70, 90);
+        game.load.start();
+    }
+    function create() {
+        var item;
+        for (var i = 0; i < 6; i++) {
+            item = game.add.sprite(190 + 69 * i, -100, 'PHASER', i);
+            // Add a simple bounce tween to each character's position.
+            game.add.tween(item)
+                .to({y: 240}, 2400, Phaser.Easing.Bounce.Out, true, 1000 + 400 * i, false);
+            // Add another rotation tween to the same character.
+            // Notice that depends on the default origin setting, characters will
+            // rotate around the left-top corner which looks a little strange.
+            game.add.tween(item)
+                .to({rotation: 360}, 2400, Phaser.Easing.Cubic.In, true, 1000 + 400 * i, false);
+        }
+
+        // Set background color to white.
+        game.stage.backgroundColor = '#fff';
+    }
+})();

Tests/tweens/easing example 3.js

@@ -0,0 +1,27 @@
+/// <reference path="../../Phaser/Game.ts" />
+(function () {
+    var game = new Phaser.Game(this, 'game', 800, 600, init, create);
+
+    function init() {
+        game.load.spritesheet('shadow', 'assets/tests/tween/shadow.png', 80, 15);
+        game.load.spritesheet('PHASER', 'assets/tests/tween/PHASER.png', 70, 90);
+        game.load.start();
+    }
+    function create() {
+        var item, tween;
+        for (var i = 0; i < 6; i++) {
+            item = game.add.sprite(190 + 69 * i, -100, 'PHASER', i);
+            // Add a simple bounce tween to each character's position.
+            tween = game.add.tween(item)
+                .to({y: 240}, 2400, Phaser.Easing.Bounce.Out, true, 1000 + 400 * i, false);
+            // Chain another tween to the character after it falls down.
+            tween.chain(
+                game.add.tween(item)
+                    .to({y: 640}, 1400, Phaser.Easing.Circular.In, false, 0, false)
+            );
+        }
+
+        // Set background color to white.
+        game.stage.backgroundColor = '#fff';
+    }
+})();

Tests/tweens/easing example 4.js

@@ -0,0 +1,37 @@
+/// <reference path="../../Phaser/Game.ts" />
+(function () {
+    var game = new Phaser.Game(this, 'game', 800, 600, init, create);
+
+    function init() {
+        game.load.spritesheet('shadow', 'assets/tests/tween/shadow.png', 80, 15);
+        game.load.spritesheet('PHASER', 'assets/tests/tween/PHASER.png', 70, 90);
+        game.load.start();
+    }
+    function create() {
+        var item, tween;
+        for (var i = 0; i < 6; i++) {
+            item = game.add.sprite(190 + 69 * i, -100, 'PHASER', i);
+            // Set origin to the center to make the rotation look better.
+            item.transform.origin.setTo(0.5, 0.5);
+            // Add a simple bounce tween to each character's position.
+            tween = game.add.tween(item)
+                .to({y: 240}, 2400, Phaser.Easing.Bounce.Out, true, 1000 + 400 * i, false);
+            // A more complex chain, add a falling and a rotating after
+            // the first tween done. Notice that tween.chain(t1).chain(t2)
+            // will not chain the t2 to the t1, they're both chained to
+            // the tween itself so they'll start the same time.
+            tween
+            .chain(
+                game.add.tween(item)
+                    .to({y: 640}, 1400, Phaser.Easing.Circular.In, false, 0, false)
+            )
+            .chain(
+                game.add.tween(item)
+                    .to({rotation: 720}, 1600, Phaser.Easing.Cubic.Out, false, 200, false)
+            );
+        }
+
+        // Set background color to white.
+        game.stage.backgroundColor = '#fff';
+    }
+})();

Tests/tweens/easing example 5.js

@@ -0,0 +1,38 @@
+/// <reference path="../../Phaser/Game.ts" />
+(function () {
+    var game = new Phaser.Game(this, 'game', 800, 600, init, create);
+
+    function init() {
+        game.load.spritesheet('shadow', 'assets/tests/tween/shadow.png', 138, 15);
+        game.load.spritesheet('PHASER', 'assets/tests/tween/PHASER.png', 70, 90);
+        game.load.start();
+    }
+    function create() {
+        var item, shadow, tween;
+        for (var i = 0; i < 6; i++) {
+            // Add a shadow to the location which characters will land on.
+            // And tween their size to make them look like a real shadow.
+            // Put the following code before items to give shadow a lower
+            // render order.
+            shadow = game.add.sprite(190 + 69 * i, 284, 'shadow');
+            // Set shadow's size 0 so that it'll be invisible at the beginning.
+            shadow.transform.scale.setTo(0.0, 0.0);
+            // Also set the origin to the center since we don't want to
+            // see the shadow scale to the left top.
+            shadow.transform.origin.setTo(0.5, 0.5);
+            game.add.tween(shadow.transform.scale)
+                .to({x: 1.0, y: 1.0}, 2400, Phaser.Easing.Bounce.Out, true, 1000 + 400 * i, false);
+
+            // Add characters on top of shadows.
+            item = game.add.sprite(190 + 69 * i, -100, 'PHASER', i);
+            // Set origin to the center to make the rotation look better.
+            item.transform.origin.setTo(0.5, 0.5);
+            // Add a simple bounce tween to each character's position.
+            tween = game.add.tween(item)
+                .to({y: 240}, 2400, Phaser.Easing.Bounce.Out, true, 1000 + 400 * i, false);
+        }
+
+        // Set background color to white.
+        game.stage.backgroundColor = '#fff';
+    }
+})();

Tests/tweens/easing example 6.js

@@ -0,0 +1,53 @@
+/// <reference path="../../Phaser/Game.ts" />
+(function () {
+    var game = new Phaser.Game(this, 'game', 800, 600, init, create);
+
+    function init() {
+        game.load.spritesheet('shadow', 'assets/tests/tween/shadow.png', 80, 15);
+        game.load.spritesheet('PHASER', 'assets/tests/tween/PHASER.png', 70, 90);
+        game.load.spritesheet('ribbon', 'assets/tests/tween/ribbon.png', 731, 49);
+        game.load.start();
+    }
+    function create() {
+        var ribbon = game.add.sprite(-1000, 256, 'ribbon');
+        ribbon.transform.scale.setTo(1.2, 1.0);
+        // Add ribbon appear animation.
+        var tween = game.add.tween(ribbon)
+            .to({x: -218}, 2400, Phaser.Easing.Elastic.Out, true, 0, false);
+
+        // Add characters and give them a delay so they'll appear after the
+        // ribbon already there.
+        var item;
+        var letterGroup = game.add.group();
+        for (var i = 0; i < 6; i++) {
+            item = game.add.sprite(80 + 69 * i, -100, 'PHASER', i);
+            letterGroup.add(item);
+            // Set origin to the center to make the rotation look better.
+            item.transform.origin.setTo(0.5, 0.5);
+            // Add a simple bounce tween to each character's position.
+            tween = game.add.tween(item)
+                .to({y: 240}, 2000, Phaser.Easing.Bounce.Out, true, 1600 + 400 * i, false);
+        }
+
+        // Move the ribbon out after the last letter landded.
+        // Instead of using delay, we can use the callback of tweens.
+        tween.onComplete.add(function() {
+            tween = game.add.tween(ribbon)
+                .to({x: -1000}, 1600, Phaser.Easing.Elastic.In, true, 500, false);
+            // Again add falling animations to the letter after ribbon disappeared.
+            tween.onComplete.add(function() {
+                var index = 5;
+                letterGroup.forEach(function(item) {
+                    game.add.tween(item)
+                        .to({y: 640}, 1000, Phaser.Easing.Circular.In, true, index * 100, false);
+                    game.add.tween(item)
+                        .to({rotation: 720}, 1600, Phaser.Easing.Cubic.Out, true, 200 + index * 300, false);
+                    index--;
+                });
+            });
+        });
+
+        // Set background color to white.
+        game.stage.backgroundColor = '#fff';
+    }
+})();