Updated Loader component and fixed a few Pointer issues.

Tests/demoscene/ballmover.js

@@ -0,0 +1,18 @@
+/// <reference path="../../Phaser/Game.ts" />
+/// <reference path="../../Phaser/gameobjects/ScrollZone.ts" />
+(function () {
+    var game = new Phaser.Game(this, 'demo1', 320, 200, init, create, update);
+    function init() {
+        game.load.image('balls', '../assets/sprites/balls.png');
+        game.load.start();
+    }
+    var scroller;
+    function create() {
+        scroller = game.add.scrollZone('balls', 0, 0, 800, 612);
+        game.math.sinCosGenerator(256, 4, 4, 2);
+    }
+    function update() {
+        scroller.currentRegion.scrollSpeed.x = game.math.shiftSinTable();
+        scroller.currentRegion.scrollSpeed.y = game.math.shiftCosTable();
+    }
+})();

Tests/demoscene/ballmover.ts

@@ -0,0 +1,31 @@
+/// <reference path="../../Phaser/Game.ts" />
+/// <reference path="../../Phaser/gameobjects/ScrollZone.ts" />
+
+(function () {
+
+    var game = new Phaser.Game(this, 'demo1', 320, 200, init, create, update);
+
+    function init() {
+
+        game.load.image('balls', '../assets/sprites/balls.png');
+        game.load.start();
+
+    }
+
+    var scroller: Phaser.ScrollZone;
+
+    function create() {
+
+        scroller = game.add.scrollZone('balls', 0, 0, 800, 612);
+		game.math.sinCosGenerator(256, 4, 4, 2);
+
+    }
+
+    function update() {
+
+        scroller.currentRegion.scrollSpeed.x = game.math.shiftSinTable();
+        scroller.currentRegion.scrollSpeed.y = game.math.shiftCosTable();
+
+    }
+
+})();

Tests/demoscene/colorwhirl.js

@@ -0,0 +1,22 @@
+/// <reference path="../../Phaser/Game.ts" />
+(function () {
+    var game = new Phaser.Game(this, 'game', 320, 200, init, create);
+    function init() {
+        //  Using Phasers asset loader we load up a PNG from the assets folder
+        game.load.image('swirl', '../assets/pics/color_wheel_swirl.png');
+        game.load.start();
+    }
+    var swirl;
+    function create() {
+        //  Here we'll assign the new sprite to the local swirl variable
+        swirl = game.add.sprite(game.stage.centerX, game.stage.centerY, 'swirl');
+        //  Increase the size of the sprite a little so it covers the edges of the stage
+        swirl.scale.setTo(1.4, 1.4);
+        //  Set the origin to the middle of the Sprite to get the effect we need
+        swirl.origin.setTo(swirl.frameBounds.halfWidth, swirl.frameBounds.halfHeight);
+        //  Create a tween that rotates a full 306 degrees and then repeats (loop set to true)
+        game.add.tween(swirl).to({
+            angle: 360
+        }, 2000, Phaser.Easing.Linear.None, true, 0, true);
+    }
+})();

Tests/demoscene/colorwhirl.ts

@@ -0,0 +1,33 @@
+/// <reference path="../../Phaser/Game.ts" />
+
+(function () {
+
+    var game = new Phaser.Game(this, 'game', 320, 200, init, create);
+
+    function init() {
+
+        //  Using Phasers asset loader we load up a PNG from the assets folder
+        game.load.image('swirl', '../assets/pics/color_wheel_swirl.png');
+        game.load.start();
+
+    }
+
+    var swirl: Phaser.Sprite;
+
+    function create() {
+
+        //  Here we'll assign the new sprite to the local swirl variable
+        swirl = game.add.sprite(game.stage.centerX, game.stage.centerY, 'swirl');
+
+        //  Increase the size of the sprite a little so it covers the edges of the stage
+        swirl.scale.setTo(1.4, 1.4);
+
+        //  Set the origin to the middle of the Sprite to get the effect we need
+        swirl.origin.setTo(swirl.frameBounds.halfWidth, swirl.frameBounds.halfHeight);
+
+        //  Create a tween that rotates a full 306 degrees and then repeats (loop set to true)
+        game.add.tween(swirl).to({ angle: 360 }, 2000, Phaser.Easing.Linear.None, true, 0, true);
+
+    }
+
+})();

Tests/demoscene/fruitfall.js

