diff --git a/Tests/cameras/basic follow.ts b/Tests/cameras/basic follow.ts
new file mode 100644
index 00000000..3c4522ee
--- /dev/null
+++ b/Tests/cameras/basic follow.ts	
@@ -0,0 +1,64 @@
+/// <reference path="../../Phaser/Game.ts" />
+(function () {
+    var game = new Phaser.Game(this, 'game', 800, 600, init, create, update);
+
+    var ufo: Phaser.Sprite;
+    var speed: Number = 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('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);
+
+        // ufo spirte
+        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 camera follows ufo
+        game.camera.follow(ufo);
+    }
+    function update() {
+        if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT)) {
+            ufo.x -= speed;
+            ufo.rotation = -15;
+        }
+        else if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT)) {
+            ufo.x += speed;
+            ufo.rotation = 15;
+        }
+        else {
+            ufo.rotation = 0;
+        }
+        if (game.input.keyboard.isDown(Phaser.Keyboard.UP)) {
+            ufo.y -= speed;
+        }
+        else if (game.input.keyboard.isDown(Phaser.Keyboard.DOWN)) {
+            ufo.y += speed;
+        }
+    }
+})();
diff --git a/Tests/cameras/camera fx 1.ts b/Tests/cameras/camera fx 1.ts
new file mode 100644
index 00000000..8da89a17
--- /dev/null
+++ b/Tests/cameras/camera fx 1.ts	
@@ -0,0 +1,45 @@
+/// <reference path="../../Phaser/Game.ts" />
+(function () {
+    var game = new Phaser.Game(this, 'game', 800, 600, init, create, null, render);
+
+    var btn1: Phaser.Button,
+        btn2: Phaser.Button,
+        btn3: Phaser.Button;
+    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!');
+        });
+    }
+})();
diff --git a/Tests/cameras/camera fx 2.ts b/Tests/cameras/camera fx 2.ts
new file mode 100644
index 00000000..e6db6670
--- /dev/null
+++ b/Tests/cameras/camera fx 2.ts	
@@ -0,0 +1,46 @@
+/// <reference path="../../Phaser/Game.ts" />
+(function () {
+    var game = new Phaser.Game(this, 'game', 800, 600, init, create, null, render);
+
+    var btn1: Phaser.Button,
+        btn2: Phaser.Button,
+        btn3: Phaser.Button;
+    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!');
+        });
+    }
+})();
diff --git a/Tests/cameras/camera fx 3.ts b/Tests/cameras/camera fx 3.ts
new file mode 100644
index 00000000..ba8b30eb
--- /dev/null
+++ b/Tests/cameras/camera fx 3.ts	
@@ -0,0 +1,46 @@
+/// <reference path="../../Phaser/Game.ts" />
+(function () {
+    var game = new Phaser.Game(this, 'game', 800, 600, init, create, null, render);
+
+    var btn1: Phaser.Button,
+        btn2: Phaser.Button,
+        btn3: Phaser.Button;
+    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!');
+        });
+    }
+})();
diff --git a/Tests/cameras/camera scale.ts b/Tests/cameras/camera scale.ts
new file mode 100644
index 00000000..0c487213
--- /dev/null
+++ b/Tests/cameras/camera scale.ts	
@@ -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: Phaser.Camera;
+
+    var zombie: Phaser.Sprite;
+    var walkSpeed: Number = 2,
+        direction: Number = 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);
+    }
+})();
diff --git a/Tests/cameras/camera texture.ts b/Tests/cameras/camera texture.ts
new file mode 100644
index 00000000..5a95701a
--- /dev/null
+++ b/Tests/cameras/camera texture.ts	
@@ -0,0 +1,19 @@
+/// <reference path="../../Phaser/Game.ts" />
+(function () {
+    var game = new Phaser.Game(this, 'game', 800, 600, init, create, null, render);
+
+    function init() {
+        game.world.setSize(800, 600, true);
+        game.load.image('background', 'assets/misc/water_texture.jpg');
+
+        game.load.start();
+    }
+    function create() {
+        game.camera.texture.loadImage('background', false);
+    }
+    function render() {
+        Phaser.DebugUtils.context.fillStyle = 'rgb(255, 255, 255)';
+        Phaser.DebugUtils.context.fillText('Draw background image using camera.texture property.',
+            196, 320);
+    }
+})();
diff --git a/Tests/cameras/follow styles.ts b/Tests/cameras/follow styles.ts
new file mode 100644
index 00000000..165c0ff4
--- /dev/null
+++ b/Tests/cameras/follow styles.ts	
@@ -0,0 +1,102 @@
+/// <reference path="../../Phaser/Game.ts" />
+(function () {
+    var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render);
+
+    var ufo: Phaser.Sprite,
+        speed: Number = 4;
+
+    var btn0: Phaser.Button,
+        btn1: Phaser.Button,
+        btn2: Phaser.Button,
+        btn3: Phaser.Button;
+    var style: String = 'default';
+
+    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('button', 'assets/buttons/follow-style-button.png', 224, 70);
+
+        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.1);
+        game.add.sprite(0, 400, 'river')
+            .transform.scrollFactor.setTo(1.3, 0.16);
+        game.add.sprite(200, 120, 'cloud0')
+            .transform.scrollFactor.setTo(0.3, 0.1);
+        game.add.sprite(-60, 120, 'cloud1')
+            .transform.scrollFactor.setTo(0.5, 0.1);
+        game.add.sprite(900, 170, 'cloud2')
+            .transform.scrollFactor.setTo(0.7, 0.1);
+        // ufo spirte
+        ufo = game.add.sprite(360, 240, 'ufo');
+        ufo.animations.add('fly', null, 30, false);
+        ufo.animations.play('fly');
+        ufo.transform.origin.setTo(0.5, 0.5);
+
+        // make camera follows ufo
+        game.camera.follow(ufo);
+
+        // follow style switch buttons
+        btn0 = game.add.button(16, 40, 'button', lockonFollow, 0, 0, 0);
+        btn1 = game.add.button(16, 120, 'button', platformerFollow, 1, 1, 1);
+        btn2 = game.add.button(16, 200, 'button', topdownFollow, 2, 2, 2);
+        btn3 = game.add.button(16, 280, 'button', topdownTightFollow, 3, 3, 3);
+    }
+    function update() {
+        if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT)) {
+            ufo.x -= speed;
+            ufo.rotation = -15;
+        }
+        else if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT)) {
+            ufo.x += speed;
+            ufo.rotation = 15;
+        }
+        else {
+            ufo.rotation = 0;
+        }
+        if (game.input.keyboard.isDown(Phaser.Keyboard.UP)) {
+            ufo.y -= speed;
+        }
+        else if (game.input.keyboard.isDown(Phaser.Keyboard.DOWN)) {
+            ufo.y += speed;
+        }
+    }
+    function render() {
+        if (game.camera.deadzone) {
+            Phaser.DebugUtils.renderRectangle(game.camera.deadzone, 'rgba(240, 112, 111, 0.4)');
+        }
+        // game.camera.renderDebugInfo(400, 16);
+        Phaser.DebugUtils.context.fillStyle = '#fff';
+        Phaser.DebugUtils.context.fillText('Click buttons to switch between different styles.', 360, 32);
+        Phaser.DebugUtils.context.fillText('Current style: ' + style, 360, 48);
+    }
+    function lockonFollow() {
+        game.camera.follow(ufo, Phaser.Camera.STYLE_LOCKON);
+        style = 'STYLE_LOCKON';
+    }
+    function platformerFollow() {
+        game.camera.follow(ufo, Phaser.Camera.STYLE_PLATFORMER);
+        style = 'STYLE_PLATFORMER';
+    }
+    function topdownFollow() {
+        game.camera.follow(ufo, Phaser.Camera.STYLE_TOPDOWN);
+        style = 'STYLE_TOPDOWN';
+    }
+    function topdownTightFollow() {
+        game.camera.follow(ufo, Phaser.Camera.STYLE_TOPDOWN_TIGHT);
+        style = 'STYLE_TOPDOWN_TIGHT';
+    }
+})();
diff --git a/Tests/cameras/hide from camera.ts b/Tests/cameras/hide from camera.ts
new file mode 100644
index 00000000..e0909327
--- /dev/null
+++ b/Tests/cameras/hide from camera.ts	
@@ -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: Phaser.Sprite;
+    var ships: Phaser.Sprite[] = [];
+
+    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: Phaser.Sprite = 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);
+    }
+})();
diff --git a/Tests/cameras/multi camera.ts b/Tests/cameras/multi camera.ts
new file mode 100644
index 00000000..5484466d
--- /dev/null
+++ b/Tests/cameras/multi camera.ts	
@@ -0,0 +1,70 @@
+/// <reference path="../../Phaser/Game.ts" />
+(function () {
+    var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render);
+
+    var zombieCamera: Phaser.Camera;
+
+    var zombie: Phaser.Sprite;
+    var walkSpeed: Number = 2,
+        direction: Number = 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);
+        // 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);
+    }
+})();
diff --git a/Tests/cameras/scrollfactor compare.ts b/Tests/cameras/scrollfactor compare.ts
new file mode 100644
index 00000000..07b499a1
--- /dev/null
+++ b/Tests/cameras/scrollfactor compare.ts	
@@ -0,0 +1,44 @@
+/// <reference path="../../Phaser/Game.ts" />
+(function () {
+    var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render);
+    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.start();
+    }
+    function create() {
+        // background sky, which does not move at all
+        game.add.sprite(0, 0, 'sky')
+            .transform.scrollFactor.setTo(0, 0);
+
+        // clouds with different scroll factor which moves slower than camera
+        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);
+
+        // forground objects which moves equal or faster than camera
+        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);
+    }
+    function update() {
+        if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT)) {
+            game.camera.x -= 3;
+        }
+        else if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT)) {
+            game.camera.x += 3;
+        }
+    }
+    function render() {
+        // game.camera.renderDebugInfo(32, 32);
+    }
+})();
diff --git a/Tests/groups/add to group 1.ts b/Tests/groups/add to group 1.ts
new file mode 100644
index 00000000..58cc89b9
--- /dev/null
+++ b/Tests/groups/add to group 1.ts	
@@ -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: Phaser.Group,
+        enemies: Phaser.Group;
+
+    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: Phaser.Sprite = 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);
+    }
+})();
diff --git a/Tests/groups/add to group 2.ts b/Tests/groups/add to group 2.ts
new file mode 100644
index 00000000..25b8da0f
--- /dev/null
+++ b/Tests/groups/add to group 2.ts	
@@ -0,0 +1,41 @@
+/// <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();
+    }
+
+    var friendAndFoe: Phaser.Group,
+        enemies: Phaser.Group;
+
+    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);
+    }
+})();
diff --git a/Tests/groups/bring to top.ts b/Tests/groups/bring to top.ts
new file mode 100644
index 00000000..4521e954
--- /dev/null
+++ b/Tests/groups/bring to top.ts	
@@ -0,0 +1,30 @@
+(function() {
+    var game = new Phaser.Game(this, 'game', 800, 600, init, create, null, render);
+
+    var container: Phaser.Group;
+
+    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);
+    }
+})();
diff --git a/Tests/groups/call all.ts b/Tests/groups/call all.ts
new file mode 100644
index 00000000..e8f5997a
--- /dev/null
+++ b/Tests/groups/call all.ts	
@@ -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: Phaser.Sprite;
+        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);
+    }
+})();
diff --git a/Tests/groups/direct render.ts b/Tests/groups/direct render.ts
new file mode 100644
index 00000000..3216fad3
--- /dev/null
+++ b/Tests/groups/direct render.ts	
@@ -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:: Phaser.Group, right: Phaser.Group;
+    // The first selected item.
+    var selected: Phaser.Sprite = 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: Phaser.Sprite;
+        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);
+    }
+})();
diff --git a/Tests/groups/for each.ts b/Tests/groups/for each.ts
new file mode 100644
index 00000000..c24f1506
--- /dev/null
+++ b/Tests/groups/for each.ts	
@@ -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: Number = 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);
+    }
+})();
diff --git a/Tests/groups/get first 1.ts b/Tests/groups/get first 1.ts
new file mode 100644
index 00000000..818d19d4
--- /dev/null
+++ b/Tests/groups/get first 1.ts	
@@ -0,0 +1,45 @@
+/// <reference path="../../Phaser/Game.ts" />
+(function () {
+    var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render);
+
+    var timer: Number,
+        cycle: Number;
+
+    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: Phaser.Sprite;
+        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);
+    }
+})();
diff --git a/Tests/groups/get first 2.ts b/Tests/groups/get first 2.ts
new file mode 100644
index 00000000..137fba29
--- /dev/null
+++ b/Tests/groups/get first 2.ts	
@@ -0,0 +1,50 @@
+/// <reference path="../../Phaser/Game.ts" />
+(function () {
+    var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render);
+
+    var timer: Number,
+        cycle: Number;
+
+    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: Phaser.Sprite;
+        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: Phaser.Sprite = 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);
+    }
+})();
diff --git a/Tests/groups/get first 3.ts b/Tests/groups/get first 3.ts
new file mode 100644
index 00000000..db588a43
--- /dev/null
+++ b/Tests/groups/get first 3.ts	
@@ -0,0 +1,60 @@
+/// <reference path="../../Phaser/Game.ts" />
+(function () {
+    var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render);
+
+    var killTimer: Number,
+        reviveTimer: Number,
+        cycle: Number;
+
+    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: Phaser.Sprite;
+        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: Phaser.Sprite = 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: Phaser.Sprite = 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);
+    }
+})();
diff --git a/Tests/groups/group as layer.ts b/Tests/groups/group as layer.ts
new file mode 100644
index 00000000..31a802cb
--- /dev/null
+++ b/Tests/groups/group as layer.ts	
@@ -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: Phaser.Group = game.add.group();
+        skyLayer.z = 0;
+        // Create the cloud layer, only beyond the sky.
+        var cloudLayer: Phaser.Group = game.add.group();
+        cloudLayer.z = 1;
+        // Create the ground, behind the river and beyond clouds.
+        var groundLayer: Phaser.Group = 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: Phaser.Group = game.add.group();
+        spriteLayer.z = 3;
+        // Create the river layer, beyond everything.
+        var riverLayer: Phaser.Group = game.add.group();
+        riverLayer.z = 4;
+
+        // Add sky background to skyLayer.
+        var sky: Phaser.Sprite = new Phaser.Sprite(game, 0, 0, 'sky');
+        sky.transform.scrollFactor.setTo(0, 0);
+        skyLayer.add(sky);
+        // Add clouds to cloudLayer.
+        var cloud0: Phaser.Sprite = new Phaser.Sprite(game, 200, 120, 'cloud0');
+        cloud0.transform.scrollFactor.setTo(0.3, 0.1);
+        var cloud1: Phaser.Sprite = new Phaser.Sprite(game, -60, 120, 'cloud1');
+        cloud1.transform.scrollFactor.setTo(0.5, 0.1);
+        var cloud2: Phaser.Sprite = 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: Phaser.Sprite = new Phaser.Sprite(game, 0, 360, 'ground');
+        ground.transform.scrollFactor.setTo(0.5, 0.1);
+        groundLayer.add(ground);
+        // Add river to riverLayer.
+        var river: Phaser.Sprite = 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: Phaser.Sprite = 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);
+    }
+})();
diff --git a/Tests/groups/group transform 1.ts b/Tests/groups/group transform 1.ts
new file mode 100644
index 00000000..7bc02ebb
--- /dev/null
+++ b/Tests/groups/group transform 1.ts	
@@ -0,0 +1,70 @@
+/// <reference path="../../Phaser/Game.ts" />
+(function () {
+    var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render);
+
+    var robot: Phaser.Group;
+    var eye: Phaser.Sprite,
+        body: Phaser.Sprite,
+        leftArm: Phaser.Sprite,
+        rightArm: Phaser.Sprite,
+        leftLeg: Phaser.Sprite,
+        rightLeg: Phaser.Sprite;
+
+    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: Phaser.Sprite;
+        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);
+    }
+})();
diff --git a/Tests/groups/group transform 2.ts b/Tests/groups/group transform 2.ts
new file mode 100644
index 00000000..fbb72eba
--- /dev/null
+++ b/Tests/groups/group transform 2.ts	
@@ -0,0 +1,52 @@
+/// <reference path="../../Phaser/Game.ts" />
+(function () {
+    var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render);
+
+    var robot: Phaser.Group;
+    var eye: Phaser.Sprite,
+        body: Phaser.Sprite,
+        leftArm: Phaser.Sprite,
+        rightArm: Phaser.Sprite,
+        leftLeg: Phaser.Sprite,
+        rightLeg: Phaser.Sprite;
+
+    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: Phaser.Sprite;
+        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);
+    }
+})();
diff --git a/Tests/groups/group transform 3.ts b/Tests/groups/group transform 3.ts
new file mode 100644
index 00000000..8d46d2f2
--- /dev/null
+++ b/Tests/groups/group transform 3.ts	
@@ -0,0 +1,55 @@
+/// <reference path="../../Phaser/Game.ts" />
+(function () {
+    var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render);
+
+    var robot: Phaser.Group;
+    var eye: Phaser.Sprite,
+        body: Phaser.Sprite,
+        leftArm: Phaser.Sprite,
+        rightArm: Phaser.Sprite,
+        leftLeg: Phaser.Sprite,
+        rightLeg: Phaser.Sprite;
+
+    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: Phaser.Sprite;
+        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);
+    }
+})();
diff --git a/Tests/groups/recycle 1.js b/Tests/groups/recycle 1.js
index 965faeb0..6325048d 100644
--- a/Tests/groups/recycle 1.js	
+++ b/Tests/groups/recycle 1.js	
@@ -1,6 +1,10 @@
 /// <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');
