Small readme update.

Phaser/AnimationManager.ts

@@ -57,6 +57,7 @@ module Phaser {
             {
                 if (this.validateFrames(frames, useNumericIndex) == false)
                 {
+                    throw Error('Invalid frames given to Animation ' + name);
                     return;
                 }
             }
@@ -69,6 +70,7 @@ module Phaser {
             this._anims[name] = new Animation(this._game, this._parent, this._frameData, name, frames, frameRate, loop);
 
             this.currentAnim = this._anims[name];
+            this.currentFrame = this.currentAnim.currentFrame;
 
         }
 
@@ -151,10 +153,10 @@ module Phaser {
 
         public set frame(value: number) {
 
-            this.currentFrame = this._frameData.getFrame(value);
+            if (this._frameData.getFrame(value) !== null)
-
-            if (this.currentFrame !== null)
             {
+                this.currentFrame = this._frameData.getFrame(value);
+
                 this._parent.bounds.width = this.currentFrame.width;
                 this._parent.bounds.height = this.currentFrame.height;
                 this._frameIndex = value;
@@ -168,10 +170,10 @@ module Phaser {
 
         public set frameName(value: string) {
 
-            this.currentFrame = this._frameData.getFrameByName(value);
+            if (this._frameData.getFrameByName(value) !== null)
-
-            if (this.currentFrame !== null)
             {
+                this.currentFrame = this._frameData.getFrameByName(value);
+
                 this._parent.bounds.width = this.currentFrame.width;
                 this._parent.bounds.height = this.currentFrame.height;
                 this._frameIndex = this.currentFrame.index;

Phaser/CameraManager.ts

@@ -26,8 +26,8 @@ module Phaser {
         }
 
         private _game: Game;
-
         private _cameras: Camera[];
+        private _cameraInstance: number = 0;
 
         public current: Camera;
 
@@ -45,32 +45,35 @@ module Phaser {
 
         public addCamera(x: number, y: number, width: number, height: number): Camera {
 
-            var newCam: Camera = new Camera(this._game, this._cameras.length, x, y, width, height);
+            var newCam: Camera = new Camera(this._game, this._cameraInstance, x, y, width, height);
 
             this._cameras.push(newCam);
 
+            this._cameraInstance++;
+
             return newCam;
 
         }
 
         public removeCamera(id: number): bool {
 
-            if (this._cameras[id])
+            for (var c = 0; c < this._cameras.length; c++)
             {
-                if (this.current === this._cameras[id])
+                if (this._cameras[c].ID == id)
                 {
-                    this.current = null;
+                    if (this.current.ID === this._cameras[c].ID)
+                    {
+                        this.current = null;
+                    }
+
+                    this._cameras.splice(c, 1);
+
+                    return true;
                 }
-
-                this._cameras.splice(id, 1);
-
-                return true;
-            }
-            else
-            {
-                return false;
             }
 
+            return false;
+
         }
 
         public destroy() {

Phaser/DynamicTexture.ts

@@ -13,7 +13,7 @@ module Phaser {
 
     export class DynamicTexture {
 
-        constructor(game: Game, key: string, width: number, height: number) {
+        constructor(game: Game, width: number, height: number) {
 
             this._game = game;
 

Phaser/Game.ts

@@ -28,12 +28,13 @@
 /// <reference path="gameobjects/Particle.ts" />
 /// <reference path="gameobjects/Sprite.ts" />
 /// <reference path="gameobjects/Tilemap.ts" />
+/// <reference path="gameobjects/ScrollZone.ts" />
 
 /**
 * Phaser - Game
 *
-* This is where the magic happens. The Game object is the heart of your game, providing quick access to common
+* This is where the magic happens. The Game object is the heart of your game, 
-* functions and handling the boot process.
+* providing quick access to common functions and handling the boot process.
 */
 
 module Phaser {
@@ -50,11 +51,12 @@ module Phaser {
 
             if (document.readyState === 'complete' || document.readyState === 'interactive')
             {
-                this.boot(parent, width, height);
+                setTimeout((parent, width, height) => this.boot(parent, width, height));
             }
             else
             {
                 document.addEventListener('DOMContentLoaded', () => this.boot(parent, width, height), false);
+                window.addEventListener('load', () => this.boot(parent, width, height), false);
             }
 
         }
@@ -94,6 +96,11 @@ module Phaser {
 
         private boot(parent: string, width: number, height: number) {
 
+            if (this.isBooted == true)
+            {
+                return;
+            }
+
             if (!document.body)
             {
                 window.setTimeout(() => this.boot(parent, width, height), 13);
@@ -381,8 +388,8 @@ module Phaser {
             return this.world.createSprite(x, y, key);
         }
 
-        public createDynamicTexture(key: string, width: number, height: number): DynamicTexture {
+        public createDynamicTexture(width: number, height: number): DynamicTexture {
-            return this.world.createDynamicTexture(key, width, height);
+            return this.world.createDynamicTexture(width, height);
         }
 
         public createGroup(MaxSize?: number = 0): Group {
@@ -397,8 +404,12 @@ module Phaser {
             return this.world.createEmitter(x, y, size);
         }
 
-        public createTilemap(key: string, mapData: string, format: number, tileWidth?: number, tileHeight?: number): Tilemap {
+        public createScrollZone(key: string, x?: number = 0, y?: number = 0, width?: number = 0, height?: number = 0): ScrollZone {
-            return this.world.createTilemap(key, mapData, format, tileWidth, tileHeight);
+            return this.world.createScrollZone(key, x, y, width, height);
+        }
+
+        public createTilemap(key: string, mapData: string, format: number, resizeWorld: bool = true, tileWidth?: number = 0, tileHeight?: number = 0): Tilemap {
+            return this.world.createTilemap(key, mapData, format, resizeWorld, tileWidth, tileHeight);
         }
 
         public createTween(obj): Tween {

Phaser/GameMath.ts

@@ -943,6 +943,38 @@ module Phaser {
 
             return this.sinTable;
 
+        }
+
+        /**
+        * Shifts through the sin table data by one value and returns it.
+        * This effectively moves the position of the data from the start to the end of the table.
+        * @return	The sin value.
+        */
+        public shiftSinTable(): number {
+
+            if (this.sinTable)
+            {
+                var s = this.sinTable.shift();
+                this.sinTable.push(s);
+                return s;
+            }
+
+        }
+
+        /**
+        * Shifts through the cos table data by one value and returns it.
+        * This effectively moves the position of the data from the start to the end of the table.
+        * @return	The cos value.
+        */
+        public shiftCosTable(): number {
+
+            if (this.cosTable)
+            {
+                var s = this.cosTable.shift();
+                this.cosTable.push(s);
+                return s;
+            }
+
         }
 
 		/**

Phaser/Group.ts

@@ -286,7 +286,7 @@ module Phaser {
                         return null;
                     }
 
-                    return this.add(new ObjectClass());
+                    return this.add(new ObjectClass(this._game));
                 }
                 else
                 {
@@ -314,7 +314,7 @@ module Phaser {
                     return null;
                 }
 
-                return this.add(new ObjectClass());
+                return this.add(new ObjectClass(this._game));
             }
         }
 

Phaser/Motion.ts

@@ -79,6 +79,11 @@ module Phaser {
         */
         public velocityFromAngle(angle: number, speed: number): Point {
 
+            if (isNaN(speed))
+            {
+                speed = 0;
+            }
+
             var a: number = this._game.math.degreesToRadians(angle);
 
             return new Point((Math.cos(a) * speed), (Math.sin(a) * speed));

Phaser/Phaser.csproj

@@ -85,6 +85,14 @@
     <Content Include="gameobjects\Particle.js">
       <DependentUpon>Particle.ts</DependentUpon>
     </Content>
+    <TypeScriptCompile Include="gameobjects\ScrollZone.ts" />
+    <TypeScriptCompile Include="gameobjects\ScrollRegion.ts" />
+    <Content Include="gameobjects\ScrollRegion.js">
+      <DependentUpon>ScrollRegion.ts</DependentUpon>
+    </Content>
+    <Content Include="gameobjects\ScrollZone.js">
+      <DependentUpon>ScrollZone.ts</DependentUpon>
+    </Content>
     <Content Include="gameobjects\Sprite.js">
       <DependentUpon>Sprite.ts</DependentUpon>
     </Content>
@@ -107,6 +115,10 @@
     <Content Include="geom\Point.js">
       <DependentUpon>Point.ts</DependentUpon>
     </Content>
+    <TypeScriptCompile Include="geom\Quad.ts" />
+    <Content Include="geom\Quad.js">
+      <DependentUpon>Quad.ts</DependentUpon>
+    </Content>
     <Content Include="geom\Rectangle.js">
       <DependentUpon>Rectangle.ts</DependentUpon>
     </Content>
@@ -154,14 +166,14 @@
     <Content Include="system\Tile.js">
       <DependentUpon>Tile.ts</DependentUpon>
     </Content>
-    <Content Include="system\TilemapBuffer.js">
+    <TypeScriptCompile Include="system\TilemapLayer.ts" />
-      <DependentUpon>TilemapBuffer.ts</DependentUpon>
+    <Content Include="system\TilemapLayer.js">
+      <DependentUpon>TilemapLayer.ts</DependentUpon>
     </Content>
     <Content Include="system\Tween.js">
       <DependentUpon>Tween.ts</DependentUpon>
     </Content>
     <TypeScriptCompile Include="system\Tween.ts" />
-    <TypeScriptCompile Include="system\TilemapBuffer.ts" />
     <TypeScriptCompile Include="system\Tile.ts" />
     <TypeScriptCompile Include="system\StageScaleMode.ts" />
     <TypeScriptCompile Include="system\RequestAnimationFrame.ts" />

Phaser/Phaser.ts

@@ -1,7 +1,7 @@
 /**
 * Phaser
 *
-*  v0.9.2 - April 20th 2013
+* v0.9.3 - April 24th 2013
 *
 * A small and feature-packed 2D canvas game framework born from the firey pits of Flixel and Kiwi.
 *
@@ -16,6 +16,6 @@
 
 module Phaser {
 
-    export var VERSION: string = 'Phaser version 0.9.2';
+    export var VERSION: string = 'Phaser version 0.9.3';
 
 }

Phaser/Stage.ts

@@ -62,6 +62,7 @@ module Phaser {
         public clear: bool = true;
         public canvas: HTMLCanvasElement;
         public context: CanvasRenderingContext2D;
+        public disablePauseScreen: bool = false;
         public offset: Point;
         public scale: StageScaleMode;
         public scaleMode: number;
@@ -92,8 +93,14 @@ module Phaser {
 
         }
 
+        //if (document['hidden'] === true || document['webkitHidden'] === true)
         private visibilityChange(event) {
 
+            if (this.disablePauseScreen)
+            {
+                return;
+            }
+
             if (event.type == 'blur' && this._game.paused == false && this._game.isBooted == true)
             {
                 this._game.paused = true;
@@ -104,8 +111,6 @@ module Phaser {
                 this._game.paused = false;
             }
 
-            //if (document['hidden'] === true || document['webkitHidden'] === true)
-
         }
 
         public drawInitScreen() {

Phaser/State.ts

@@ -66,8 +66,8 @@ module Phaser {
             return this.game.world.createSprite(x, y, key);
         }
 
-        public createDynamicTexture(key: string, width: number, height: number): DynamicTexture {
+        public createDynamicTexture(width: number, height: number): DynamicTexture {
-            return this.game.world.createDynamicTexture(key, width, height);
+            return this.game.world.createDynamicTexture(width, height);
         }
 
         public createGroup(MaxSize?: number = 0): Group {
@@ -82,8 +82,12 @@ module Phaser {
             return this.game.world.createEmitter(x, y, size);
         }
 
-        public createTilemap(key: string, mapData: string, format: number, tileWidth?: number, tileHeight?: number): Tilemap {
+        public createScrollZone(key: string, x?: number = 0, y?: number = 0, width?: number = 0, height?: number = 0): ScrollZone {
-            return this.game.world.createTilemap(key, mapData, format, tileWidth, tileHeight);
+            return this.game.world.createScrollZone(key, x, y, width, height);
+        }
+
+        public createTilemap(key: string, mapData: string, format: number, resizeWorld: bool = true, tileWidth?: number = 0, tileHeight?: number = 0): Tilemap {
+            return this.game.world.createTilemap(key, mapData, format, resizeWorld, tileWidth, tileHeight);
         }
 
         public createTween(obj): Tween {

Phaser/World.ts

@@ -108,11 +108,6 @@ module Phaser {
 
         //  Cameras
 
-        public addExistingCamera(cam: Camera): Camera {
-            //return this._cameras.addCamera(x, y, width, height);
-            return cam;
-        }
-
         public createCamera(x: number, y: number, width: number, height: number): Camera {
             return this._cameras.addCamera(x, y, width, height);
         }
@@ -125,12 +120,7 @@ module Phaser {
             return this._cameras.getAll();
         }
 
-        //  Sprites
+        //  Game Objects
-
-        //  Drop this?
-        public addExistingSprite(sprite: Sprite): Sprite {
-            return <Sprite> this.group.add(sprite);
-        }
 
         public createSprite(x: number, y: number, key?: string = ''): Sprite {
             return <Sprite> this.group.add(new Sprite(this._game, x, y, key));
@@ -140,21 +130,21 @@ module Phaser {
             return <GeomSprite> this.group.add(new GeomSprite(this._game, x, y));
         }
 
-        public createDynamicTexture(key: string, width: number, height: number): DynamicTexture {
+        public createDynamicTexture(width: number, height: number): DynamicTexture {
-            return new DynamicTexture(this._game, key, width, height);
+            return new DynamicTexture(this._game, width, height);
         }
 
         public createGroup(MaxSize?: number = 0): Group {
             return <Group> this.group.add(new Group(this._game, MaxSize));
         }
 
-        //  Tilemaps
+        public createScrollZone(key: string, x?: number = 0, y?: number = 0, width?: number = 0, height?: number = 0): ScrollZone {
-
+            return <ScrollZone> this.group.add(new ScrollZone(this._game, key, x, y, width, height));
-        public createTilemap(key: string, mapData: string, format: number, tileWidth?: number, tileHeight?: number): Tilemap {
-            return <Tilemap> this.group.add(new Tilemap(this._game, key, mapData, format, tileWidth, tileHeight));
         }
 
-        //  Emitters
+        public createTilemap(key: string, mapData: string, format: number, resizeWorld: bool = true, tileWidth?: number = 0, tileHeight?: number = 0): Tilemap {
+            return <Tilemap> this.group.add(new Tilemap(this._game, key, mapData, format, resizeWorld, tileWidth, tileHeight));
+        }
 
         public createParticle(): Particle {
             return new Particle(this._game);

Phaser/gameobjects/Emitter.ts

@@ -372,7 +372,7 @@ module Phaser {
 
             particle.acceleration.y = this.gravity;
 
-            if (this.minRotation != this.maxRotation)
+            if (this.minRotation != this.maxRotation && this.minRotation !== 0 && this.maxRotation !== 0)
             {
                 particle.angularVelocity = this.minRotation + this._game.math.random() * (this.maxRotation - this.minRotation);
             }

Phaser/gameobjects/GameObject.ts

@@ -34,6 +34,7 @@ module Phaser {
             this.health = 1;
             this.immovable = false;
             this.moves = true;
+            this.worldBounds = null;
 
             this.touching = Collision.NONE;
             this.wasTouching = Collision.NONE;
@@ -50,6 +51,7 @@ module Phaser {
             this.angularDrag = 0;
             this.maxAngular = 10000;
 
+            this.cameraBlacklist = [];
             this.scrollFactor = new MicroPoint(1.0, 1.0);
 
         }
@@ -66,9 +68,15 @@ module Phaser {
         public static ALIGN_BOTTOM_CENTER: number = 7;
         public static ALIGN_BOTTOM_RIGHT: number = 8;
 
+        public static OUT_OF_BOUNDS_STOP: number = 0;
+        public static OUT_OF_BOUNDS_KILL: number = 1;
+
         public _point: MicroPoint;
 
+        public cameraBlacklist: number[];
         public bounds: Rectangle;
+        public worldBounds: Quad;
+        public outOfBoundsAction: number = 0;
         public align: number;
         public facing: number;
         public alpha: number;
@@ -76,6 +84,11 @@ module Phaser {
         public origin: MicroPoint;
         public z: number = 0;
 
+        //  This value is added to the angle of the GameObject.
+        //  For example if you had a sprite drawn facing straight up then you could set
+        //  rotationOffset to 90 and it would correspond correctly with Phasers rotation system
+        public rotationOffset: number = 0;
+
         //  Physics properties
         public immovable: bool;
 
@@ -131,6 +144,37 @@ module Phaser {
                 this.updateMotion();
             }
 
+            if (this.worldBounds != null)
+            {
+                if (this.outOfBoundsAction == GameObject.OUT_OF_BOUNDS_KILL)
+                {
+                    if (this.x < this.worldBounds.x || this.x > this.worldBounds.right || this.y < this.worldBounds.y || this.y > this.worldBounds.bottom)
+                    {
+                        this.kill();
+                    }
+                }
+                else
+                {
+                    if (this.x < this.worldBounds.x)
+                    {
+                        this.x = this.worldBounds.x;
+                    }
+                    else if (this.x > this.worldBounds.right)
+                    {
+                        this.x = this.worldBounds.right;
+                    }
+
+                    if (this.y < this.worldBounds.y)
+                    {
+                        this.y = this.worldBounds.y;
+                    }
+                    else if (this.y > this.worldBounds.bottom)
+                    {
+                        this.y = this.worldBounds.bottom;
+                    }
+                }
+            }
+
             if (this.inputEnabled)
             {
                 this.updateInput();
@@ -170,7 +214,7 @@ module Phaser {
 
         /**
         * Checks to see if some <code>GameObject</code> overlaps this <code>GameObject</code> or <code>Group</code>.
-        * If the group has a LOT of things in it, it might be faster to use <code>G.overlaps()</code>.
+        * If the group has a LOT of things in it, it might be faster to use <code>Collision.overlaps()</code>.
         * WARNING: Currently tilemaps do NOT support screen space overlap checks!
         * 
         * @param	ObjectOrGroup	The object or group being tested.
@@ -484,6 +528,44 @@ module Phaser {
 
         }
 
+        /**
+        * Set the world bounds that this GameObject can exist within. By default a GameObject can exist anywhere
+        * in the world. But by setting the bounds (which are given in world dimensions, not screen dimensions)
+        * it can be stopped from leaving the world, or a section of it.
+        */
+        public setBounds(x: number, y: number, width: number, height: number) {
+
+            this.worldBounds = new Quad(x, y, width, height);
+
+        }
+
+        /**
+        * If you do not wish this object to be visible to a specific camera, pass the camera here.
+        */
+        public hideFromCamera(camera: Camera) {
+
+            if (this.cameraBlacklist.indexOf(camera.ID) == -1)
+            {
+                this.cameraBlacklist.push(camera.ID);
+            }
+
+        }
+
+        public showToCamera(camera: Camera) {
+
+            if (this.cameraBlacklist.indexOf(camera.ID) !== -1)
+            {
+                this.cameraBlacklist.slice(this.cameraBlacklist.indexOf(camera.ID), 1);
+            }
+
+        }
+
+        public clearCameraList() {
+
+            this.cameraBlacklist.length = 0;
+
+        }
+
         public destroy() {
 
         }

Phaser/gameobjects/GeomSprite.ts

@@ -190,7 +190,7 @@ module Phaser {
         public render(camera: Camera, cameraOffsetX: number, cameraOffsetY: number): bool {
 
             //  Render checks
-            if (this.type == GeomSprite.UNASSIGNED || this.visible === false || this.scale.x == 0 || this.scale.y == 0 || this.alpha < 0.1 || this.inCamera(camera.worldView) == false)
+            if (this.type == GeomSprite.UNASSIGNED || this.visible === false || this.scale.x == 0 || this.scale.y == 0 || this.alpha < 0.1 || this.cameraBlacklist.indexOf(camera.ID) !== -1 || this.inCamera(camera.worldView) == false)
             {
                 return false;
             }

Phaser/gameobjects/ScrollRegion.ts

@@ -0,0 +1,159 @@
+/// <reference path="../Game.ts" />
+/// <reference path="../geom/Quad.ts" />
+
+/**
+* Phaser - ScrollRegion
+*
+* Creates a scrolling region within a ScrollZone.
+* It is scrolled via the scrollSpeed.x/y properties.
+*/
+
+module Phaser {
+
+    export class ScrollRegion{
+
+        constructor(x: number, y: number, width: number, height: number, speedX:number, speedY:number) {
+
+	        //	Our seamless scrolling quads
+            this._A = new Quad(x, y, width, height);
+            this._B = new Quad(x, y, width, height);
+	        this._C = new Quad(x, y, width, height);
+	        this._D = new Quad(x, y, width, height);
+            this._scroll = new MicroPoint();
+            this._bounds = new Quad(x, y, width, height);
+            this.scrollSpeed = new MicroPoint(speedX, speedY);
+
+        }
+
+        private _A: Quad;
+        private _B: Quad;
+        private _C: Quad;
+        private _D: Quad;
+
+        private _bounds: Quad;
+        private _scroll: MicroPoint;
+
+        private _anchorWidth: number = 0;
+        private _anchorHeight: number = 0;
+        private _inverseWidth: number = 0;
+        private _inverseHeight: number = 0;
+
+        public visible: bool = true;
+        public scrollSpeed: MicroPoint;
+
+        public update(delta: number) {
+
+		    this._scroll.x += this.scrollSpeed.x;
+		    this._scroll.y += this.scrollSpeed.y;
+
+		    if (this._scroll.x > this._bounds.right)
+		    {
+			    this._scroll.x = this._bounds.x;
+		    }
+
+		    if (this._scroll.x < this._bounds.x)
+		    {
+			    this._scroll.x = this._bounds.right;
+		    }
+
+		    if (this._scroll.y > this._bounds.bottom)
+		    {
+			    this._scroll.y = this._bounds.y;
+		    }
+
+		    if (this._scroll.y < this._bounds.y)
+		    {
+			    this._scroll.y = this._bounds.bottom;
+		    }
+
+		    //	Anchor Dimensions
+		    this._anchorWidth = (this._bounds.width - this._scroll.x) + this._bounds.x;
+		    this._anchorHeight = (this._bounds.height - this._scroll.y) + this._bounds.y;
+
+		    if (this._anchorWidth > this._bounds.width)
+		    {
+			    this._anchorWidth = this._bounds.width;
+		    }
+
+		    if (this._anchorHeight > this._bounds.height)
+		    {
+			    this._anchorHeight = this._bounds.height;
+		    }
+
+		    this._inverseWidth = this._bounds.width - this._anchorWidth;
+            this._inverseHeight = this._bounds.height - this._anchorHeight;
+
+		    //	Quad A
+		    this._A.setTo(this._scroll.x, this._scroll.y, this._anchorWidth, this._anchorHeight);
+
+		    //	Quad B
+		    this._B.y = this._scroll.y;
+		    this._B.width = this._inverseWidth;
+		    this._B.height = this._anchorHeight;
+
+		    //	Quad C
+		    this._C.x = this._scroll.x;
+		    this._C.width = this._anchorWidth;
+		    this._C.height = this._inverseHeight;
+
+		    //	Quad D
+		    this._D.width = this._inverseWidth;
+		    this._D.height = this._inverseHeight;
+
+        }
+
+        public render(context:CanvasRenderingContext2D, texture, dx: number, dy: number, dw: number, dh: number) {
+
+            if (this.visible == false)
+            {
+                return;
+            }
+
+            //  dx/dy are the world coordinates to render the FULL ScrollZone into.
+            //  This ScrollRegion may be smaller than that and offset from the dx/dy coordinates.
+
+            this.crop(context, texture, this._A.x, this._A.y, this._A.width, this._A.height, dx, dy, dw, dh, 0, 0);
+            this.crop(context, texture, this._B.x, this._B.y, this._B.width, this._B.height, dx, dy, dw, dh, this._A.width, 0);
+            this.crop(context, texture, this._C.x, this._C.y, this._C.width, this._C.height, dx, dy, dw, dh, 0, this._A.height);
+            this.crop(context, texture, this._D.x, this._D.y, this._D.width, this._D.height, dx, dy, dw, dh, this._C.width, this._A.height);
+
+            //context.fillStyle = 'rgb(255,255,255)';
+            //context.font = '18px Arial';
+            //context.fillText('QuadA: ' + this._A.toString(), 32, 450);
+            //context.fillText('QuadB: ' + this._B.toString(), 32, 480);
+            //context.fillText('QuadC: ' + this._C.toString(), 32, 510);
+            //context.fillText('QuadD: ' + this._D.toString(), 32, 540);
+
+        }
+
+        private crop(context, texture, srcX, srcY, srcW, srcH, destX, destY, destW, destH, offsetX, offsetY) {
+
+            offsetX += destX;
+            offsetY += destY;
+
+            if (srcW > (destX + destW) - offsetX)
+            {
+                srcW = (destX + destW) - offsetX;
+            }
+
+            if (srcH > (destY + destH) - offsetY)
+            {
+                srcH = (destY + destH) - offsetY;
+            }
+
+            srcX = Math.floor(srcX);
+            srcY = Math.floor(srcY);
+            srcW = Math.floor(srcW);
+            srcH = Math.floor(srcH);
+            offsetX = Math.floor(offsetX + this._bounds.x);
+            offsetY = Math.floor(offsetY + this._bounds.y);
+
+            if (srcW > 0 && srcH > 0)
+            {
+                context.drawImage(texture, srcX, srcY, srcW, srcH, offsetX, offsetY, srcW, srcH);
+            }
+        }
+
+    }
+
+}

Phaser/gameobjects/ScrollZone.ts

@@ -0,0 +1,208 @@
+/// <reference path="../Game.ts" />
+/// <reference path="../geom/Quad.ts" />
+/// <reference path="ScrollRegion.ts" />
+
+/**
+* Phaser - ScrollZone
+*
+* Creates a scrolling region of the given width and height from an image in the cache.
+* The ScrollZone can be positioned anywhere in-world like a normal game object, re-act to physics, collision, etc.
+* The image within it is scrolled via ScrollRegions and their scrollSpeed.x/y properties.
+* If you create a scroll zone larger than the given source image it will create a DynamicTexture and fill it with a pattern of the source image.
+*/
+
+module Phaser {
+
+    export class ScrollZone extends GameObject {
+
+        constructor(game: Game, key:string, x: number = 0, y: number = 0, width?: number = 0, height?: number = 0) {
+
+            super(game, x, y, width, height);
+
+            this.regions = [];
+
+            if (this._game.cache.getImage(key))
+            {
+                this._texture = this._game.cache.getImage(key);
+                this.width = this._texture.width;
+                this.height = this._texture.height;
+
+                if (width > this._texture.width || height > this._texture.height)
+                {
+                    //  Create our repeating texture (as the source image wasn't large enough for the requested size)
+                    this.createRepeatingTexture(width, height);
+                    this.width = width;
+                    this.height = height;
+                }
+
+                //  Create a default ScrollRegion at the requested size
+                this.addRegion(0, 0, this.width, this.height);
+
+                //  If the zone is smaller than the image itself then shrink the bounds
+                if ((width < this._texture.width || height < this._texture.height) && width !== 0 && height !== 0)
+                {
+                    this.width = width;
+                    this.height = height;
+                }
+
+            }
+
+        }
+
+        private _texture;
+        private _dynamicTexture: DynamicTexture = null;
+
+        //  local rendering related temp vars to help avoid gc spikes
+        private _dx: number = 0;
+        private _dy: number = 0;
+        private _dw: number = 0;
+        private _dh: number = 0;
+
+        public currentRegion: ScrollRegion;
+        public regions: ScrollRegion[];
+        public flipped: bool = false;
+
+        public addRegion(x: number, y: number, width: number, height: number, speedX?:number = 0, speedY?:number = 0):ScrollRegion {
+
+            if (x > this.width || y > this.height || x < 0 || y < 0 || (x + width) > this.width || (y + height) > this.height)
+            {
+                throw Error('Invalid ScrollRegion defined. Cannot be larger than parent ScrollZone');
+                return;
+            }
+
+            this.currentRegion = new ScrollRegion(x, y, width, height, speedX, speedY);
+
+            this.regions.push(this.currentRegion);
+
+            return this.currentRegion;
+
+        }
+
+        public setSpeed(x: number, y: number) {
+
+            if (this.currentRegion)
+            {
+                this.currentRegion.scrollSpeed.setTo(x, y);
+            }
+
+            return this;
+
+        }
+
+        public update() {
+
+            for (var i = 0; i < this.regions.length; i++)
+            {
+                this.regions[i].update(this._game.time.delta);
+            }
+
+        }
+
+        public inCamera(camera: Rectangle): bool {
+            
+            if (this.scrollFactor.x !== 1.0 || this.scrollFactor.y !== 1.0)
+            {
+                this._dx = this.bounds.x - (camera.x * this.scrollFactor.x);
+                this._dy = this.bounds.y - (camera.y * this.scrollFactor.x);
+                this._dw = this.bounds.width * this.scale.x;
+                this._dh = this.bounds.height * this.scale.y;
+
+                return (camera.right > this._dx) && (camera.x < this._dx + this._dw) && (camera.bottom > this._dy) && (camera.y < this._dy + this._dh);
+            }
+            else
+            {
+                return camera.intersects(this.bounds, this.bounds.length);
+            }
+
+        }
+
+        public render(camera: Camera, cameraOffsetX: number, cameraOffsetY: number) {
+
+            //  Render checks
+            if (this.visible == false || this.scale.x == 0 || this.scale.y == 0 || this.alpha < 0.1 || this.cameraBlacklist.indexOf(camera.ID) !== -1 || this.inCamera(camera.worldView) == false)
+            {
+                return false;
+            }
+
+            //  Alpha
+            if (this.alpha !== 1)
+            {
+                var globalAlpha = this._game.stage.context.globalAlpha;
+                this._game.stage.context.globalAlpha = this.alpha;
+            }
+
+            this._dx = cameraOffsetX + (this.bounds.topLeft.x - camera.worldView.x);
+            this._dy = cameraOffsetY + (this.bounds.topLeft.y - camera.worldView.y);
+            this._dw = this.bounds.width * this.scale.x;
+            this._dh = this.bounds.height * this.scale.y;
+
+            //	Apply camera difference
+            if (this.scrollFactor.x !== 1.0 || this.scrollFactor.y !== 1.0)
+            {
+                this._dx -= (camera.worldView.x * this.scrollFactor.x);
+                this._dy -= (camera.worldView.y * this.scrollFactor.y);
+            }
+
+            //	Rotation - needs to work from origin point really, but for now from center
+            if (this.angle !== 0 || this.flipped == true)
+            {
+                this._game.stage.context.save();
+                this._game.stage.context.translate(this._dx + (this._dw / 2), this._dy + (this._dh / 2));
+
+                if (this.angle !== 0)
+                {
+                    this._game.stage.context.rotate(this.angle * (Math.PI / 180));
+                }
+
+                this._dx = -(this._dw / 2);
+                this._dy = -(this._dh / 2);
+
+                if (this.flipped == true)
+                {
+                	this._game.stage.context.scale(-1, 1);
+                }
+            }
+
+            this._dx = Math.round(this._dx);
+            this._dy = Math.round(this._dy);
+            this._dw = Math.round(this._dw);
+            this._dh = Math.round(this._dh);
+
+            for (var i = 0; i < this.regions.length; i++)
+            {
+                if (this._dynamicTexture)
+                {
+                    this.regions[i].render(this._game.stage.context, this._dynamicTexture.canvas, this._dx, this._dy, this._dw, this._dh);
+                }
+                else
+                {
+                    this.regions[i].render(this._game.stage.context, this._texture, this._dx, this._dy, this._dw, this._dh);
+                }
+            }
+
+            if (globalAlpha > -1)
+            {
+                this._game.stage.context.globalAlpha = globalAlpha;
+            }
+
+            return true;
+
+        }
+
+        private createRepeatingTexture(regionWidth: number, regionHeight: number) {
+
+            //	Work out how many we'll need of the source image to make it tile properly
+            var tileWidth = Math.ceil(this._texture.width / regionWidth) * regionWidth;
+            var tileHeight = Math.ceil(this._texture.height / regionHeight) * regionHeight;
+
+            this._dynamicTexture = new DynamicTexture(this._game, tileWidth, tileHeight);
+
+            this._dynamicTexture.context.rect(0, 0, tileWidth, tileHeight);
+            this._dynamicTexture.context.fillStyle = this._dynamicTexture.context.createPattern(this._texture, "repeat");
+            this._dynamicTexture.context.fill();
+
+        }
+
+    }
+
+}

Phaser/gameobjects/Sprite.ts

@@ -146,7 +146,7 @@ module Phaser {
         public render(camera: Camera, cameraOffsetX: number, cameraOffsetY: number): bool {
 
             //  Render checks
-            if (this.visible === false || this.scale.x == 0 || this.scale.y == 0 || this.alpha < 0.1 || this.inCamera(camera.worldView) == false)
+            if (this.visible == false || this.scale.x == 0 || this.scale.y == 0 || this.alpha < 0.1 || this.cameraBlacklist.indexOf(camera.ID) !== -1 || this.inCamera(camera.worldView) == false)
             {
                 return false;
             }
@@ -224,14 +224,14 @@ module Phaser {
             }
 
             //	Rotation - needs to work from origin point really, but for now from center
-            if (this.angle !== 0 || this.flipped == true)
+            if (this.angle !== 0 || this.rotationOffset !== 0 || this.flipped == true)
             {
                 this._game.stage.context.save();
                 this._game.stage.context.translate(this._dx + (this._dw / 2), this._dy + (this._dh / 2));
 
-                if (this.angle !== 0)
+                if (this.angle !== 0 || this.rotationOffset !== 0)
                 {
-                    this._game.stage.context.rotate(this.angle * (Math.PI / 180));
+                    this._game.stage.context.rotate((this.rotationOffset + this.angle) * (Math.PI / 180));
                 }
 
                 this._dx = -(this._dw / 2);
@@ -289,7 +289,7 @@ module Phaser {
                 this._game.stage.context.fillRect(this._dx, this._dy, this._dw, this._dh);
             }
 
-            if (this.flipped === true || this.rotation !== 0)
+            if (this.flipped === true || this.rotation !== 0 || this.rotationOffset !== 0)
             {
                 //this._game.stage.context.translate(0, 0);
                 this._game.stage.context.restore();

Phaser/gameobjects/Tilemap.ts

@@ -1,270 +1,158 @@
 /// <reference path="../Game.ts" />
 /// <reference path="GameObject.ts" />
-/// <reference path="../system/Tile.ts" />
+/// <reference path="../system/TilemapLayer.ts" />
-/// <reference path="../system/TilemapBuffer.ts" />
 
 /**
 * Phaser - Tilemap
 *
 * This GameObject allows for the display of a tilemap within the game world. Tile maps consist of an image, tile data and a size.
-* Internally it creates a TilemapBuffer for each camera in the world.
+* Internally it creates a TilemapLayer for each layer in the tilemap.
 */
 
 module Phaser {
 
     export class Tilemap extends GameObject {
 
-        constructor(game: Game, key: string, mapData: string, format: number, tileWidth?: number = 0, tileHeight?: number = 0) {
+        constructor(game: Game, key: string, mapData: string, format: number, resizeWorld: bool = true, tileWidth?: number = 0, tileHeight?: number = 0) {
 
             super(game);
 
-            this._texture = this._game.cache.getImage(key);
-            this._tilemapBuffers = [];
-
             this.isGroup = false;
 
-            this.tileWidth = tileWidth;
+            this._layers = [];
-            this.tileHeight = tileHeight;
+
-            this.boundsInTiles = new Rectangle();
             this.mapFormat = format;
 
             switch (format)
             {
                 case Tilemap.FORMAT_CSV:
-                    this.parseCSV(game.cache.getText(mapData));
+                    this.parseCSV(game.cache.getText(mapData), key, tileWidth, tileHeight);
                     break;
 
                 case Tilemap.FORMAT_TILED_JSON:
-                    this.parseTiledJSON(game.cache.getText(mapData));
+                    this.parseTiledJSON(game.cache.getText(mapData), key);
                     break;
             }
 
-            this.parseTileOffsets();
+            if (this.currentLayer && resizeWorld)
-            this.createTilemapBuffers();
+            {
+                this._game.world.setSize(this.currentLayer.widthInPixels, this.currentLayer.heightInPixels, true);
+            }
 
         }
 
-        private _texture;
+        private _layers : TilemapLayer[];
-        private _tileOffsets;
-        private _tilemapBuffers: TilemapBuffer[];
-        private _dx: number = 0;
-        private _dy: number = 0;
 
         public static FORMAT_CSV: number = 0;
         public static FORMAT_TILED_JSON: number = 1;
 
-        public mapData;
+        public currentLayer: TilemapLayer;
         public mapFormat: number;
-        public boundsInTiles: Rectangle;
 
-        public tileWidth: number;
+        public update() {
-        public tileHeight: number;
+        }
 
-        public widthInTiles: number = 0;
+        public render(camera: Camera, cameraOffsetX: number, cameraOffsetY: number) {
-        public heightInTiles: number = 0;
 
-        public widthInPixels: number = 0;
+            if (this.cameraBlacklist.indexOf(camera.ID) == -1)
-        public heightInPixels: number = 0;
+            {
+                //  Loop through the layers
+                for (var i = 0; i < this._layers.length; i++)
+                {
+                    this._layers[i].render(camera, cameraOffsetX, cameraOffsetY);
+                }
+            }
 
-        //  How many extra tiles to draw around the edge of the screen (for fast scrolling games, or to optimise mobile performance try increasing this)
+        }
-        //  The number is the amount of extra tiles PER SIDE, so a value of 10 would be (10 tiles + screen size + 10 tiles)
-        public tileBoundary: number = 10;
 
-        private parseCSV(data: string) {
+        private parseCSV(data: string, key: string, tileWidth: number, tileHeight: number) {
 
-            //console.log('parseMapData');
+            var layer: TilemapLayer = new TilemapLayer(this._game, key, Tilemap.FORMAT_CSV, 'TileLayerCSV' + this._layers.length.toString(), tileWidth, tileHeight);
-
-            this.mapData = [];
 
             //  Trim any rogue whitespace from the data
             data = data.trim();
 
             var rows = data.split("\n");
-            //console.log('rows', rows);
 
             for (var i = 0; i < rows.length; i++)
             {
                 var column = rows[i].split(",");
-                //console.log('column', column);
-                var output = [];
 
                 if (column.length > 0)
                 {
-                    //  Set the width based on the first row
+                    layer.addColumn(column);
-                    if (this.widthInTiles == 0)
-                    {
-                        //  Maybe -1?
-                        this.widthInTiles = column.length;
-                    }
-
-                    //  We have a new row of tiles
-                    this.heightInTiles++;
-
-                    //  Parse it
-                    for (var c = 0; c < column.length; c++)
-                    {
-                        output[c] = parseInt(column[c]);
-                    }
-
-                    this.mapData.push(output);
                 }
-
             }
 
-            //console.log('final map array');
+            layer.updateBounds();
-            //console.log(this.mapData);
 
-            if (this.widthInTiles > 0)
+            this.currentLayer = layer;
-            {
-                this.widthInPixels = this.tileWidth * this.widthInTiles;
-            }
 
-            if (this.heightInTiles > 0)
+            this._layers.push(layer);
-            {
-                this.heightInPixels = this.tileHeight * this.heightInTiles;
-            }
-
-            this.boundsInTiles.setTo(0, 0, this.widthInTiles, this.heightInTiles);
 
         }
 
-        private parseTiledJSON(data: string) {
+        private parseTiledJSON(data: string, key: string) {
-
-            //console.log('parseTiledJSON');
-
-            this.mapData = [];
 
             //  Trim any rogue whitespace from the data
             data = data.trim();
 
-            //  We ought to change this soon, so we have layer support, but for now let's just get it working
             var json = JSON.parse(data);
 
-            //  Right now we assume no errors at all with the parsing (safe I know)
+            for (var i = 0; i < json.layers.length; i++)
-            this.tileWidth = json.tilewidth;
-            this.tileHeight = json.tileheight;
-
-            //  Parse the first layer only
-            this.widthInTiles = json.layers[0].width;
-            this.heightInTiles = json.layers[0].height;
-            this.widthInPixels = this.widthInTiles * this.tileWidth;
-            this.heightInPixels = this.heightInTiles * this.tileHeight;
-            this.boundsInTiles.setTo(0, 0, this.widthInTiles, this.heightInTiles);
-
-            //console.log('width in tiles', this.widthInTiles);
-            //console.log('height in tiles', this.heightInTiles);
-            //console.log('width in px', this.widthInPixels);
-            //console.log('height in px', this.heightInPixels);
-
-            //  Now let's get the data
-
-            var c = 0;
-            var row;
-
-            for (var i = 0; i < json.layers[0].data.length; i++)
             {
-                if (c == 0)
+                var layer: TilemapLayer = new TilemapLayer(this._game, key, Tilemap.FORMAT_TILED_JSON, json.layers[i].name, json.tilewidth, json.tileheight);
+                
+                layer.alpha = json.layers[i].opacity;
+                layer.visible = json.layers[i].visible;
+
+                var c = 0;
+                var row;
+
+                for (var t = 0; t < json.layers[i].data.length; t++)
                 {
-                    row = [];
+                    if (c == 0)
+                    {
+                        row = [];
+                    }
+
+                    row.push(json.layers[i].data[t]);
+
+                    c++;
+
+                    if (c == json.layers[i].width)
+                    {
+                        layer.addColumn(row);
+                        c = 0;
+                    }
                 }
 
-                row.push(json.layers[0].data[i]);
+                layer.updateBounds();
 
-                c++;
+                this.currentLayer = layer;
 
-                if (c == this.widthInTiles)
+                this._layers.push(layer);
-                {
-                    this.mapData.push(row);
-                    c = 0;
-                }
-            }
 
-            //console.log('mapData');
-            //console.log(this.mapData);
-
-        }
-
-        public getMapSegment(area: Rectangle) {
-        }
-
-        private createTilemapBuffers() {
-
-            var cams = this._game.world.getAllCameras();
-
-            for (var i = 0; i < cams.length; i++)
-            {
-                this._tilemapBuffers[cams[i].ID] = new TilemapBuffer(this._game, cams[i], this, this._texture, this._tileOffsets);
             }
 
         }
 
-        private parseTileOffsets() {
+        public get widthInPixels(): number {
-
+            return this.currentLayer.widthInPixels;
-            this._tileOffsets = [];
-
-            var i = 0;
-
-            if (this.mapFormat == Tilemap.FORMAT_TILED_JSON)
-            {
-                //  For some reason Tiled counts from 1 not 0
-                this._tileOffsets[0] = null;
-                i = 1;
-            }
-
-            for (var ty = 0; ty < this._texture.height; ty += this.tileHeight)
-            {
-                for (var tx = 0; tx < this._texture.width; tx += this.tileWidth)
-                {
-                    this._tileOffsets[i] = { x: tx, y: ty };
-                    i++;
-                }
-            }
-
         }
 
-        /*
+        public get heightInPixels(): number {
-        //  Use a Signal?
+            return this.currentLayer.heightInPixels;
-        public addTilemapBuffers(camera:Camera) {
-    
-            console.log('added new camera to tilemap');
-            this._tilemapBuffers[camera.ID] = new TilemapBuffer(this._game, camera, this, this._texture, this._tileOffsets);
-    
-        }
-        */
-
-        public update() {
-
-            //  Check if any of the cameras have scrolled far enough for us to need to refresh a TilemapBuffer
-            this._tilemapBuffers[0].update();
-
         }
 
-        public renderDebugInfo(x: number, y: number, color?: string = 'rgb(255,255,255)') {
+        //  Set current layer
-            this._tilemapBuffers[0].renderDebugInfo(x, y, color);
+        //  Set layer order?
-        }
+        //  Get tile from x/y
+        //  Get block of tiles
+        //  Swap tiles around
+        //  Delete tiles of certain type
+        //  Erase tiles
 
-        public render(camera: Camera, cameraOffsetX: number, cameraOffsetY: number): bool {
-
-            if (this.visible === false || this.scale.x == 0 || this.scale.y == 0 || this.alpha < 0.1)
-            {
-                return false;
-            }
-
-            this._dx = cameraOffsetX + (this.bounds.x - camera.worldView.x);
-            this._dy = cameraOffsetY + (this.bounds.y - camera.worldView.y);
-
-            this._dx = Math.round(this._dx);
-            this._dy = Math.round(this._dy);
-
-            if (this._tilemapBuffers[camera.ID])
-            {
-                //this._tilemapBuffers[camera.ID].render(this._dx, this._dy);
-                this._tilemapBuffers[camera.ID].render(cameraOffsetX, cameraOffsetY);
-            }
-
-            return true;
-
-        }
 
     }
 

Phaser/geom/Quad.ts

@@ -0,0 +1,98 @@
+/// <reference path="../Game.ts" />
+
+/**
+* Phaser - Quad
+*
+* A Quad object is an area defined by its position, as indicated by its top-left corner (x,y) and width and height.
+* Very much like a Rectangle only without all of the additional methods and properties of that class.
+*/
+
+module Phaser {
+
+    export class Quad {
+
+        /**
+        * Creates a new Quad object with the top-left corner specified by the x and y parameters and with the specified width and height parameters. If you call this function without parameters, a rectangle with x, y, width, and height properties set to 0 is created.
+        * @class Quad
+        * @constructor
+        * @param {Number} x The x coordinate of the top-left corner of the quad.
+        * @param {Number} y The y coordinate of the top-left corner of the quad.
+        * @param {Number} width The width of the quad.
+        * @param {Number} height The height of the quad.
+        * @return {Quad } This object
+        **/
+        constructor(x: number = 0, y: number = 0, width: number = 0, height: number = 0) {
+
+            this.setTo(x, y, width, height);
+
+        }
+
+        public x: number;
+        public y: number;
+        public width: number;
+        public height: number;
+
+        /**
+        * Sets the Quad to the specified size.
+        * @method setTo
+        * @param {Number} x The x coordinate of the top-left corner of the quad.
+        * @param {Number} y The y coordinate of the top-left corner of the quad.
+        * @param {Number} width The width of the quad.
+        * @param {Number} height The height of the quad.
+        * @return {Quad} This object
+        **/
+        public setTo(x: number, y: number, width: number, height: number): Quad {
+
+            this.x = x;
+            this.y = y;
+            this.width = width;
+            this.height = height;
+
+            return this;
+
+        }
+
+        public get left(): number {
+            return this.x;
+        }
+
+        public get right(): number {
+            return this.x + this.width;
+        }
+
+        public get top(): number {
+            return this.y;
+        }
+
+        public get bottom(): number {
+            return this.y + this.height;
+        }
+
+        /**
+        * Determines whether the object specified intersects (overlaps) with this Quad object.
+        * This method checks the x, y, width, and height properties of the specified Quad object to see if it intersects with this Quad object.
+        * @method intersects
+        * @param {Quad} q The Quad to compare against to see if it intersects with this Quad.
+        * @param {Number} t A tolerance value to allow for an intersection test with padding, default to 0
+        * @return {Boolean} A value of true if the specified object intersects with this Quad; otherwise false.
+        **/
+        public intersects(q: Quad, t?: number = 0): bool {
+
+            return !(q.left > this.right + t || q.right < this.left - t || q.top > this.bottom + t || q.bottom < this.top - t);
+
+        }
+
+        /**
+        * Returns a string representation of this object.
+        * @method toString
+        * @return {string} a string representation of the object.
+        **/
+        public toString(): string {
+
+            return "[{Quad (x=" + this.x + " y=" + this.y + " width=" + this.width + " height=" + this.height + ")}]";
+
+        }
+
+    }
+
+}

Phaser/geom/Rectangle.ts

@@ -12,13 +12,14 @@ module Phaser {
     export class Rectangle {
 
         /**
-        * Creates a new Rectangle object with the top-left corner specified by the x and y parameters and with the specified width and height parameters. If you call this function without parameters, a rectangle with x, y, width, and height properties set to 0 is created.
+        * Creates a new Rectangle object with the top-left corner specified by the x and y parameters and with the specified width and height parameters.
+        * If you call this function without parameters, a rectangle with x, y, width, and height properties set to 0 is created.
         * @class Rectangle
         * @constructor
         * @param {Number} x The x coordinate of the top-left corner of the rectangle.
         * @param {Number} y The y coordinate of the top-left corner of the rectangle.
-        * @param {Number} width The width of the rectangle in pixels.
+        * @param {Number} width The width of the rectangle.
-        * @param {Number} height The height of the rectangle in pixels.
+        * @param {Number} height The height of the rectangle.
         * @return {Rectangle} This rectangle object
         **/
         constructor(x: number = 0, y: number = 0, width: number = 0, height: number = 0) {

Phaser/phaser.js

@@ -1,7 +1,7 @@
 /**
 * Phaser
 *
-*  v0.9.2 - April 20th 2013
+*  v0.9.3 - April 22nd 2013
 *
 * A small and feature-packed 2D canvas game framework born from the firey pits of Flixel and Kiwi.
 *
@@ -15,5 +15,5 @@
 */
 var Phaser;
 (function (Phaser) {
-    Phaser.VERSION = 'Phaser version 0.9.2';
+    Phaser.VERSION = 'Phaser version 0.9.3';
 })(Phaser || (Phaser = {}));

Phaser/system/Camera.ts

@@ -439,7 +439,7 @@ module Phaser {
 
         public render() {
 
-            if (this.visible === false && this.alpha < 0.1)
+            if (this.visible === false || this.alpha < 0.1)
             {
                 return;
             }

Phaser/system/TilemapBuffer.ts

@@ -1,173 +0,0 @@
-/// <reference path="../Game.ts" />
-
-/**
-* Phaser - TilemapBuffer
-*
-* Responsible for rendering a portion of a tilemap to the given Camera.
-*/
-
-module Phaser {
-
-    export class TilemapBuffer {
-
-        constructor(game: Game, camera: Camera, tilemap: Tilemap, texture, tileOffsets) {
-
-            //console.log('New TilemapBuffer created for Camera ' + camera.ID);
-
-            this._game = game;
-            this.camera = camera;
-            this._tilemap = tilemap;
-            this._texture = texture;
-            this._tileOffsets = tileOffsets;
-
-            //this.createCanvas();
-
-        }
-
-        private _game: Game;
-        private _tilemap: Tilemap;
-        private _texture;
-        private _tileOffsets;
-
-        private _startX: number = 0;
-        private _maxX: number = 0;
-        private _startY: number = 0;
-        private _maxY: number = 0;
-        private _tx: number = 0;
-        private _ty: number = 0;
-        private _dx: number = 0;
-        private _dy: number = 0;
-        private _oldCameraX: number = 0;
-        private _oldCameraY: number = 0;
-        private _dirty: bool = true;
-        private _columnData;
-
-        public camera: Camera;
-        public canvas: HTMLCanvasElement;
-        public context: CanvasRenderingContext2D;
-
-        private createCanvas() {
-
-            this.canvas = <HTMLCanvasElement> document.createElement('canvas');
-            this.canvas.width = this._game.stage.width;
-            this.canvas.height = this._game.stage.height;
-            this.context = this.canvas.getContext('2d');
-
-        }
-
-        public update() {
-
-            /*
-            if (this.camera.worldView.x !== this._oldCameraX || this.camera.worldView.y !== this._oldCameraY)
-            {
-                this._dirty = true;
-            }
-    
-            this._oldCameraX = this.camera.worldView.x;
-            this._oldCameraY = this.camera.worldView.y;
-            */
-
-        }
-
-        public renderDebugInfo(x: number, y: number, color?: string = 'rgb(255,255,255)') {
-
-            this._game.stage.context.fillStyle = color;
-            this._game.stage.context.fillText('TilemapBuffer', x, y);
-            this._game.stage.context.fillText('startX: ' + this._startX + ' endX: ' + this._maxX, x, y + 14);
-            this._game.stage.context.fillText('startY: ' + this._startY + ' endY: ' + this._maxY, x, y + 28);
-            this._game.stage.context.fillText('dx: ' + this._dx + ' dy: ' + this._dy, x, y + 42);
-            this._game.stage.context.fillText('Dirty: ' + this._dirty, x, y + 56);
-
-        }
-
-        public render(dx, dy): bool {
-
-            /*
-            if (this._dirty == false)
-            {
-                this._game.stage.context.drawImage(this.canvas, 0, 0);
-    
-                return true;
-            }
-            */
-
-            //  Work out how many tiles we can fit into our camera and round it up for the edges
-            this._maxX = this._game.math.ceil(this.camera.width / this._tilemap.tileWidth) + 1;
-            this._maxY = this._game.math.ceil(this.camera.height / this._tilemap.tileHeight) + 1;
-
-            //  And now work out where in the tilemap the camera actually is
-            this._startX = this._game.math.floor(this.camera.worldView.x / this._tilemap.tileWidth);
-            this._startY = this._game.math.floor(this.camera.worldView.y / this._tilemap.tileHeight);
-
-            //  Tilemap bounds check
-            if (this._startX < 0)
-            {
-                this._startX = 0;
-            }
-
-            if (this._startY < 0)
-            {
-                this._startY = 0;
-            }
-
-            if (this._startX + this._maxX > this._tilemap.widthInTiles)
-            {
-                this._startX = this._tilemap.widthInTiles - this._maxX;
-            }
-
-            if (this._startY + this._maxY > this._tilemap.heightInTiles)
-            {
-                this._startY = this._tilemap.heightInTiles - this._maxY;
-            }
-
-            //  Finally get the offset to avoid the blocky movement
-            this._dx = dx;
-            this._dy = dy;
-
-            this._dx += -(this.camera.worldView.x - (this._startX * this._tilemap.tileWidth));
-            this._dy += -(this.camera.worldView.y - (this._startY * this._tilemap.tileHeight));
-
-            this._tx = this._dx;
-            this._ty = this._dy;
-
-            for (var row = this._startY; row < this._startY + this._maxY; row++)
-            {
-                this._columnData = this._tilemap.mapData[row];
-
-                for (var tile = this._startX; tile < this._startX + this._maxX; tile++)
-                {
-                    if (this._tileOffsets[this._columnData[tile]])
-                    {
-                        //this.context.drawImage(
-                        this._game.stage.context.drawImage(
-                            this._texture,	                                // Source Image
-                            this._tileOffsets[this._columnData[tile]].x,    // Source X (location within the source image)
-                            this._tileOffsets[this._columnData[tile]].y,    // Source Y
-                            this._tilemap.tileWidth, 	                    //	Source Width
-                            this._tilemap.tileHeight, 	                    //	Source Height
-                            this._tx, 	    	                            //	Destination X (where on the canvas it'll be drawn)
-                            this._ty,	    	                            //	Destination Y
-                            this._tilemap.tileWidth, 	                    //	Destination Width (always same as Source Width unless scaled)
-                            this._tilemap.tileHeight	                    //	Destination Height (always same as Source Height unless scaled)
-                        );
-
-                        this._tx += this._tilemap.tileWidth;
-                    }
-                }
-
-                this._tx = this._dx;
-                this._ty += this._tilemap.tileHeight;
-
-            }
-
-            //this._game.stage.context.drawImage(this.canvas, 0, 0);
-            //console.log('dirty cleaned');
-            //this._dirty = false;
-
-            return true;
-
-        }
-
-    }
-
-}

Phaser/system/TilemapLayer.ts

@@ -0,0 +1,232 @@
+/// <reference path="../Game.ts" />
+
+/**
+* Phaser - TilemapLayer
+*
+* A Tilemap Layer. Tiled format maps can have multiple overlapping layers.
+*/
+
+module Phaser {
+
+    export class TilemapLayer {
+
+        constructor(game: Game, key: string, mapFormat: number, name: string, tileWidth: number, tileHeight: number) {
+
+            this._game = game;
+
+            this.name = name;
+            this.mapFormat = mapFormat;
+            this.tileWidth = tileWidth;
+            this.tileHeight = tileHeight;
+            this.boundsInTiles = new Rectangle();
+            //this.scrollFactor = new MicroPoint(1, 1);
+
+            this.mapData = [];
+            this._texture = this._game.cache.getImage(key);
+
+            this.parseTileOffsets();
+
+        }
+
+        private _game: Game;
+        private _texture;
+        private _tileOffsets;
+        private _startX: number = 0;
+        private _startY: number = 0;
+        private _maxX: number = 0;
+        private _maxY: number = 0;
+        private _tx: number = 0;
+        private _ty: number = 0;
+        private _dx: number = 0;
+        private _dy: number = 0;
+        private _oldCameraX: number = 0;
+        private _oldCameraY: number = 0;
+        private _columnData;
+
+        public name: string;
+        public alpha: number = 1;
+        public visible: bool = true;
+        //public scrollFactor: MicroPoint;
+        public orientation: string;
+        public properties: {};
+
+        public mapData;
+        public mapFormat: number;
+        public boundsInTiles: Rectangle;
+
+        public tileWidth: number;
+        public tileHeight: number;
+
+        public widthInTiles: number = 0;
+        public heightInTiles: number = 0;
+
+        public widthInPixels: number = 0;
+        public heightInPixels: number = 0;
+
+        public addColumn(column) {
+
+            var data = [];
+
+            for (var c = 0; c < column.length; c++)
+            {
+                data[c] = parseInt(column[c]);
+            }
+
+            if (this.widthInTiles == 0)
+            {
+                this.widthInTiles = data.length;
+                this.widthInPixels = this.widthInTiles * this.tileWidth;
+            }
+
+            this.mapData.push(data);
+
+            this.heightInTiles++;
+            this.heightInPixels += this.tileHeight;
+
+        }
+
+        public updateBounds() {
+
+            this.boundsInTiles.setTo(0, 0, this.widthInTiles, this.heightInTiles);
+
+        }
+
+        private parseTileOffsets() {
+
+            this._tileOffsets = [];
+
+            var i = 0;
+
+            if (this.mapFormat == Tilemap.FORMAT_TILED_JSON)
+            {
+                //  For some reason Tiled counts from 1 not 0
+                this._tileOffsets[0] = null;
+                i = 1;
+            }
+
+            for (var ty = 0; ty < this._texture.height; ty += this.tileHeight)
+            {
+                for (var tx = 0; tx < this._texture.width; tx += this.tileWidth)
+                {
+                    this._tileOffsets[i] = { x: tx, y: ty };
+                    i++;
+                }
+            }
+
+        }
+
+        public renderDebugInfo(x: number, y: number, color?: string = 'rgb(255,255,255)') {
+
+            this._game.stage.context.fillStyle = color;
+            this._game.stage.context.fillText('TilemapLayer: ' + this.name, x, y);
+            this._game.stage.context.fillText('startX: ' + this._startX + ' endX: ' + this._maxX, x, y + 14);
+            this._game.stage.context.fillText('startY: ' + this._startY + ' endY: ' + this._maxY, x, y + 28);
+            this._game.stage.context.fillText('dx: ' + this._dx + ' dy: ' + this._dy, x, y + 42);
+
+        }
+
+        public render(camera: Camera, dx, dy): bool {
+
+            if (this.visible === false || this.alpha < 0.1)
+            {
+                return false;
+            }
+
+            //  Work out how many tiles we can fit into our camera and round it up for the edges
+            this._maxX = this._game.math.ceil(camera.width / this.tileWidth) + 1;
+            this._maxY = this._game.math.ceil(camera.height / this.tileHeight) + 1;
+
+            //  And now work out where in the tilemap the camera actually is
+            this._startX = this._game.math.floor(camera.worldView.x / this.tileWidth);
+            this._startY = this._game.math.floor(camera.worldView.y / this.tileHeight);
+
+            //  Tilemap bounds check
+            if (this._startX < 0)
+            {
+                this._startX = 0;
+            }
+
+            if (this._startY < 0)
+            {
+                this._startY = 0;
+            }
+
+            if (this._startX + this._maxX > this.widthInTiles)
+            {
+                this._startX = this.widthInTiles - this._maxX;
+            }
+
+            if (this._startY + this._maxY > this.heightInTiles)
+            {
+                this._startY = this.heightInTiles - this._maxY;
+            }
+
+            //  Finally get the offset to avoid the blocky movement
+            this._dx = dx;
+            this._dy = dy;
+
+            this._dx += -(camera.worldView.x - (this._startX * this.tileWidth));
+            this._dy += -(camera.worldView.y - (this._startY * this.tileHeight));
+
+            this._tx = this._dx;
+            this._ty = this._dy;
+
+            //	Apply camera difference
+            /*
+            if (this.scrollFactor.x !== 1.0 || this.scrollFactor.y !== 1.0)
+            {
+                this._dx -= (camera.worldView.x * this.scrollFactor.x);
+                this._dy -= (camera.worldView.y * this.scrollFactor.y);
+            }
+            */
+
+            //  Alpha
+            if (this.alpha !== 1)
+            {
+                var globalAlpha = this._game.stage.context.globalAlpha;
+                this._game.stage.context.globalAlpha = this.alpha;
+            }
+
+            for (var row = this._startY; row < this._startY + this._maxY; row++)
+            {
+                this._columnData = this.mapData[row];
+
+                for (var tile = this._startX; tile < this._startX + this._maxX; tile++)
+                {
+                    if (this._tileOffsets[this._columnData[tile]])
+                    {
+                        this._game.stage.context.drawImage(
+                            this._texture,	                                //  Source Image
+                            this._tileOffsets[this._columnData[tile]].x,    //  Source X (location within the source image)
+                            this._tileOffsets[this._columnData[tile]].y,    //  Source Y
+                            this.tileWidth, 	                            //	Source Width
+                            this.tileHeight, 	                            //	Source Height
+                            this._tx, 	    	                            //	Destination X (where on the canvas it'll be drawn)
+                            this._ty,	    	                            //	Destination Y
+                            this.tileWidth, 	                            //	Destination Width (always same as Source Width unless scaled)
+                            this.tileHeight	                                //	Destination Height (always same as Source Height unless scaled)
+                        );
+                    
+                    }
+
+                    this._tx += this.tileWidth;
+
+                }
+
+                this._tx = this._dx;
+                this._ty += this.tileHeight;
+
+            }
+
+            if (globalAlpha > -1)
+            {
+                this._game.stage.context.globalAlpha = globalAlpha;
+            }
+
+            return true;
+
+        }
+
+
+    }
+}

Phaser/system/animation/Animation.ts

@@ -24,6 +24,9 @@ module Phaser {
             this.isFinished = false;
             this.isPlaying = false;
 
+            this._frameIndex = 0;
+            this.currentFrame = this._frameData.getFrame(this._frames[this._frameIndex]);
+
         }
 
         private _game: Game;

Phaser/system/input/Keyboard.ts

@@ -30,12 +30,26 @@ module Phaser {
 
         }
 
-        public addKeyCapture(keycode: number) {
+        public addKeyCapture(keycode) {
-            this._capture[keycode] = true;
+
+            if (typeof keycode == 'array')
+            {
+                for (var code in keycode)
+                {
+                    this._capture[code] = true;
+                }
+            }
+            else
+            {
+                this._capture[keycode] = true;
+            }
+
         }
 
         public removeKeyCapture(keycode: number) {
+
             delete this._capture[keycode];
+
         }
 
         public clearCaptures() {

README.md

@@ -1,9 +1,9 @@
 Phaser
 ======
 
-Version 0.9.2
+Version 0.9.3
 
-20th April 2013
+24th April 2013
 
 By Richard Davey, [Photon Storm](http://www.photonstorm.com)
 
@@ -13,64 +13,30 @@ Follow us on [twitter](https://twitter.com/photonstorm) and our [blog](http://ww
 
 For support post to the Phaser board on the [HTML5 Game Devs forum](http://www.html5gamedevs.com/forum/14-phaser/)
 
-![Phaser Cameras](http://www.photonstorm.com/wp-content/uploads/2013/04/phaser_cams.png)
+Try out the [Phaser Test Suite](http://gametest.mobi/phaser/)
 
-Change Log
+![Blasteroids](http://www.photonstorm.com/wp-content/uploads/2013/04/phaser_blaster.png)
-----------
 
-V0.9.2
+Latest Update
+-------------
 
-Fixed issue with create not being called if there was an empty init method.<br />
+V0.9.3
-Added ability to flip a sprite (Sprite.flipped = true) + a test case for it.<br />
-Added ability to restart a sprite animation.<br />
-Sprite animations don't restart if you call play on them when they are already running.<br />
 
-V0.9.1
+* Added the new ScrollZone game object. Endlessly useful but especially for scrolling backdrops. Created 6 example tests.
-
+* Added GameObject.hideFromCamera(cameraID) to stop an object rendering to specific cameras (also showToCamera and clearCameraList)
-Added the new align property to GameObjects that controls placement when rendering.<br />
+* Added GameObject.setBounds() to confine a game object to a specific area within the world (useful for stopping them going off the edges)
-Added an align example to the Sprites test group (click the mouse to change alignment position)<br />
+* Added GameObject.outOfBoundsAction, can be either OUT OF BOUNDS STOP which stops the object moving, or OUT OF BOUNDS KILL which kills it.
-Added a new MicroPoint class. Same as Point but much smaller / less functions, updated GameObject to use it.<br />
+* Added GameObject.rotationOffset. Useful if your graphics need to rotate but weren't drawn facing zero degrees (to the right).
-Completely rebuilt the Rectangle class to use MicroPoints and store the values of the 9 points around the edges, to be used
+* Added shiftSinTable and shiftCosTable to the GameMath class to allow for quick iteration through the data tables.
-for new collision system.<br />
+* Added more robust frame checking into AnimationManager
-Game.Input now has 2 signals you can subscribe to for down/up events, see the Sprite align example for use.<br />
+* Re-built Tilemap handling from scratch to allow for proper layered maps (as exported from Tiled / Mappy)
-Updated the States examples to bring in-line with 0.9 release.
+* Tilemap no longer requires a buffer per Camera (in prep for WebGL support)
-
+* Fixed issues with Group not adding reference to Game to newly created objects (thanks JesseFreeman)
-V0.9
+* Fixed a potential race condition issue in Game.boot (thanks Hackmaniac)
-
+* Fixed issue with showing frame zero of a texture atlas before the animation started playing (thanks JesseFreeman)
-Large refactoring. Everything now lives inside the Phaser module, so all code and all tests have been updated to reflect this. Makes coding a tiny bit
+* Fixed a bug where Camera.visible = false would still render
-more verbose but stops the framework from globbing up the global namespace. Also should make code-insight work in WebStorm and similar editors.<br />
+* Removed the need for DynamicTextures to require a key property and updated test cases.
-Added the new GeomSprite object. This is a sprite that uses a geometry class for display (Circle, Rectangle, Point, Line). It's extremely flexible!<br />
+* You can now pass an array or a single value to Input.Keyboard.addKeyCapture().
-Added Geometry intersection results objects.<br />
-Added new Collision class and moved some functions there. Contains all the Game Object and Geometry Intersection methods.<br />
-Can now create a sprite animation based on frame names rather than indexes. Useful when you've an animation inside a texture atlas. Added test to show.<br />
-Added addKeyCapture(), removeKeyCapture() and clearCaptures() to Input.Keyboard. Calls event.preventDefault() on any keycode set to capture, allowing you to avoid page scrolling when using the cursor keys in a game for example.<br />
-Added new Motion class which contains lots of handy functions like 'moveTowardsObject', 'velocityFromAngle' and more.<br />
-Tween Manager added. You can now create tweens via Game.createTween (or for more control game.tweens). All the usual suspects are here: Bounce, Elastic, Quintic, etc and it's hooked into the core game clock, so if your game pauses and resumes your tweens adjust accordingly.
-
-V0.8
-
-Added ability to set Sprite frame by name (sprite.frameName), useful when you've loaded a Texture Atlas with filename values set rather than using frame indexes.<br />
-Updated texture atlas 4 demo to show this.<br />
-Fixed a bug that would cause a run-time error if you tried to create a sprite using an invalid texture key.<br />
-Added in DynamicTexture support and a test case for it.<br />
-
-V0.7
-
-Renamed FullScreen to StageScaleMode as it's much more fitting. Tested across Android and iOS with the various scale modes.<br />
-Added in world x/y coordinates to the input class, and the ability to get world x/y input coordinates from any Camera.<br />
-Added the RandomDataGenerator for seeded random number generation.<br />
-Setting the game world size now resizes the default camera (optional bool flag)
-
-V0.6
-
-Added in Touch support for mobile devices (and desktops that enable it) and populated x/y coords in Input with common values from touch and mouse.<br />
-Added new Circle geometry class (used by Touch) and moved them into a Geom folder.<br />
-Added in Device class for device inspection.<br />
-Added FullScreen class to enable full-screen support on mobile devices (scrolls URL bar out of the way on iOS and Android)
-
-V0.5
-
-Initial release
 
 Requirements
 ------------
@@ -110,6 +76,10 @@ Phaser fully or partially supports the following features. This list is growing
 	Sprites can be animated by a sprite sheet or Texture Atlas (JSON Array format supported).
 	Animation playback controls, looping, fps based timer and custom frames.
 
+*	Scroll Zones<br />
+
+	Scroll any image seamlessly in any direction. Or create multiple scrolling regions within an image.
+
 *	Collision<br />
 
 	A QuadTree based Sprite to Sprite, Sprite to Group or Group to Group collision system.
@@ -198,6 +168,65 @@ Please add them to the [Issue Tracker][1] with as much info as possible.
 
 ![Phaser Tilemap](http://www.photonstorm.com/wp-content/uploads/2013/04/phaser_tilemap.png)
 
+Change Log
+----------
+
+V0.9.2
+
+* Fixed issue with create not being called if there was an empty init method.
+* Added ability to flip a sprite (Sprite.flipped = true) + a test case for it.
+* Added ability to restart a sprite animation.
+* Sprite animations don't restart if you call play on them when they are already running.
+* Added Stage.disablePauseScreen. Set to true to stop your game pausing when the tab loses focus.
+
+V0.9.1
+
+* Added the new align property to GameObjects that controls placement when rendering.
+* Added an align example to the Sprites test group (click the mouse to change alignment position)
+* Added a new MicroPoint class. Same as Point but much smaller / less functions, updated GameObject to use it.
+* Completely rebuilt the Rectangle class to use MicroPoints and store the values of the 9 points around the edges, to be used
+for new collision system.
+* Game.Input now has 2 signals you can subscribe to for down/up events, see the Sprite align example for use.
+* Updated the States examples to bring in-line with 0.9 release.
+
+V0.9
+
+* Large refactoring. Everything now lives inside the Phaser module, so all code and all tests have been updated to reflect this. Makes coding a tiny bit more verbose but stops the framework from globbing up the global namespace. Also should make code-insight work in WebStorm and similar editors.
+* Added the new GeomSprite object. This is a sprite that uses a geometry class for display (Circle, Rectangle, Point, Line). It's extremely flexible!
+* Added Geometry intersection results objects.
+* Added new Collision class and moved some functions there. Contains all the Game Object and Geometry Intersection methods.
+* Can now create a sprite animation based on frame names rather than indexes. Useful when you've an animation inside a texture atlas. Added test to show.
+* Added addKeyCapture(), removeKeyCapture() and clearCaptures() to Input.Keyboard. Calls event.preventDefault() on any keycode set to capture, allowing you to avoid page scrolling when using the cursor keys in a game for example.
+* Added new Motion class which contains lots of handy functions like 'moveTowardsObject', 'velocityFromAngle' and more.
+* Tween Manager added. You can now create tweens via Game.createTween (or for more control game.tweens). All the usual suspects are here: Bounce, * Elastic, Quintic, etc and it's hooked into the core game clock, so if your game pauses and resumes your tweens adjust accordingly.
+
+V0.8
+
+* Added ability to set Sprite frame by name (sprite.frameName), useful when you've loaded a Texture Atlas with filename values set rather than using frame indexes.
+* Updated texture atlas 4 demo to show this.
+* Fixed a bug that would cause a run-time error if you tried to create a sprite using an invalid texture key.
+* Added in DynamicTexture support and a test case for it.
+
+V0.7
+
+* Renamed FullScreen to StageScaleMode as it's much more fitting. Tested across Android and iOS with the various scale modes.
+* Added in world x/y coordinates to the input class, and the ability to get world x/y input coordinates from any Camera.
+* Added the RandomDataGenerator for seeded random number generation.
+* Setting the game world size now resizes the default camera (optional bool flag)
+
+V0.6
+
+* Added in Touch support for mobile devices (and desktops that enable it) and populated x/y coords in Input with common values from touch and mouse.
+* Added new Circle geometry class (used by Touch) and moved them into a Geom folder.
+* Added in Device class for device inspection.
+* Added FullScreen class to enable full-screen support on mobile devices (scrolls URL bar out of the way on iOS and Android)
+
+V0.5
+
+* Initial release
+
+![Phaser Cameras](http://www.photonstorm.com/wp-content/uploads/2013/04/phaser_cams.png)
+
 License
 -------
 

Tests/Tests.csproj

@@ -101,6 +101,30 @@
       <DependentUpon>screen grab.ts</DependentUpon>
     </Content>
     <TypeScriptCompile Include="sprites\align.ts" />
+    <TypeScriptCompile Include="scrollzones\simple scrollzone.ts" />
+    <TypeScriptCompile Include="scrollzones\ballscroller.ts" />
+    <Content Include="scrollzones\ballscroller.js">
+      <DependentUpon>ballscroller.ts</DependentUpon>
+    </Content>
+    <TypeScriptCompile Include="scrollzones\parallax.ts" />
+    <TypeScriptCompile Include="scrollzones\blasteroids.ts" />
+    <Content Include="scrollzones\blasteroids.js">
+      <DependentUpon>blasteroids.ts</DependentUpon>
+    </Content>
+    <Content Include="scrollzones\parallax.js">
+      <DependentUpon>parallax.ts</DependentUpon>
+    </Content>
+    <TypeScriptCompile Include="scrollzones\scroll window.ts" />
+    <TypeScriptCompile Include="scrollzones\region demo.ts" />
+    <Content Include="scrollzones\region demo.js">
+      <DependentUpon>region demo.ts</DependentUpon>
+    </Content>
+    <Content Include="scrollzones\scroll window.js">
+      <DependentUpon>scroll window.ts</DependentUpon>
+    </Content>
+    <Content Include="scrollzones\simple scrollzone.js">
+      <DependentUpon>simple scrollzone.ts</DependentUpon>
+    </Content>
     <Content Include="sprites\align.js">
       <DependentUpon>align.ts</DependentUpon>
     </Content>
@@ -108,6 +132,10 @@
     <Content Include="sprites\flipped.js">
       <DependentUpon>flipped.ts</DependentUpon>
     </Content>
+    <TypeScriptCompile Include="tilemap\small map.ts" />
+    <Content Include="tilemap\small map.js">
+      <DependentUpon>small map.ts</DependentUpon>
+    </Content>
     <Content Include="tweens\bounce.js">
       <DependentUpon>bounce.ts</DependentUpon>
     </Content>

Tests/misc/screen grab.js

@@ -0,0 +1,40 @@
+/// <reference path="../../Phaser/Game.ts" />
+(function () {
+    var myGame = new Phaser.Game(this, 'game', 800, 600, init, create, update);
+    function init() {
+        myGame.loader.addTextFile('jsontest', 'assets/maps/test.json');
+        myGame.loader.addImageFile('jsontiles', 'assets/tiles/platformer_tiles.png');
+        myGame.loader.load();
+    }
+    var car;
+    var map;
+    var hasGrabbed = false;
+    function create() {
+        myGame.camera.deadzone = new Phaser.Rectangle(64, 64, myGame.stage.width - 128, myGame.stage.height - 128);
+        map = myGame.createTilemap('jsontiles', 'jsontest', Phaser.Tilemap.FORMAT_TILED_JSON);
+        //  for now like this, but change to auto soon
+        myGame.world.setSize(map.widthInPixels, map.heightInPixels);
+        myGame.camera.setBounds(0, 0, myGame.world.width, myGame.world.height);
+        car = myGame.createSprite(300, 100, 'car');
+        myGame.camera.follow(car);
+    }
+    function update() {
+        car.velocity.x = 0;
+        car.velocity.y = 0;
+        car.angularVelocity = 0;
+        car.angularAcceleration = 0;
+        if(myGame.input.keyboard.isDown(Phaser.Keyboard.LEFT)) {
+            car.angularVelocity = -200;
+        } else if(myGame.input.keyboard.isDown(Phaser.Keyboard.RIGHT)) {
+            car.angularVelocity = 200;
+        }
+        if(myGame.input.keyboard.isDown(Phaser.Keyboard.UP)) {
+            var motion = myGame.motion.velocityFromAngle(car.angle, 300);
+            car.velocity.copyFrom(motion);
+        }
+        if(myGame.input.keyboard.justReleased(Phaser.Keyboard.SPACEBAR) && hasGrabbed == false) {
+            console.log('graboids');
+            hasGrabbed = true;
+        }
+    }
+})();

Tests/misc/screen grab.ts

@@ -0,0 +1,67 @@
+/// <reference path="../../Phaser/Game.ts" />
+
+(function () {
+
+    var myGame = new Phaser.Game(this, 'game', 800, 600, init, create, update);
+
+    function init() {
+
+        myGame.loader.addTextFile('jsontest', 'assets/maps/test.json');
+        myGame.loader.addImageFile('jsontiles', 'assets/tiles/platformer_tiles.png');
+
+        myGame.loader.load();
+
+    }
+
+    var car: Phaser.Sprite;
+    var map: Phaser.Tilemap;
+    var hasGrabbed: bool = false;
+
+    function create() {
+
+        myGame.camera.deadzone = new Phaser.Rectangle(64, 64, myGame.stage.width - 128, myGame.stage.height - 128);
+
+        map = myGame.createTilemap('jsontiles', 'jsontest', Phaser.Tilemap.FORMAT_TILED_JSON);
+
+        //  for now like this, but change to auto soon
+        myGame.world.setSize(map.widthInPixels, map.heightInPixels);
+        myGame.camera.setBounds(0, 0, myGame.world.width, myGame.world.height);
+
+        car = myGame.createSprite(300, 100, 'car');
+
+        myGame.camera.follow(car);
+
+    }
+
+    function update() {
+
+        car.velocity.x = 0;
+        car.velocity.y = 0;
+		car.angularVelocity = 0;
+		car.angularAcceleration = 0;
+
+        if (myGame.input.keyboard.isDown(Phaser.Keyboard.LEFT))
+        {
+            car.angularVelocity = -200;
+        }
+        else if (myGame.input.keyboard.isDown(Phaser.Keyboard.RIGHT))
+        {
+            car.angularVelocity = 200;
+        }
+
+        if (myGame.input.keyboard.isDown(Phaser.Keyboard.UP))
+        {
+            var motion:Phaser.Point = myGame.motion.velocityFromAngle(car.angle, 300);
+
+            car.velocity.copyFrom(motion);
+        }
+
+        if (myGame.input.keyboard.justReleased(Phaser.Keyboard.SPACEBAR) && hasGrabbed == false)
+        {
+            console.log('graboids');
+            hasGrabbed = true;
+        }
+
+    }
+
+})();

Tests/scrollzones/ballscroller.js

@@ -0,0 +1,25 @@
+/// <reference path="../../Phaser/Game.ts" />
+/// <reference path="../../Phaser/gameobjects/ScrollZone.ts" />
+(function () {
+    var myGame = new Phaser.Game(this, 'game', 800, 600, init, create, update);
+    function init() {
+        myGame.loader.addImageFile('balls', 'assets/sprites/balls.png');
+        myGame.loader.load();
+    }
+    var scroller;
+    function create() {
+        //  The source image (balls.png) is only 102x17 in size, but we want it to create a scroll the size of the whole game window.
+        //  We can take advantage of the way a ScrollZone can create a seamless pattern for us automatically.
+        //  If you create a ScrollRegion larger than the source texture, it'll create a DynamicTexture and perform a pattern fill on it and use that
+        //  for rendering.
+        //  We've rounded the height up to 612 because in order to have a seamless pattern it needs to be a multiple of 17 (the height of the source image)
+        scroller = myGame.createScrollZone('balls', 0, 0, 800, 612);
+        //  Some sin/cos data for the movement
+        myGame.math.sinCosGenerator(256, 4, 4, 2);
+    }
+    function update() {
+        //	Cycle through the wave data and apply it to the scroll speed (causes the circular wave motion)
+        scroller.currentRegion.scrollSpeed.x = myGame.math.shiftSinTable();
+        scroller.currentRegion.scrollSpeed.y = myGame.math.shiftCosTable();
+    }
+})();

Tests/scrollzones/ballscroller.ts

@@ -0,0 +1,41 @@
+/// <reference path="../../Phaser/Game.ts" />
+/// <reference path="../../Phaser/gameobjects/ScrollZone.ts" />
+
+(function () {
+
+    var myGame = new Phaser.Game(this, 'game', 800, 600, init, create, update);
+
+    function init() {
+
+        myGame.loader.addImageFile('balls', 'assets/sprites/balls.png');
+
+        myGame.loader.load();
+
+    }
+
+    var scroller: Phaser.ScrollZone;
+
+    function create() {
+
+        //  The source image (balls.png) is only 102x17 in size, but we want it to create a scroll the size of the whole game window.
+        //  We can take advantage of the way a ScrollZone can create a seamless pattern for us automatically.
+        //  If you create a ScrollRegion larger than the source texture, it'll create a DynamicTexture and perform a pattern fill on it and use that
+        //  for rendering.
+
+        //  We've rounded the height up to 612 because in order to have a seamless pattern it needs to be a multiple of 17 (the height of the source image)
+        scroller = myGame.createScrollZone('balls', 0, 0, 800, 612);
+
+        //  Some sin/cos data for the movement
+		myGame.math.sinCosGenerator(256, 4, 4, 2);
+
+    }
+
+    function update() {
+
+		//	Cycle through the wave data and apply it to the scroll speed (causes the circular wave motion)
+        scroller.currentRegion.scrollSpeed.x = myGame.math.shiftSinTable();
+        scroller.currentRegion.scrollSpeed.y = myGame.math.shiftCosTable();
+
+    }
+
+})();

Tests/scrollzones/blasteroids.js

@@ -0,0 +1,87 @@
+/// <reference path="../../Phaser/Game.ts" />
+/// <reference path="../../Phaser/gameobjects/ScrollZone.ts" />
+(function () {
+    var myGame = new Phaser.Game(this, 'game', 800, 600, init, create, update);
+    function init() {
+        myGame.loader.addImageFile('nashwan', 'assets/sprites/xenon2_ship.png');
+        myGame.loader.addImageFile('starfield', 'assets/misc/starfield.jpg');
+        myGame.loader.addImageFile('jet', 'assets/sprites/particle1.png');
+        myGame.loader.addImageFile('bullet', 'assets/misc/bullet1.png');
+        myGame.loader.load();
+    }
+    var scroller;
+    var emitter;
+    var ship;
+    var bullets;
+    var speed = 0;
+    var fireRate = 0;
+    var shipMotion;
+    function create() {
+        scroller = myGame.createScrollZone('starfield', 0, 0, 1024, 1024);
+        emitter = myGame.createEmitter(myGame.stage.centerX + 16, myGame.stage.centerY + 12);
+        emitter.makeParticles('jet', 250, 0, false, 0);
+        emitter.setRotation(0, 0);
+        bullets = myGame.createGroup(50);
+        //  Create our bullet pool
+        for(var i = 0; i < 50; i++) {
+            var tempBullet = new Phaser.Sprite(myGame, myGame.stage.centerX, myGame.stage.centerY, 'bullet');
+            tempBullet.exists = false;
+            tempBullet.rotationOffset = 90;
+            tempBullet.setBounds(-100, -100, 900, 700);
+            tempBullet.outOfBoundsAction = Phaser.GameObject.OUT_OF_BOUNDS_KILL;
+            bullets.add(tempBullet);
+        }
+        ship = myGame.createSprite(myGame.stage.centerX, myGame.stage.centerY, 'nashwan');
+        //  We do this because the ship was drawn facing up, but 0 degrees is pointing to the right
+        ship.rotationOffset = 90;
+    }
+    function update() {
+        ship.angularVelocity = 0;
+        if(myGame.input.keyboard.isDown(Phaser.Keyboard.LEFT)) {
+            ship.angularVelocity = -200;
+        } else if(myGame.input.keyboard.isDown(Phaser.Keyboard.RIGHT)) {
+            ship.angularVelocity = 200;
+        }
+        if(myGame.input.keyboard.isDown(Phaser.Keyboard.UP)) {
+            speed += 0.1;
+            if(speed > 10) {
+                speed = 10;
+            }
+        } else {
+            speed -= 0.1;
+            if(speed < 0) {
+                speed = 0;
+            }
+        }
+        shipMotion = myGame.motion.velocityFromAngle(ship.angle, speed);
+        scroller.setSpeed(shipMotion.x, shipMotion.y);
+        //  emit particles
+        if(speed > 2) {
+            //  We use the opposite of the motion because the jets emit out the back of the ship
+            //  The 20 and 30 values just keep them nice and fast
+            emitter.setXSpeed(-(shipMotion.x * 20), -(shipMotion.x * 30));
+            emitter.setYSpeed(-(shipMotion.y * 20), -(shipMotion.y * 30));
+            emitter.emitParticle();
+        }
+        if(myGame.input.keyboard.isDown(Phaser.Keyboard.SPACEBAR)) {
+            fire();
+        }
+    }
+    function recycleBullet(bullet) {
+        if(bullet.exists && bullet.x < -40 || bullet.x > 840 || bullet.y < -40 || bullet.y > 640) {
+            bullet.exists = false;
+        }
+    }
+    function fire() {
+        if(myGame.time.now > fireRate) {
+            var b = bullets.getFirstAvailable();
+            b.x = ship.x;
+            b.y = ship.y - 26;
+            var bulletMotion = myGame.motion.velocityFromAngle(ship.angle, 400);
+            b.revive();
+            b.angle = ship.angle;
+            b.velocity.setTo(bulletMotion.x, bulletMotion.y);
+            fireRate = myGame.time.now + 100;
+        }
+    }
+})();

Tests/scrollzones/blasteroids.ts

@@ -0,0 +1,137 @@
+/// <reference path="../../Phaser/Game.ts" />
+/// <reference path="../../Phaser/gameobjects/ScrollZone.ts" />
+
+(function () {
+
+    var myGame = new Phaser.Game(this, 'game', 800, 600, init, create, update);
+
+    function init() {
+
+        myGame.loader.addImageFile('nashwan', 'assets/sprites/xenon2_ship.png');
+        myGame.loader.addImageFile('starfield', 'assets/misc/starfield.jpg');
+        myGame.loader.addImageFile('jet', 'assets/sprites/particle1.png');
+        myGame.loader.addImageFile('bullet', 'assets/misc/bullet1.png');
+
+        myGame.loader.load();
+
+    }
+
+    var scroller: Phaser.ScrollZone;
+    var emitter: Phaser.Emitter;
+    var ship: Phaser.Sprite;
+    var bullets: Phaser.Group;
+
+    var speed: number = 0;
+    var fireRate: number = 0;
+    var shipMotion: Phaser.Point;
+
+    function create() {
+
+        scroller = myGame.createScrollZone('starfield', 0, 0, 1024, 1024);
+
+        emitter = myGame.createEmitter(myGame.stage.centerX + 16, myGame.stage.centerY + 12);
+        emitter.makeParticles('jet', 250, 0, false, 0);
+        emitter.setRotation(0, 0);
+
+        bullets = myGame.createGroup(50);
+
+        //  Create our bullet pool
+        for (var i = 0; i < 50; i++)
+        {
+            var tempBullet = new Phaser.Sprite(myGame, myGame.stage.centerX, myGame.stage.centerY, 'bullet');
+            tempBullet.exists = false;
+            tempBullet.rotationOffset = 90;
+            tempBullet.setBounds(-100, -100, 900, 700);
+            tempBullet.outOfBoundsAction = Phaser.GameObject.OUT_OF_BOUNDS_KILL;
+            bullets.add(tempBullet);
+        }
+
+        ship = myGame.createSprite(myGame.stage.centerX, myGame.stage.centerY, 'nashwan');
+
+        //  We do this because the ship was drawn facing up, but 0 degrees is pointing to the right
+        ship.rotationOffset = 90;
+
+    }
+
+    function update() {
+
+		ship.angularVelocity = 0;
+
+        if (myGame.input.keyboard.isDown(Phaser.Keyboard.LEFT))
+        {
+            ship.angularVelocity = -200;
+        }
+        else if (myGame.input.keyboard.isDown(Phaser.Keyboard.RIGHT))
+        {
+            ship.angularVelocity = 200;
+        }
+
+        if (myGame.input.keyboard.isDown(Phaser.Keyboard.UP))
+        {
+            speed += 0.1;
+
+            if (speed > 10)
+            {
+                speed = 10;
+            }
+        }
+        else
+        {
+            speed -= 0.1;
+
+            if (speed < 0) {
+                speed = 0;
+            }
+        }
+
+        shipMotion = myGame.motion.velocityFromAngle(ship.angle, speed);
+
+        scroller.setSpeed(shipMotion.x, shipMotion.y);
+
+        //  emit particles
+        if (speed > 2)
+        {
+            //  We use the opposite of the motion because the jets emit out the back of the ship
+            //  The 20 and 30 values just keep them nice and fast
+            emitter.setXSpeed(-(shipMotion.x * 20), -(shipMotion.x * 30));
+            emitter.setYSpeed(-(shipMotion.y * 20), -(shipMotion.y * 30));
+            emitter.emitParticle();
+        }
+
+        if (myGame.input.keyboard.isDown(Phaser.Keyboard.SPACEBAR))
+        {
+            fire();
+        }
+
+    }
+
+    function recycleBullet(bullet:Phaser.Sprite) {
+
+        if (bullet.exists && bullet.x < -40 || bullet.x > 840 || bullet.y < -40 || bullet.y > 640)
+        {
+            bullet.exists = false;
+        }
+
+    }
+
+    function fire() {
+
+        if (myGame.time.now > fireRate)
+        {
+            var b:Phaser.Sprite = bullets.getFirstAvailable();
+
+            b.x = ship.x;
+            b.y = ship.y - 26;
+
+            var bulletMotion = myGame.motion.velocityFromAngle(ship.angle, 400);
+
+            b.revive();
+            b.angle = ship.angle;
+            b.velocity.setTo(bulletMotion.x, bulletMotion.y);
+
+            fireRate = myGame.time.now + 100;
+        }
+
+    }
+
+})();

Tests/scrollzones/parallax.js

@@ -0,0 +1,31 @@
+/// <reference path="../../Phaser/Game.ts" />
+/// <reference path="../../Phaser/gameobjects/ScrollZone.ts" />
+(function () {
+    var myGame = new Phaser.Game(this, 'game', 800, 600, init, create);
+    function init() {
+        myGame.loader.addImageFile('starray', 'assets/pics/auto_scroll_landscape.png');
+        myGame.loader.load();
+    }
+    function create() {
+        var zone = myGame.createScrollZone('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/scrollzones/parallax.ts

@@ -0,0 +1,53 @@
+/// <reference path="../../Phaser/Game.ts" />
+/// <reference path="../../Phaser/gameobjects/ScrollZone.ts" />
+
+(function () {
+
+    var myGame = new Phaser.Game(this, 'game', 800, 600, init, create);
+
+    function init() {
+
+        myGame.loader.addImageFile('starray', 'assets/pics/auto_scroll_landscape.png');
+
+        myGame.loader.load();
+
+    }
+
+    function create() {
+
+        var zone: Phaser.ScrollZone = myGame.createScrollZone('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;
+			}
+		}
+
+    }
+
+})();

Tests/scrollzones/region demo.js

@@ -0,0 +1,22 @@
+/// <reference path="../../Phaser/Game.ts" />
+/// <reference path="../../Phaser/gameobjects/ScrollZone.ts" />
+(function () {
+    var myGame = new Phaser.Game(this, 'game', 800, 600, init, create);
+    function init() {
+        myGame.loader.addImageFile('angelDawn', 'assets/pics/game14_angel_dawn.png');
+        myGame.loader.load();
+    }
+    var scroller;
+    function create() {
+        //  This creates our ScrollZone centered in the middle of the stage.
+        scroller = myGame.createScrollZone('angelDawn', myGame.stage.centerX - 320, 100);
+        //  By default we won't scroll the full image, but we will create 3 ScrollRegions within it:
+        //  This creates a ScrollRegion which can be thought of as a rectangle within the ScrollZone that can be scrolled
+        //  independantly - this one scrolls the image of the spacemans head
+        scroller.addRegion(32, 32, 352, 240, 0, 2);
+        //  The head in the top right
+        scroller.addRegion(480, 30, 96, 96, 4, 0);
+        //  The small piece of text
+        scroller.addRegion(466, 160, 122, 14, 0, -0.5);
+    }
+})();

Tests/scrollzones/region demo.ts

@@ -0,0 +1,37 @@
+/// <reference path="../../Phaser/Game.ts" />
+/// <reference path="../../Phaser/gameobjects/ScrollZone.ts" />
+
+(function () {
+
+    var myGame = new Phaser.Game(this, 'game', 800, 600, init, create);
+
+    function init() {
+
+        myGame.loader.addImageFile('angelDawn', 'assets/pics/game14_angel_dawn.png');
+
+        myGame.loader.load();
+
+    }
+
+    var scroller: Phaser.ScrollZone;
+
+    function create() {
+
+        //  This creates our ScrollZone centered in the middle of the stage.
+        scroller = myGame.createScrollZone('angelDawn', myGame.stage.centerX - 320, 100);
+
+        //  By default we won't scroll the full image, but we will create 3 ScrollRegions within it:
+
+        //  This creates a ScrollRegion which can be thought of as a rectangle within the ScrollZone that can be scrolled
+        //  independantly - this one scrolls the image of the spacemans head
+        scroller.addRegion(32, 32, 352, 240, 0, 2);
+
+        //  The head in the top right
+        scroller.addRegion(480, 30, 96, 96, 4, 0);
+
+        //  The small piece of text
+        scroller.addRegion(466, 160, 122, 14, 0, -0.5);
+
+    }
+
+})();

Tests/scrollzones/scroll window.js

@@ -0,0 +1,18 @@
+/// <reference path="../../Phaser/Game.ts" />
+/// <reference path="../../Phaser/gameobjects/ScrollZone.ts" />
+(function () {
+    var myGame = new Phaser.Game(this, 'game', 800, 600, init, create);
+    function init() {
+        myGame.loader.addImageFile('dragonsun', 'assets/pics/cougar_dragonsun.png');
+        myGame.loader.addImageFile('overlay', 'assets/pics/scrollframe.png');
+        myGame.loader.load();
+    }
+    var scroller;
+    function create() {
+        //  This creates our ScrollZone. It is positioned at x32 y32 (world coodinates)
+        //  and is a size of 352x240 (which matches the window in our overlay image)
+        scroller = myGame.createScrollZone('dragonsun', 32, 32, 352, 240);
+        scroller.setSpeed(2, 2);
+        myGame.createSprite(0, 0, 'overlay');
+    }
+})();

Tests/scrollzones/scroll window.ts

@@ -0,0 +1,31 @@
+/// <reference path="../../Phaser/Game.ts" />
+/// <reference path="../../Phaser/gameobjects/ScrollZone.ts" />
+
+(function () {
+
+    var myGame = new Phaser.Game(this, 'game', 800, 600, init, create);
+
+    function init() {
+
+        myGame.loader.addImageFile('dragonsun', 'assets/pics/cougar_dragonsun.png');
+        myGame.loader.addImageFile('overlay', 'assets/pics/scrollframe.png');
+
+        myGame.loader.load();
+
+    }
+
+    var scroller: Phaser.ScrollZone;
+
+    function create() {
+
+        //  This creates our ScrollZone. It is positioned at x32 y32 (world coodinates)
+        //  and is a size of 352x240 (which matches the window in our overlay image)
+        scroller = myGame.createScrollZone('dragonsun', 32, 32, 352, 240);
+
+        scroller.setSpeed(2, 2);
+
+        myGame.createSprite(0, 0, 'overlay');
+
+    }
+
+})();

Tests/scrollzones/simple scrollzone.js

@@ -0,0 +1,16 @@
+/// <reference path="../../Phaser/Game.ts" />
+/// <reference path="../../Phaser/gameobjects/ScrollZone.ts" />
+(function () {
+    var myGame = new Phaser.Game(this, 'game', 800, 600, init, create);
+    function init() {
+        myGame.loader.addImageFile('crystal', 'assets/pics/jim_sachs_time_crystal.png');
+        myGame.loader.load();
+    }
+    function create() {
+        //  This creates our ScrollZone. It is positioned at x0 y0 (world coodinates) by default and uses
+        //  the 'crystal' image from the cache.
+        //  The default is for the scroll zone to create 1 new scrolling region the size of the whole image you gave it.
+        //  For this example we'll keep that, but look at the other tests to see reasons why you may not want to.
+        myGame.createScrollZone('crystal').setSpeed(4, 2);
+    }
+})();

Tests/scrollzones/simple scrollzone.ts

@@ -0,0 +1,28 @@
+/// <reference path="../../Phaser/Game.ts" />
+/// <reference path="../../Phaser/gameobjects/ScrollZone.ts" />
+
+(function () {
+
+    var myGame = new Phaser.Game(this, 'game', 800, 600, init, create);
+
+    function init() {
+
+        myGame.loader.addImageFile('crystal', 'assets/pics/jim_sachs_time_crystal.png');
+
+        myGame.loader.load();
+
+    }
+
+    function create() {
+
+        //  This creates our ScrollZone. It is positioned at x0 y0 (world coodinates) by default and uses
+        //  the 'crystal' image from the cache.
+
+        //  The default is for the scroll zone to create 1 new scrolling region the size of the whole image you gave it.
+        //  For this example we'll keep that, but look at the other tests to see reasons why you may not want to.
+
+        myGame.createScrollZone('crystal').setSpeed(4, 2);
+
+    }
+
+})();

Tests/sprites/dynamic texture 1.js

@@ -8,7 +8,7 @@
     var wobblyBall;
     function create() {
         //  Create our DynamicTexture
-        wobblyBall = myGame.createDynamicTexture('wobbly', 32, 64);
+        wobblyBall = myGame.createDynamicTexture(32, 64);
         //  And apply it to 100 randomly positioned sprites
         for(var i = 0; i < 100; i++) {
             var temp = myGame.createSprite(myGame.world.randomX, myGame.world.randomY);

Tests/sprites/dynamic texture 1.ts

@@ -17,7 +17,7 @@
     function create() {
 
         //  Create our DynamicTexture
-        wobblyBall = myGame.createDynamicTexture('wobbly', 32, 64);
+        wobblyBall = myGame.createDynamicTexture(32, 64);
 
         //  And apply it to 100 randomly positioned sprites
         for (var i = 0; i < 100; i++)

Tests/sprites/dynamic texture 2.js

@@ -12,7 +12,7 @@
     function create() {
         myGame.camera.backgroundColor = 'rgb(82,154,206)';
         //  Create our DynamicTexture
-        wobble = myGame.createDynamicTexture('wobbly', 48, 100);
+        wobble = myGame.createDynamicTexture(48, 100);
         slime = myGame.createSprite(200, 300);
         slime.width = 48;
         slime.height = 100;

Tests/sprites/dynamic texture 2.ts

@@ -22,7 +22,7 @@
         myGame.camera.backgroundColor = 'rgb(82,154,206)';
 
         //  Create our DynamicTexture
-        wobble = myGame.createDynamicTexture('wobbly', 48, 100);
+        wobble = myGame.createDynamicTexture(48, 100);
 
         slime = myGame.createSprite(200, 300);
         slime.width = 48;

Tests/sprites/mark of the bunny.js

@@ -27,7 +27,6 @@
             var tempSprite = myGame.createSprite(myGame.stage.randomX, 0, 'bunny');
             tempSprite.velocity.x = -200 + (Math.random() * 400);
             tempSprite.velocity.y = 100 + Math.random() * 200;
-            myGame.world.addExistingSprite(tempSprite);
         }
     }
     function update() {

Tests/sprites/mark of the bunny.ts

@@ -42,8 +42,6 @@
             var tempSprite = myGame.createSprite(myGame.stage.randomX, 0, 'bunny');
             tempSprite.velocity.x = -200 + (Math.random() * 400);
             tempSprite.velocity.y = 100 + Math.random() * 200;
-
-            myGame.world.addExistingSprite(tempSprite);
         }
 
     }

Tests/tilemap/basic tilemap.js

@@ -1,9 +1,11 @@
+/// <reference path="../../Phaser/gameobjects/Tilemap.ts" />
 /// <reference path="../../Phaser/Game.ts" />
 (function () {
     var myGame = new Phaser.Game(this, 'game', 800, 600, init, create, update);
     function init() {
         //  Tiled JSON Test
-        myGame.loader.addTextFile('jsontest', 'assets/maps/test.json');
+        //myGame.loader.addTextFile('jsontest', 'assets/maps/test.json');
+        myGame.loader.addTextFile('jsontest', 'assets/maps/multi-layer-test.json');
         myGame.loader.addImageFile('jsontiles', 'assets/tiles/platformer_tiles.png');
         //  CSV Test
         myGame.loader.addTextFile('csvtest', 'assets/maps/catastrophi_level2.csv');
@@ -16,19 +18,14 @@
     var bigCam;
     function create() {
         myGame.camera.deadzone = new Phaser.Rectangle(64, 64, myGame.stage.width - 128, myGame.stage.height - 128);
-        bigCam = myGame.createCamera(30, 30, 200, 200);
+        //bigCam = myGame.createCamera(30, 30, 200, 200);
-        bigCam.showBorder = true;
+        //bigCam.showBorder = true;
-        bigCam.scale.setTo(1.5, 1.5);
+        //bigCam.scale.setTo(1.5, 1.5);
-        //map = myGame.createTilemap('jsontiles', 'jsontest', Tilemap.FORMAT_TILED_JSON);
+        //map = myGame.createTilemap('jsontiles', 'jsontest', Phaser.Tilemap.FORMAT_TILED_JSON);
-        map = myGame.createTilemap('csvtiles', 'csvtest', Phaser.Tilemap.FORMAT_CSV, 16, 16);
+        map = myGame.createTilemap('csvtiles', 'csvtest', Phaser.Tilemap.FORMAT_CSV, true, 16, 16);
-        //  for now like this, but change to auto soon
-        myGame.world.setSize(map.widthInPixels, map.heightInPixels);
-        console.log('world size', map.widthInPixels, map.heightInPixels);
-        myGame.camera.setBounds(0, 0, myGame.world.width, myGame.world.height);
-        bigCam.setBounds(0, 0, myGame.world.width, myGame.world.height);
         car = myGame.createSprite(300, 100, 'car');
         myGame.camera.follow(car);
-        bigCam.follow(car, Phaser.Camera.STYLE_LOCKON);
+        //bigCam.follow(car, Phaser.Camera.STYLE_LOCKON);
         myGame.onRenderCallback = render;
     }
     function update() {
@@ -48,6 +45,6 @@
         }
     }
     function render() {
-        map.renderDebugInfo(400, 16);
+        //map.renderDebugInfo(400, 16);
-    }
+            }
 })();

Tests/tilemap/basic tilemap.ts

@@ -1,3 +1,4 @@
+/// <reference path="../../Phaser/gameobjects/Tilemap.ts" />
 /// <reference path="../../Phaser/Game.ts" />
 
 (function () {
@@ -7,7 +8,8 @@
     function init() {
 
         //  Tiled JSON Test
-        myGame.loader.addTextFile('jsontest', 'assets/maps/test.json');
+        //myGame.loader.addTextFile('jsontest', 'assets/maps/test.json');
+        myGame.loader.addTextFile('jsontest', 'assets/maps/multi-layer-test.json');
         myGame.loader.addImageFile('jsontiles', 'assets/tiles/platformer_tiles.png');
 
         //  CSV Test
@@ -28,24 +30,17 @@
 
         myGame.camera.deadzone = new Phaser.Rectangle(64, 64, myGame.stage.width - 128, myGame.stage.height - 128);
 
-        bigCam = myGame.createCamera(30, 30, 200, 200);
+        //bigCam = myGame.createCamera(30, 30, 200, 200);
-        bigCam.showBorder = true;
+        //bigCam.showBorder = true;
-        bigCam.scale.setTo(1.5, 1.5);
+        //bigCam.scale.setTo(1.5, 1.5);
 
-        //map = myGame.createTilemap('jsontiles', 'jsontest', Tilemap.FORMAT_TILED_JSON);
+        //map = myGame.createTilemap('jsontiles', 'jsontest', Phaser.Tilemap.FORMAT_TILED_JSON);
-        map = myGame.createTilemap('csvtiles', 'csvtest', Phaser.Tilemap.FORMAT_CSV, 16, 16);
+        map = myGame.createTilemap('csvtiles', 'csvtest', Phaser.Tilemap.FORMAT_CSV, true, 16, 16);
-
-        //  for now like this, but change to auto soon
-        myGame.world.setSize(map.widthInPixels, map.heightInPixels);
-        console.log('world size', map.widthInPixels, map.heightInPixels);
-
-        myGame.camera.setBounds(0, 0, myGame.world.width, myGame.world.height);
-        bigCam.setBounds(0, 0, myGame.world.width, myGame.world.height);
 
         car = myGame.createSprite(300, 100, 'car');
 
         myGame.camera.follow(car);
-        bigCam.follow(car, Phaser.Camera.STYLE_LOCKON);
+        //bigCam.follow(car, Phaser.Camera.STYLE_LOCKON);
 
         myGame.onRenderCallback = render;
 
@@ -80,7 +75,7 @@
 
     function render {
 
-        map.renderDebugInfo(400, 16);
+        //map.renderDebugInfo(400, 16);
 
     }
 

Tests/tilemap/small map.js

@@ -0,0 +1,42 @@
+/// <reference path="../../Phaser/gameobjects/Tilemap.ts" />
+/// <reference path="../../Phaser/Game.ts" />
+(function () {
+    var myGame = new Phaser.Game(this, 'game', 800, 600, init, create, update);
+    function init() {
+        myGame.loader.addTextFile('jsontest', 'assets/maps/multi-layer-test.json');
+        myGame.loader.addImageFile('jsontiles', 'assets/tiles/platformer_tiles.png');
+        myGame.loader.addImageFile('overlay', 'assets/pics/scrollframe.png');
+        myGame.loader.addImageFile('car', 'assets/sprites/car90.png');
+        myGame.loader.load();
+    }
+    var car;
+    var map;
+    var overlay;
+    var smallCam;
+    function create() {
+        map = myGame.createTilemap('jsontiles', 'jsontest', Phaser.Tilemap.FORMAT_TILED_JSON);
+        car = myGame.createSprite(300, 100, 'car');
+        car.setBounds(0, 0, map.widthInPixels - 32, map.heightInPixels - 32);
+        //  Hide the tilemap and car sprite from the main camera (it will still be seen by the smallCam)
+        map.hideFromCamera(myGame.camera);
+        car.hideFromCamera(myGame.camera);
+        smallCam = myGame.world.createCamera(32, 32, 352, 240);
+        smallCam.setBounds(0, 0, map.widthInPixels, map.heightInPixels);
+        smallCam.follow(car);
+        overlay = myGame.createSprite(0, 0, 'overlay');
+        overlay.hideFromCamera(smallCam);
+    }
+    function update() {
+        car.velocity.x = 0;
+        car.velocity.y = 0;
+        car.angularVelocity = 0;
+        if(myGame.input.keyboard.isDown(Phaser.Keyboard.LEFT)) {
+            car.angularVelocity = -200;
+        } else if(myGame.input.keyboard.isDown(Phaser.Keyboard.RIGHT)) {
+            car.angularVelocity = 200;
+        }
+        if(myGame.input.keyboard.isDown(Phaser.Keyboard.UP)) {
+            car.velocity.copyFrom(myGame.motion.velocityFromAngle(car.angle, 300));
+        }
+    }
+})();

Tests/tilemap/small map.ts

@@ -0,0 +1,66 @@
+/// <reference path="../../Phaser/gameobjects/Tilemap.ts" />
+/// <reference path="../../Phaser/Game.ts" />
+
+(function () {
+
+    var myGame = new Phaser.Game(this, 'game', 800, 600, init, create, update);
+
+    function init() {
+
+        myGame.loader.addTextFile('jsontest', 'assets/maps/multi-layer-test.json');
+        myGame.loader.addImageFile('jsontiles', 'assets/tiles/platformer_tiles.png');
+        myGame.loader.addImageFile('overlay', 'assets/pics/scrollframe.png');
+        myGame.loader.addImageFile('car', 'assets/sprites/car90.png');
+
+        myGame.loader.load();
+
+    }
+
+    var car: Phaser.Sprite;
+    var map: Phaser.Tilemap;
+    var overlay: Phaser.Sprite;
+    var smallCam: Phaser.Camera;
+
+    function create() {
+
+        map = myGame.createTilemap('jsontiles', 'jsontest', Phaser.Tilemap.FORMAT_TILED_JSON);
+
+        car = myGame.createSprite(300, 100, 'car');
+        car.setBounds(0, 0, map.widthInPixels - 32, map.heightInPixels - 32);
+
+        //  Hide the tilemap and car sprite from the main camera (it will still be seen by the smallCam)
+        map.hideFromCamera(myGame.camera);
+        car.hideFromCamera(myGame.camera);
+
+        smallCam = myGame.world.createCamera(32, 32, 352, 240);
+        smallCam.setBounds(0, 0, map.widthInPixels, map.heightInPixels);
+        smallCam.follow(car);
+
+        overlay = myGame.createSprite(0, 0, 'overlay');
+        overlay.hideFromCamera(smallCam);
+
+    }
+
+    function update() {
+
+        car.velocity.x = 0;
+        car.velocity.y = 0;
+		car.angularVelocity = 0;
+
+        if (myGame.input.keyboard.isDown(Phaser.Keyboard.LEFT))
+        {
+            car.angularVelocity = -200;
+        }
+        else if (myGame.input.keyboard.isDown(Phaser.Keyboard.RIGHT))
+        {
+            car.angularVelocity = 200;
+        }
+
+        if (myGame.input.keyboard.isDown(Phaser.Keyboard.UP))
+        {
+            car.velocity.copyFrom(myGame.motion.velocityFromAngle(car.angle, 300));
+        }
+
+    }
+
+})();

build/phaser-092.js

@@ -7384,6 +7384,7 @@ var Phaser;
         function Stage(game, parent, width, height) {
             var _this = this;
             this.clear = true;
+            this.disablePauseScreen = false;
             this.minScaleX = null;
             this.maxScaleX = null;
             this.minScaleY = null;
@@ -7432,15 +7433,18 @@ var Phaser;
             this.context.fillText('Game Size: ' + this.width + ' x ' + this.height, 10, 40);
             this.context.fillText('x: ' + this.x + ' y: ' + this.y, 10, 60);
         };
-        Stage.prototype.visibilityChange = function (event) {
+        Stage.prototype.visibilityChange = //if (document['hidden'] === true || document['webkitHidden'] === true)
+        function (event) {
+            if(this.disablePauseScreen) {
+                return;
+            }
             if(event.type == 'blur' && this._game.paused == false && this._game.isBooted == true) {
                 this._game.paused = true;
                 this.drawPauseScreen();
             } else if(event.type == 'focus') {
                 this._game.paused = false;
             }
-            //if (document['hidden'] === true || document['webkitHidden'] === true)
+        };
-                    };
         Stage.prototype.drawInitScreen = function () {
             this.context.fillStyle = 'rgb(40, 40, 40)';
             this.context.fillRect(0, 0, this.width, this.height);