@@ -0,0 +1,44 @@
+var __extends = this.__extends || function (d, b) {
+    function __() { this.constructor = d; }
+    __.prototype = b.prototype;
+    d.prototype = new __();
+};
+/// <reference path="../../Phaser/Game.ts" />
+/// <reference path="../../Phaser/gameobjects/Particle.ts" />
+/// <reference path="../../Phaser/gameobjects/Emitter.ts" />
+var fruitParticle = (function (_super) {
+    __extends(fruitParticle, _super);
+    function fruitParticle(game) {
+        _super.call(this, game);
+        var s = [
+            'carrot', 
+            'melon', 
+            'eggplant', 
+            'mushroom', 
+            'pineapple'
+        ];
+        this.texture.loadImage(game.math.getRandom(s));
+    }
+    return fruitParticle;
+})(Phaser.Particle);
+(function () {
+    var game = new Phaser.Game(this, 'game', 320, 200, init, create);
+    var emitter;
+    function init() {
+        game.load.image('carrot', '../assets/sprites/carrot.png');
+        game.load.image('melon', '../assets/sprites/melon.png');
+        game.load.image('eggplant', '../assets/sprites/eggplant.png');
+        game.load.image('mushroom', '../assets/sprites/mushroom.png');
+        game.load.image('pineapple', '../assets/sprites/pineapple.png');
+        game.load.start();
+    }
+    function create() {
+        emitter = game.add.emitter(game.stage.centerX, 50);
+        emitter.gravity = 100;
+        //  Here we tell the emitter to use our customParticle class
+        //  The customParticle needs to extend Particle and must take game:Game as the first constructor parameter, otherwise it's free as a bird
+        emitter.particleClass = fruitParticle;
+        emitter.makeParticles(null, 50, false, 0);
+        emitter.start(false, 10, 0.05);
+    }
+})();

Tests/demoscene/fruitfall.ts

@@ -0,0 +1,50 @@
+/// <reference path="../../Phaser/Game.ts" />
+/// <reference path="../../Phaser/gameobjects/Particle.ts" />
+/// <reference path="../../Phaser/gameobjects/Emitter.ts" />
+
+class fruitParticle extends Phaser.Particle {
+
+    constructor(game:Phaser.Game) {
+
+        super(game);
+
+        var s = ['carrot', 'melon', 'eggplant', 'mushroom', 'pineapple'];
+
+        this.texture.loadImage(game.math.getRandom(s));
+    }
+
+}
+
+(function () {
+
+    var game = new Phaser.Game(this, 'game', 320, 200, init, create);
+
+    var emitter: Phaser.Emitter;
+
+    function init() {
+
+        game.load.image('carrot', '../assets/sprites/carrot.png');
+        game.load.image('melon', '../assets/sprites/melon.png');
+        game.load.image('eggplant', '../assets/sprites/eggplant.png');
+        game.load.image('mushroom', '../assets/sprites/mushroom.png');
+        game.load.image('pineapple', '../assets/sprites/pineapple.png');
+
+        game.load.start();
+
+    }
+
+    function create() {
+
+        emitter = game.add.emitter(game.stage.centerX, 50);
+        emitter.gravity = 100;
+
+        //  Here we tell the emitter to use our customParticle class
+        //  The customParticle needs to extend Particle and must take game:Game as the first constructor parameter, otherwise it's free as a bird
+        emitter.particleClass = fruitParticle;
+
+        emitter.makeParticles(null, 50, false, 0);
+        emitter.start(false, 10, 0.05);
+
+    }
+
+})();

Tests/demoscene/fujiboink.js

@@ -0,0 +1,42 @@
+/// <reference path="../../Phaser/Game.ts" />
+(function () {
+    var game = new Phaser.Game(this, 'game', 320, 200, init, create);
+    function init() {
+        //  Using Phasers asset loader we load up a PNG from the assets folder
+        game.load.image('fuji', '../assets/pics/atari_fujilogo.png');
+        game.load.start();
+    }
+    var fuji;
+    var tweenUp;
+    var tweenDown;
+    function create() {
+        game.stage.backgroundColor = 'rgb(0,0,100)';
+        //  Here we'll assign the new sprite to the local fuji variable
+        fuji = game.add.sprite(game.stage.centerX, game.stage.centerY, 'fuji');
+        //  The sprite is 320 x 200 pixels in size
+        //  Here we set the origin to the center of the sprite again, so we can rotate and scale it at the same time
+        fuji.origin.setTo(160, 100);
+        game.add.tween(fuji).to({
+            angle: 360
+        }, 2000, Phaser.Easing.Linear.None, true, 0, true);
+        tweenUp = game.add.tween(fuji.scale);
+        tweenUp.onComplete.add(scaleDown, this);
+        tweenDown = game.add.tween(fuji.scale);
+        tweenDown.onComplete.add(scaleUp, this);
+        scaleUp();
+    }
+    function scaleUp() {
+        tweenUp.to({
+            x: 2,
+            y: 2
+        }, 1000, Phaser.Easing.Elastic.Out);
+        tweenUp.start();
+    }
+    function scaleDown() {
+        tweenDown.to({
+            x: 0.5,
+            y: 0.5
+        }, 1000, Phaser.Easing.Elastic.Out);
+        tweenDown.start();
+    }
+})();