diff --git a/Tests/groups/recycle 1.ts b/Tests/groups/recycle 1.ts
new file mode 100644
index 00000000..12ad194e
--- /dev/null
+++ b/Tests/groups/recycle 1.ts	
@@ -0,0 +1,50 @@
+/// <reference path="../../Phaser/Game.ts" />
+(function () {
+    var game = new Phaser.Game(this, 'game', 800, 600, init, create, null, render);
+
+    var friendAndFoe: Phaser.Group,
+        enemies: Phaser.Group;
+
+    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: Phaser.Sprite = 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: Phaser.Sprite = 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);
+    }
+})();
diff --git a/Tests/groups/recycle 2.ts b/Tests/groups/recycle 2.ts
new file mode 100644
index 00000000..1e5df09d
--- /dev/null
+++ b/Tests/groups/recycle 2.ts	
@@ -0,0 +1,53 @@
+/// <reference path="../../Phaser/Game.ts" />
+(function () {
+    var game = new Phaser.Game(this, 'game', 800, 600, init, create, null, render);
+
+    var friendAndFoe: Phaser.Group,
+        enemies: Phaser.Group;
+
+    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: Phaser.Sprite = 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: Phaser.Sprite = 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);
+    }
+})();
diff --git a/Tests/groups/remove.ts b/Tests/groups/remove.ts
new file mode 100644
index 00000000..cb9907f6
--- /dev/null
+++ b/Tests/groups/remove.ts
@@ -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: Phaser.Group;
+
+    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: Phaser.Sprite;
+        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: Phaser.Sprite = game.add.sprite(400, 0, 'rect');
+        rect.transform.scale.setTo(2.0, 3.0);
+        var rect2: Phaser.Sprite = 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);
+            }
+        }
+    }
+})();
diff --git a/Tests/groups/replace.ts b/Tests/groups/replace.ts
new file mode 100644
index 00000000..04d8a1cb
--- /dev/null
+++ b/Tests/groups/replace.ts
@@ -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: Phaser.Group, right: Phaser.Group;
+    // The first selected item.
+    var selected: Phaser.Sprite = 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: Phaser.Sprite;
+        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);
+    }
+})();
diff --git a/Tests/groups/set all.ts b/Tests/groups/set all.ts
new file mode 100644
index 00000000..d1193a89
--- /dev/null
+++ b/Tests/groups/set all.ts	
@@ -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: Number = 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);
+    }
+})();
diff --git a/Tests/groups/sort 1.ts b/Tests/groups/sort 1.ts
new file mode 100644
index 00000000..61bed6ab
--- /dev/null
+++ b/Tests/groups/sort 1.ts	
@@ -0,0 +1,48 @@
+(function() {
+    var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render);
+
+    var xTop: Phaser.Group,
+        yTop: Phaser.Group,
+        zTop: Phaser.Group;
+
+    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: Number;
+        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);
+    }
+})();
diff --git a/Tests/groups/sort 2.ts b/Tests/groups/sort 2.ts
new file mode 100644
index 00000000..ad82ab90
--- /dev/null
+++ b/Tests/groups/sort 2.ts	
@@ -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: Phaser.Group;
+
+    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: Phaser.Sprite;
+        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);
+    }
+})();
diff --git a/Tests/groups/sub groups.ts b/Tests/groups/sub groups.ts
new file mode 100644
index 00000000..58f20493
--- /dev/null
+++ b/Tests/groups/sub groups.ts	
@@ -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: Phaser.Group,
+        enemies: Phaser.Group;
+
+    // Groups for teaming up stuff.
+    var normalBaddies: Phaser.Group,
+        purpleBaddies: Phaser.Group;
+
+    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: Phaser.Sprite;
+        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);
+    }
+})();
diff --git a/Tests/input/drop limitation.ts b/Tests/input/drop limitation.ts
new file mode 100644
index 00000000..4f6e47be
--- /dev/null
+++ b/Tests/input/drop limitation.ts	
@@ -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: Phaser.Sprite;
+        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;
+        }
+    }
+})();
diff --git a/Tests/input/keyboard 1.ts b/Tests/input/keyboard 1.ts
new file mode 100644
index 00000000..c67a930a
--- /dev/null
+++ b/Tests/input/keyboard 1.ts	
@@ -0,0 +1,81 @@
+/// <reference path="../../Phaser/Game.ts" />
+(function () {
+    var game = new Phaser.Game(this, 'game', 800, 600, init, create, update);
+
+    var ufo: Phaser.Sprite,
+        leftBtn: Phaser.Sprite,
+        rightBtn: Phaser.Sprite;
+    var speed: Number = 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.');
+    }
+})();
diff --git a/Tests/input/keyboard 2.ts b/Tests/input/keyboard 2.ts
new file mode 100644
index 00000000..130fe9f8
--- /dev/null
+++ b/Tests/input/keyboard 2.ts	
@@ -0,0 +1,110 @@
+/// <reference path="../../Phaser/Game.ts" />
+(function () {
+    var game = new Phaser.Game(this, 'game', 800, 600, init, create, update);
+
+    var ufo: Phaser.Sprite,
+        leftBtn: Phaser.Sprite,
+        rightBtn: Phaser.Sprite,
+        spaceBtn: Phaser.Sprite;
+
+    var speed: Number = 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);
+    }
+})();
diff --git a/Tests/misc/color utils 1.ts b/Tests/misc/color utils 1.ts
new file mode 100644
index 00000000..75146d8f
--- /dev/null
+++ b/Tests/misc/color utils 1.ts	
@@ -0,0 +1,52 @@
+(function() {
+    var game = new Phaser.Game(this, 'game', 800, 600, init, create, null, render);
+
+    var colorWheel: Phaser.Sprite,
+        selected: Phaser.Sprite,
+        color: String = '#CCA22B';
+    var offset = {
+        x: 300 - 578 / 2,
+        y: 300 - 550 / 2
+    };
+    var rect: Phaser.Rectangle,
+        rectSize: Number = 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);
+    }
+})();
diff --git a/Tests/misc/color utils 2.ts b/Tests/misc/color utils 2.ts
new file mode 100644
index 00000000..318208b1
--- /dev/null
+++ b/Tests/misc/color utils 2.ts	
@@ -0,0 +1,60 @@
+(function() {
+    var game = new Phaser.Game(this, 'game', 800, 600, init, create, null, render);
+
+    var colorWheel: Phaser.Sprite,
+        selected: Phaser.Sprite,
+        color: Number = 0xAACCA22B,
+        colorStr: String = '#CCA22B';
+    var offset = {
+        x: 300 - 578 / 2,
+        y: 300 - 550 / 2
+    };
+    var rect: Phaser.Rectangle,
+        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);
+    }
+})();
diff --git a/Tests/misc/color utils 3.ts b/Tests/misc/color utils 3.ts
new file mode 100644
index 00000000..316ddcc5
--- /dev/null
+++ b/Tests/misc/color utils 3.ts	
@@ -0,0 +1,153 @@
+(function() {
+    var game = new Phaser.Game(this, 'game', 800, 600, init, create, null, render);
+
+    var colorWheel: Phaser.Sprite,
+        selected: Phaser.Sprite,
+        compHarmony: Phaser.Sprite,
+        analoHarmony: Phaser.Sprite, analoHarmony1: Phaser.Sprite,
+        splitHarmony: Phaser.Sprite, splitHarmony1: Phaser.Sprite,
+        triaHarmony: Phaser.Sprite, triaHarmony1: Phaser.Sprite,
+
+        color: Number = 0xAACCA22B, colorStr: String = '#CCA22B',
+        compHColor: Number,
+        analoColor: Number, splitColor: Number, triaColor: Number,
+        analoColor1: Number, splitColor1: Number, triaColor1: Number;
+
+    var offset = {
+        x: 300 - 578 / 2,
+        y: 300 - 550 / 2
+    };
+    var rect: Phaser.Rectangle,
+        rectSize: Number = 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: String = Phaser.ColorUtils.RGBtoWebstring(compHColor),
+                analStr: String = Phaser.ColorUtils.RGBtoWebstring(analoColor),
+                analStr1: String = Phaser.ColorUtils.RGBtoWebstring(analoColor1),
+                spliStr: String = Phaser.ColorUtils.RGBtoWebstring(splitColor),
+                spliStr1: String = Phaser.ColorUtils.RGBtoWebstring(splitColor1),
+                triaStr: String = Phaser.ColorUtils.RGBtoWebstring(triaColor),
+                triaStr1: String = 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);
+    }
+})();
diff --git a/Tests/misc/dynamic texture 1.ts b/Tests/misc/dynamic texture 1.ts
new file mode 100644
index 00000000..bc171af5
--- /dev/null
+++ b/Tests/misc/dynamic texture 1.ts	
@@ -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: Phaser.DynamicTexture;
+
+    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);
+    }
+})();
diff --git a/Tests/misc/dynamic texture 2.ts b/Tests/misc/dynamic texture 2.ts
new file mode 100644
index 00000000..79e78f9e
--- /dev/null
+++ b/Tests/misc/dynamic texture 2.ts	
@@ -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: Phaser.DynamicTexture;
+
+    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: Phaser.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);
+    }
+})();
diff --git a/Tests/misc/dynamic texture 3.ts b/Tests/misc/dynamic texture 3.ts
new file mode 100644
index 00000000..f7437e16
--- /dev/null
+++ b/Tests/misc/dynamic texture 3.ts	
@@ -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: Phaser.DynamicTexture;
+
+    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: Phaser.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);
+    }
+})();
diff --git a/Tests/misc/rectangle utils 1.js b/Tests/misc/rectangle utils 1.js
index c3724d29..7b5ad1f0 100644
--- a/Tests/misc/rectangle utils 1.js	
+++ b/Tests/misc/rectangle utils 1.js	
@@ -1,10 +1,52 @@
 (function() {
-    var game = new Phaser.Game(this, 'game', 800, 600, init, create);
+    var game = new Phaser.Game(this, 'game', 800, 600, null, create, update, render);
 
-    function init() {
+    var rects = [],
+        rect, lastCreated;
+
+    function create() {
+        // Create a rect first.
+        spawnRect(64, 32, 64, 64);
+
+        // Add a rectangle on each touch or click.
+        game.input.onTap.add(function() {
+            spawnRect(lastCreated.x + 12, lastCreated.y + 12, 64, 64);
+        });
+    }
+    function update() {
         // body...
     }
-    function create() {
+    function render() {
+        var context = Phaser.DebugUtils.context;
 
+        // Render rectangles.
+        context.strokeStyle = '#fff';
+        // context.fillStyle = '#fff';
+        context.lineWidth = 2;
+        for (var i = 0, len = rects.length; i < len; i++) {
+            rect = rects[i];
+            context.strokeRect(rect.x, rect.y, rect.width, rect.height);
+        }
+
+        // Render info.
+        context.fillStyle = '#fff';
+        context.lineWidth = 0;
+        context.fillText('Tap or click to clone a new rectangle.', 480, 128);
+    }
+    function spawnRect(x, y, w, h) {
+        // If a rect already created, clone it to create a new one instead
+        // of allocating.
+        if (lastCreated) {
+            rect = Phaser.RectangleUtils.clone(lastCreated);
+            // Offset the newly created rectangle.
+            rect.x += 24;
+            rect.y += 24;
+            // Now the last created is this one.
+            lastCreated = rect;
+        }
+        else {
+            lastCreated = new Phaser.Rectangle(x, y, w, h);
+        }
+        rects.push(lastCreated);
     }
 })();
diff --git a/Tests/misc/rectangle utils 1.ts b/Tests/misc/rectangle utils 1.ts
new file mode 100644
index 00000000..9c63681f
--- /dev/null
+++ b/Tests/misc/rectangle utils 1.ts	
@@ -0,0 +1,53 @@
+(function() {
+    var game = new Phaser.Game(this, 'game', 800, 600, null, create, update, render);
+
+    var rects: Phaser.Rectangle[] = [],
+        rect: Phaser.Rectangle,
+        lastCreated: Phaser.Rectangle;
+
+    function create() {
+        // Create a rect first.
+        spawnRect(64, 32, 64, 64);
+
+        // Add a rectangle on each touch or click.
+        game.input.onTap.add(function() {
+            spawnRect(lastCreated.x + 12, lastCreated.y + 12, 64, 64);
+        });
+    }
+    function update() {
+        // body...
+    }
+    function render() {
+        var context: CanvasRenderingContext2D = Phaser.DebugUtils.context;
+
+        // Render rectangles.
+        context.strokeStyle = '#fff';
+        // context.fillStyle = '#fff';
+        context.lineWidth = 2;
+        for (var i = 0, len = rects.length; i < len; i++) {
+            rect = rects[i];
+            context.strokeRect(rect.x, rect.y, rect.width, rect.height);
+        }
+
+        // Render info.
+        context.fillStyle = '#fff';
+        context.lineWidth = 0;
+        context.fillText('Tap or click to clone a new rectangle.', 480, 128);
+    }
+    function spawnRect(x, y, w, h) {
+        // If a rect already created, clone it to create a new one instead
+        // of allocating.
+        if (lastCreated) {
+            rect = Phaser.RectangleUtils.clone(lastCreated);
+            // Offset the newly created rectangle.
+            rect.x += 24;
+            rect.y += 24;
+            // Now the last created is this one.
+            lastCreated = rect;
+        }
+        else {
+            lastCreated = new Phaser.Rectangle(x, y, w, h);
+        }
+        rects.push(lastCreated);
+    }
+})();
diff --git a/Tests/misc/rectangle utils 2.js b/Tests/misc/rectangle utils 2.js
new file mode 100644
index 00000000..8ee15235
--- /dev/null
+++ b/Tests/misc/rectangle utils 2.js	
@@ -0,0 +1,123 @@
+(function() {
+    var game = new Phaser.Game(this, 'game', 800, 600, null, create, update, render);
+
+    var rect, renderList = [];
+    var leftHandler, rightHandler, topHandler, bottomHandler;
+    var onDragLeft = false,
+        onDragRight = false,
+        onDragTop = false,
+        onDragBottom = false;
+    var lastPos = {x: 0, y: 0};
+
+    function create() {
+        // Rectangle to be dragged and scaled.
+        rect = new Phaser.Rectangle(game.stage.centerX - 160, game.stage.centerY - 120,
+            320, 240);
+        // Handler rectangles for dragging scaling.
+        leftHandler = new Phaser.Rectangle(game.stage.centerX - 160 - 4, game.stage.centerY - 4,
+            8, 8);
+        rightHandler = new Phaser.Rectangle(game.stage.centerX + 160 - 4, game.stage.centerY - 4,
+            8, 8);
+        topHandler = new Phaser.Rectangle(game.stage.centerX - 4, game.stage.centerY - 120 - 4,
+            8, 8);
+        bottomHandler = new Phaser.Rectangle(game.stage.centerX - 4, game.stage.centerY + 120 - 4,
+            8, 8);
+        // Add all the rectangles to the render list.
+        renderList.push(rect,
+            leftHandler, rightHandler, topHandler, bottomHandler);
+
+        // Touch or press mouse button on any handler to start inflating rectangle.
+        game.input.onDown.add(function(pointer) {
+            if (Phaser.RectangleUtils.contains(leftHandler, pointer.position.x, pointer.position.y)) {
+                onDragLeft = true;
+                lastPos.x = pointer.position.x;
+                lastPos.y = pointer.position.y;
+            }
+            else if (Phaser.RectangleUtils.contains(rightHandler, pointer.position.x, pointer.position.y)) {
+                onDragRight = true;
+                lastPos.x = pointer.position.x;
+                lastPos.y = pointer.position.y;
+            }
+            else if (Phaser.RectangleUtils.contains(topHandler, pointer.position.x, pointer.position.y)) {
+                onDragTop = true;
+                lastPos.x = pointer.position.x;
+                lastPos.y = pointer.position.y;
+            }
+            else if (Phaser.RectangleUtils.contains(bottomHandler, pointer.position.x, pointer.position.y)) {
+                onDragBottom = true;
+                lastPos.x = pointer.position.x;
+                lastPos.y = pointer.position.y;
+            }
+        });
+        // Stop dragging handlers when up.
+        game.input.onUp.add(function() {
+            onDragLeft = onDragRight = onDragTop = onDragBottom = false;
+        });
+    }
+    function update() {
+        var offset = {x: 0, y: 0};
+        // Calc offset from last frame (previous update).
+        if (onDragLeft) {
+            offset.x = -game.input.x + lastPos.x;
+        }
+        else if (onDragRight) {
+            offset.x = game.input.x - lastPos.x;
+        }
+        else if (onDragTop) {
+            offset.y = -game.input.y + lastPos.y;
+        }
+        else if (onDragBottom) {
+            offset.y = game.input.y - lastPos.y;
+        }
+        // Update last position.
+        lastPos.x = game.input.x;
+        lastPos.y = game.input.y;
+
+        // Change rect's size and also the 4 handlers' position.
+        Phaser.RectangleUtils.inflate(rect, offset.x, offset.y);
+        leftHandler.x = rect.x - leftHandler.width / 2;
+        rightHandler.x = rect.x + rect.width - rightHandler.width / 2;
+        topHandler.y = rect.y - topHandler.height / 2;
+        bottomHandler.y = rect.y + rect.height - bottomHandler.height / 2;
+    }
+    function render() {
+        var context = Phaser.DebugUtils.context;
+
+        // Render rectangles.
+        context.strokeStyle = '#fff';
+        context.fillStyle = '#000';
+        context.lineWidth = 4;
+        for (var i = 0, len = renderList.length; i < len; i++) {
+            context.strokeRect(renderList[i].x, renderList[i].y, renderList[i].width, renderList[i].height);
+            context.fillRect(renderList[i].x, renderList[i].y, renderList[i].width, renderList[i].height);
+        }
+
+        // Render info.
+        context.fillStyle = '#fff';
+        context.lineWidth = 0;
+
+        // Draw offset from origin point when drawing.
+        var origin = game.input.activePointer.positionDown,
+            currPos = game.input.activePointer.position;
+        if (onDragLeft) {
+            context.fillText('dx: ' + (currPos.x - origin.x), leftHandler.x + 16, leftHandler.y - 20);
+            context.fillText('dy: 0', leftHandler.x + 16, leftHandler.y - 8);
+        }
+        else if (onDragRight) {
+            context.fillText('dx: ' + (currPos.x - origin.x), rightHandler.x + 16, rightHandler.y - 20);
+            context.fillText('dx: 0', rightHandler.x + 16, rightHandler.y - 8);
+        }
+        else if (onDragTop) {
+            context.fillText('dy: 0', topHandler.x + 16, topHandler.y - 20);
+            context.fillText('dy: ' + (currPos.y - origin.y), topHandler.x + 16, topHandler.y - 8);
+        }
+        else if (onDragBottom) {
+            context.fillText('dy: 0', bottomHandler.x + 16, bottomHandler.y - 20);
+            context.fillText('dy: ' + (currPos.y - origin.y), bottomHandler.x + 16, bottomHandler.y - 8);
+        }
+
+        context.fillText('Drag handlers to scale the rectangle!', 280, 96);
+        context.fillText('Notice that the scaling does not move the rectangle\'s center!', 220, 508);
+        context.fillText('You can also get same effect by using "Sprite" and its origin property.', 196, 520);
+    }
+})();
diff --git a/Tests/misc/rectangle utils 2.ts b/Tests/misc/rectangle utils 2.ts
new file mode 100644
index 00000000..95ebb2c7
--- /dev/null
+++ b/Tests/misc/rectangle utils 2.ts	
@@ -0,0 +1,130 @@
+(function() {
+    var game = new Phaser.Game(this, 'game', 800, 600, null, create, update, render);
+
+    var rect: Phaser.Rectangle,
+        renderList: Phaser.Rectangle[] = [];
+
+    var leftHandler: Phaser.Rectangle,
+        rightHandler: Phaser.Rectangle,
+        topHandler: Phaser.Rectangle,
+        bottomHandler: Phaser.Rectangle;
+
+    var onDragLeft: Boolean = false,
+        onDragRight: Boolean = false,
+        onDragTop: Boolean = false,
+        onDragBottom: Boolean = false;
+
+    var lastPos = {x: 0, y: 0};
+
+    function create() {
+        // Rectangle to be dragged and scaled.
+        rect = new Phaser.Rectangle(game.stage.centerX - 160, game.stage.centerY - 120,
+            320, 240);
+        // Handler rectangles for dragging scaling.
+        leftHandler = new Phaser.Rectangle(game.stage.centerX - 160 - 4, game.stage.centerY - 4,
+            8, 8);
+        rightHandler = new Phaser.Rectangle(game.stage.centerX + 160 - 4, game.stage.centerY - 4,
+            8, 8);
+        topHandler = new Phaser.Rectangle(game.stage.centerX - 4, game.stage.centerY - 120 - 4,
+            8, 8);
+        bottomHandler = new Phaser.Rectangle(game.stage.centerX - 4, game.stage.centerY + 120 - 4,
+            8, 8);
+        // Add all the rectangles to the render list.
+        renderList.push(rect,
+            leftHandler, rightHandler, topHandler, bottomHandler);
+
+        // Touch or press mouse button on any handler to start inflating rectangle.
+        game.input.onDown.add(function(pointer) {
+            if (Phaser.RectangleUtils.contains(leftHandler, pointer.position.x, pointer.position.y)) {
+                onDragLeft = true;
+                lastPos.x = pointer.position.x;
+                lastPos.y = pointer.position.y;
+            }
+            else if (Phaser.RectangleUtils.contains(rightHandler, pointer.position.x, pointer.position.y)) {
+                onDragRight = true;
+                lastPos.x = pointer.position.x;
+                lastPos.y = pointer.position.y;
+            }
+            else if (Phaser.RectangleUtils.contains(topHandler, pointer.position.x, pointer.position.y)) {
+                onDragTop = true;
+                lastPos.x = pointer.position.x;
+                lastPos.y = pointer.position.y;
+            }
+            else if (Phaser.RectangleUtils.contains(bottomHandler, pointer.position.x, pointer.position.y)) {
+                onDragBottom = true;
+                lastPos.x = pointer.position.x;
+                lastPos.y = pointer.position.y;
+            }
+        });
+        // Stop dragging handlers when up.
+        game.input.onUp.add(function() {
+            onDragLeft = onDragRight = onDragTop = onDragBottom = false;
+        });
+    }
+    function update() {
+        var offset = {x: 0, y: 0};
+        // Calc offset from last frame (previous update).
+        if (onDragLeft) {
+            offset.x = -game.input.x + lastPos.x;
+        }
+        else if (onDragRight) {
+            offset.x = game.input.x - lastPos.x;
+        }
+        else if (onDragTop) {
+            offset.y = -game.input.y + lastPos.y;
+        }
+        else if (onDragBottom) {
+            offset.y = game.input.y - lastPos.y;
+        }
+        // Update last position.
+        lastPos.x = game.input.x;
+        lastPos.y = game.input.y;
+
+        // Change rect's size and also the 4 handlers' position.
+        Phaser.RectangleUtils.inflate(rect, offset.x, offset.y);
+        leftHandler.x = rect.x - leftHandler.width / 2;
+        rightHandler.x = rect.x + rect.width - rightHandler.width / 2;
+        topHandler.y = rect.y - topHandler.height / 2;
+        bottomHandler.y = rect.y + rect.height - bottomHandler.height / 2;
+    }
+    function render() {
+        var context: CanvasRenderingContext2D = Phaser.DebugUtils.context;
+
+        // Render rectangles.
+        context.strokeStyle = '#fff';
+        context.fillStyle = '#000';
+        context.lineWidth = 4;
+        for (var i = 0, len = renderList.length; i < len; i++) {
+            context.strokeRect(renderList[i].x, renderList[i].y, renderList[i].width, renderList[i].height);
+            context.fillRect(renderList[i].x, renderList[i].y, renderList[i].width, renderList[i].height);
+        }
+
+        // Render info.
+        context.fillStyle = '#fff';
+        context.lineWidth = 0;
+
+        // Draw offset from origin point when drawing.
+        var origin: Phaser.Vec2 = game.input.activePointer.positionDown,
+            currPos: Phaser.Vec2 = game.input.activePointer.position;
+        if (onDragLeft) {
+            context.fillText('dx: ' + (currPos.x - origin.x), leftHandler.x + 16, leftHandler.y - 20);
+            context.fillText('dy: 0', leftHandler.x + 16, leftHandler.y - 8);
+        }
+        else if (onDragRight) {
+            context.fillText('dx: ' + (currPos.x - origin.x), rightHandler.x + 16, rightHandler.y - 20);
+            context.fillText('dx: 0', rightHandler.x + 16, rightHandler.y - 8);
+        }
+        else if (onDragTop) {
+            context.fillText('dy: 0', topHandler.x + 16, topHandler.y - 20);
+            context.fillText('dy: ' + (currPos.y - origin.y), topHandler.x + 16, topHandler.y - 8);
+        }
+        else if (onDragBottom) {
+            context.fillText('dy: 0', bottomHandler.x + 16, bottomHandler.y - 20);
+            context.fillText('dy: ' + (currPos.y - origin.y), bottomHandler.x + 16, bottomHandler.y - 8);
+        }
+
+        context.fillText('Drag handlers to scale the rectangle!', 280, 96);
+        context.fillText('Notice that the scaling does not move the rectangle\'s center!', 220, 508);
+        context.fillText('You can also get same effect by using "Sprite" and its origin property.', 196, 520);
+    }
+})();
diff --git a/Tests/sprites/out of screen.ts b/Tests/sprites/out of screen.ts
new file mode 100644
index 00000000..5d0513f4
--- /dev/null
+++ b/Tests/sprites/out of screen.ts	
@@ -0,0 +1,30 @@
+(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: Phaser.Sprite,
+            factor: Number;
+        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;
+            }
+        });
+    }
+})();
diff --git a/Tests/sprites/rotate around.ts b/Tests/sprites/rotate around.ts
new file mode 100644
index 00000000..4ac66e55
--- /dev/null
+++ b/Tests/sprites/rotate around.ts	
@@ -0,0 +1,41 @@
+(function() {
+    var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render);
+
+    var rotationSrv: Phaser.Point,
+        angle: Number = 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);
+    }
+})();
diff --git a/Tests/tweens/easing example 1.ts b/Tests/tweens/easing example 1.ts
new file mode 100644
index 00000000..fff2cad6
--- /dev/null
+++ b/Tests/tweens/easing example 1.ts	
@@ -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: Phaser.Sprite;
+        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';
+    }
+})();
diff --git a/Tests/tweens/easing example 2.ts b/Tests/tweens/easing example 2.ts
new file mode 100644
index 00000000..97c57001
--- /dev/null
+++ b/Tests/tweens/easing example 2.ts	
@@ -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: Phaser.Sprite;
+        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';
+    }
+})();
diff --git a/Tests/tweens/easing example 3.ts b/Tests/tweens/easing example 3.ts
new file mode 100644
index 00000000..095e17a8
--- /dev/null
+++ b/Tests/tweens/easing example 3.ts	
@@ -0,0 +1,28 @@
+/// <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: Phaser.Sprite,
+            tween: Phaser.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';
+    }
+})();
diff --git a/Tests/tweens/easing example 4.ts b/Tests/tweens/easing example 4.ts
new file mode 100644
index 00000000..0e0cd378
--- /dev/null
+++ b/Tests/tweens/easing example 4.ts	
@@ -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', 80, 15);
+        game.load.spritesheet('PHASER', 'assets/tests/tween/PHASER.png', 70, 90);
+        game.load.start();
+    }
+    function create() {
+        var item: Phaser.Sprite,
+            tween: Phaser.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';
+    }
+})();
diff --git a/Tests/tweens/easing example 5.ts b/Tests/tweens/easing example 5.ts
new file mode 100644
index 00000000..88166ce8
--- /dev/null
+++ b/Tests/tweens/easing example 5.ts	
@@ -0,0 +1,40 @@
+/// <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: Phaser.Sprite,
+            shadow: Phaser.Sprite,
+            tween: Phaser.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';
+    }
+})();
diff --git a/Tests/tweens/easing example 6.ts b/Tests/tweens/easing example 6.ts
new file mode 100644
index 00000000..a220d7c6
--- /dev/null
+++ b/Tests/tweens/easing example 6.ts	
@@ -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: Phaser.Sprite = game.add.sprite(-1000, 256, 'ribbon');
+        ribbon.transform.scale.setTo(1.2, 1.0);
+        // Add ribbon appear animation.
+        var tween: Phaser.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: Phaser.Sprite;
+        var letterGroup: Phaser.Group = 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: Number = 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';
+    }
+})();