Tests/demoscene/fujiboink.ts

@@ -0,0 +1,56 @@
+/// <reference path="../../Phaser/Game.ts" />
+
+(function () {
+
+    var game = new Phaser.Game(this, 'game', 320, 200, init, create);
+
+    function init() {
+
+        //  Using Phasers asset loader we load up a PNG from the assets folder
+        game.load.image('fuji', '../assets/pics/atari_fujilogo.png');
+        game.load.start();
+
+    }
+
+    var fuji: Phaser.Sprite;
+    var tweenUp: Phaser.Tween;
+    var tweenDown: Phaser.Tween;
+
+    function create() {
+
+        game.stage.backgroundColor = 'rgb(0,0,100)';
+
+        //  Here we'll assign the new sprite to the local fuji variable
+        fuji = game.add.sprite(game.stage.centerX, game.stage.centerY, 'fuji');
+
+        //  The sprite is 320 x 200 pixels in size
+        //  Here we set the origin to the center of the sprite again, so we can rotate and scale it at the same time
+        fuji.origin.setTo(160, 100);
+
+        game.add.tween(fuji).to({ angle: 360 }, 2000, Phaser.Easing.Linear.None, true, 0, true);
+
+        tweenUp = game.add.tween(fuji.scale);
+        tweenUp.onComplete.add(scaleDown, this);
+
+        tweenDown = game.add.tween(fuji.scale);
+        tweenDown.onComplete.add(scaleUp, this);
+
+        scaleUp();
+
+    }
+
+    function scaleUp() {
+
+        tweenUp.to({ x: 2, y: 2 }, 1000, Phaser.Easing.Elastic.Out);
+        tweenUp.start();
+
+    }
+
+    function scaleDown() {
+
+        tweenDown.to({ x: 0.5, y: 0.5 }, 1000, Phaser.Easing.Elastic.Out);
+        tweenDown.start();
+
+    }
+
+})();

Tests/demoscene/index.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="initial-scale=1 maximum-scale=1 user-scalable=0" />
+    <title>Phaser does DemoScene</title>
+    <style>
+    body {
+    	padding: 0;
+    	margin: 0;
+    }
+
+    canvas {
+        float: left;
+    }
+    </style>
+    <script>
+    var PhaserGlobal = { disableAudio: true }
+    </script>
+    <script src="../phaser.js"></script>
+    <script src="ballmover.js"></script>
+    <script src="scroller1.js"></script>
+    <script src="starray.js"></script>
+    <script src="colorwhirl.js"></script>
+    <script src="fujiboink.js"></script>
+    <script src="metalslug.js"></script>
+    <script src="fruitfall.js"></script>
+</head>
+<body>
+
+</body>
+</html>

Tests/demoscene/metalslug.js

@@ -0,0 +1,22 @@
+/// <reference path="../../Phaser/Game.ts" />
+(function () {
+    var game = new Phaser.Game(this, 'game', 320, 200, init, create);
+    function init() {
+        //  Using Phasers asset loader we load up a PNG from the assets folder
+        game.load.spritesheet('monster', '../assets/sprites/metalslug_monster39x40.png', 39, 40);
+        game.load.start();
+    }
+    var monster;
+    function create() {
+        game.stage.backgroundColor = 'rgb(50,10,10)';
+        //  Notice the use of 'stage.centerX' - this places the sprite in the middle of the stage without needing to do any extra math
+        monster = game.add.sprite(100, 50, 'monster');
+        //  For this animation we pass 'null' for the frames, because we're going to use them all
+        //  And we set the frame rate (30) and loop status (true) when we add the animation
+        //  If the frame rate and looping is never going to change then it's easier to do it here
+        monster.animations.add('walk', null, 30, true);
+        //  Then you can just call 'play' on its own with no other values to start things going
+        monster.animations.play('walk');
+        monster.scale.setTo(3, 3);
+    }
+})();

Tests/demoscene/metalslug.ts

@@ -0,0 +1,36 @@
+/// <reference path="../../Phaser/Game.ts" />
+
+(function () {
+
+    var game = new Phaser.Game(this, 'game', 320, 200, init, create);
+
+    function init() {
+
+        //  Using Phasers asset loader we load up a PNG from the assets folder
+        game.load.spritesheet('monster', '../assets/sprites/metalslug_monster39x40.png', 39, 40);
+        game.load.start();
+
+    }
+
+    var monster: Phaser.Sprite;
+
+    function create() {
+
+        game.stage.backgroundColor = 'rgb(50,10,10)';
+
+        //  Notice the use of 'stage.centerX' - this places the sprite in the middle of the stage without needing to do any extra math
+        monster = game.add.sprite(100, 50, 'monster');
+
+        //  For this animation we pass 'null' for the frames, because we're going to use them all
+        //  And we set the frame rate (30) and loop status (true) when we add the animation
+        //  If the frame rate and looping is never going to change then it's easier to do it here
+        monster.animations.add('walk', null, 30, true);
+
+        //  Then you can just call 'play' on its own with no other values to start things going
+        monster.animations.play('walk');
+
+        monster.scale.setTo(3, 3);
+
+    }
+
+})();

Tests/demoscene/scroller1.js

@@ -0,0 +1,12 @@
+/// <reference path="../../Phaser/Game.ts" />
+/// <reference path="../../Phaser/gameobjects/ScrollZone.ts" />
+(function () {
+    var game = new Phaser.Game(this, 'game', 320, 200, init, create);
+    function init() {
+        game.load.image('crystal', '../assets/pics/jim_sachs_time_crystal.png');
+        game.load.start();
+    }
+    function create() {
+        game.add.scrollZone('crystal').setSpeed(4, 2);
+    }
+})();

Tests/demoscene/scroller1.ts

@@ -0,0 +1,21 @@
+/// <reference path="../../Phaser/Game.ts" />
+/// <reference path="../../Phaser/gameobjects/ScrollZone.ts" />
+
+(function () {
+
+    var game = new Phaser.Game(this, 'game', 320, 200, init, create);
+
+    function init() {
+
+        game.load.image('crystal', '../assets/pics/jim_sachs_time_crystal.png');
+        game.load.start();
+
+    }
+
+    function create() {
+
+        game.add.scrollZone('crystal').setSpeed(4, 2);
+
+    }
+
+})();

Tests/demoscene/starray.js

@@ -0,0 +1,31 @@
+/// <reference path="../../Phaser/Game.ts" />
+/// <reference path="../../Phaser/gameobjects/ScrollZone.ts" />
+(function () {
+    var game = new Phaser.Game(this, 'game', 320, 200, init, create);
+    function init() {
+        game.load.image('starray', '../assets/pics/auto_scroll_landscape.png');
+        game.load.start();
+    }
+    function create() {
+        var zone = game.add.scrollZone('starray');
+        //  Hide the default region (the full image)
+        zone.currentRegion.visible = false;
+        var y = 0;
+        var speed = 16;
+        //	The image consists of 10px high scrolling layers, this creates them quickly (top = fastest, getting slower as we move down)
+        for(var z = 0; z < 32; z++) {
+            zone.addRegion(0, y, 640, 10, speed);
+            if(z <= 15) {
+                speed -= 1;
+            } else {
+                speed += 1;
+            }
+            if(z == 15) {
+                y = 240;
+                speed += 1;
+            } else {
+                y += 10;
+            }
+        }
+    }
+})();

Tests/demoscene/starray.ts

@@ -0,0 +1,53 @@
+/// <reference path="../../Phaser/Game.ts" />
+/// <reference path="../../Phaser/gameobjects/ScrollZone.ts" />
+
+(function () {
+
+    var game = new Phaser.Game(this, 'game', 320, 200, init, create);
+
+    function init() {
+
+        game.load.image('starray', '../assets/pics/auto_scroll_landscape.png');
+
+        game.load.start();
+
+    }
+
+    function create() {
+
+        var zone: Phaser.ScrollZone = game.add.scrollZone('starray');
+
+        //  Hide the default region (the full image)
+        zone.currentRegion.visible = false;
+
+		var y:number = 0;
+		var speed:number = 16;
+			
+		//	The image consists of 10px high scrolling layers, this creates them quickly (top = fastest, getting slower as we move down)
+		for (var z:number = 0; z < 32; z++)
+		{
+		    zone.addRegion(0, y, 640, 10, speed);
+				
+			if (z <= 15)
+			{
+				speed -= 1;
+			}
+			else
+			{
+				speed += 1;
+			}
+					
+			if (z == 15)
+			{
+				y = 240;
+				speed += 1;
+			}
+			else
+			{
+				y += 10;
+			}
+		}
+
+    }
+
+})();