Saving first iteration of the ScrollZone game object.

Phaser/AnimationManager.ts

@@ -57,6 +57,7 @@ module Phaser {
             {
                 if (this.validateFrames(frames, useNumericIndex) == false)
                 {
+                    throw Error('Invalid frames given to Animation ' + name);
                     return;
                 }
             }
@@ -151,10 +152,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 +169,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/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,6 +28,7 @@
 /// <reference path="gameobjects/Particle.ts" />
 /// <reference path="gameobjects/Sprite.ts" />
 /// <reference path="gameobjects/Tilemap.ts" />
+/// <reference path="gameobjects/ScrollZone.ts" />
 
 /**
 * Phaser - Game
@@ -381,8 +382,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 +398,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, y: number, width: number, height: number): 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/Phaser.csproj

@@ -85,6 +85,10 @@
     <Content Include="gameobjects\Particle.js">
       <DependentUpon>Particle.ts</DependentUpon>
     </Content>
+    <TypeScriptCompile Include="gameobjects\ScrollZone.ts" />
+    <Content Include="gameobjects\ScrollZone.js">
+      <DependentUpon>ScrollZone.ts</DependentUpon>
+    </Content>
     <Content Include="gameobjects\Sprite.js">
       <DependentUpon>Sprite.ts</DependentUpon>
     </Content>
@@ -107,6 +111,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 +162,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 22nd 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/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, y: number, width: number, height: number): 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

@@ -125,7 +125,7 @@ module Phaser {
             return this._cameras.getAll();
         }
 
-        //  Sprites
+        //  Game Objects
 
         //  Drop this?
         public addExistingSprite(sprite: Sprite): Sprite {
@@ -140,21 +140,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, y: number, width: number, height: number): 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/ScrollZone.ts

@@ -0,0 +1,281 @@
+/// <reference path="../Game.ts" />
+/// <reference path="../geom/Quad.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.
+* The image within it is scrolled via the 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, y: number, width: number, height: number) {
+
+            super(game, x, y, width, height);
+
+	        //	Our seamless scrolling quads
+            this._A = new Quad(0, 0, width, height);
+            this._B = new Quad();
+	        this._C = new Quad();
+	        this._D = new Quad();
+
+            this._scroll = new MicroPoint();
+
+            this.offset = new MicroPoint();
+            this.scrollSpeed = new MicroPoint();
+
+            if (this._game.cache.getImage(key))
+            {
+                this._texture = this._game.cache.getImage(key);
+                this.bounds.width = width;
+                this.bounds.height = height;
+                this._sourceWidth = this._texture.width;
+                this._sourceHeight = this._texture.height;
+
+	            // If the Scrolling Zone is BIGGER than the texture then we need to create a repeating pattern DynamicTexture
+	            if (this._texture.width < width || this._texture.height < height)
+	            {
+	                this.createRepeatingTexture();
+	            }
+            }
+
+        }
+
+        private _texture;
+        private _dynamicTexture: DynamicTexture = null;
+
+        private _A: Quad;
+        private _B: Quad;
+        private _C: Quad;
+        private _D: Quad;
+
+        private _scroll: MicroPoint;
+        private _sourceWidth: number;
+        private _sourceHeight: number;
+
+        //  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;
+        private _anchorWidth: number = 0;
+        private _anchorHeight: number = 0;
+        private _inverseWidth: number = 0;
+        private _inverseHeight: number = 0;
+
+        public scrollSpeed: MicroPoint;
+        public offset: MicroPoint;
+
+        public flipped: bool = false;
+
+        public update() {
+
+		    this._scroll.x = Math.round(this._scroll.x + this.scrollSpeed.x);
+		    this._scroll.y = Math.round(this._scroll.y + this.scrollSpeed.y);
+
+		    if (this._scroll.x > this._sourceWidth)
+		    {
+			    this._scroll.x = 0;
+		    }
+
+		    if (this._scroll.x < 0)
+		    {
+			    this._scroll.x = this._sourceWidth;
+		    }
+
+		    if (this._scroll.y > this._sourceHeight)
+		    {
+			    this._scroll.y = 0;
+		    }
+
+		    if (this._scroll.y < 0)
+		    {
+			    this._scroll.y = this._sourceHeight;
+		    }
+
+		    //	Anchor Dimensions
+		    this._anchorWidth = this._sourceWidth - this._scroll.x;
+		    this._anchorHeight = this._sourceHeight - this._scroll.y;
+
+		    if (this._anchorWidth > this.width)
+		    {
+			    this._anchorWidth = this.width;
+		    }
+
+		    if (this._anchorHeight > this.height)
+		    {
+			    this._anchorHeight = this.height;
+		    }
+
+		    this._inverseWidth = this.width - this._anchorWidth;
+		    this._inverseHeight = this.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 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.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);
+
+            if (this._dynamicTexture)
+            {
+		        if (this._A.width !== 0 && this._A.height !== 0)
+		        {
+    	            this._game.stage.context.drawImage(this._dynamicTexture.canvas, this._A.x, this._A.y, this._A.width, this._A.height, this._dx, this._dy, this._A.width, this._A.height);
+		        }
+
+		        if (this._B.width !== 0 && this._B.height !== 0)
+		        {
+			        this._game.stage.context.drawImage(this._dynamicTexture.canvas, this._B.x, this._B.y, this._B.width, this._B.height, this._dx + this._A.width, this._dy, this._B.width, this._B.height);
+		        }
+
+		        if (this._C.width !== 0 && this._C.height !== 0)
+		        {
+			        this._game.stage.context.drawImage(this._dynamicTexture.canvas, this._C.x, this._C.y, this._C.width, this._C.height, this._dx, this._dy + this._A.height, this._C.width, this._C.height);
+		        }
+
+		        if (this._D.width !== 0 && this._D.height !== 0)
+		        {
+			        this._game.stage.context.drawImage(this._dynamicTexture.canvas, this._D.x, this._D.y, this._D.width, this._D.height, this._dx + this._C.width, this._dy + this._A.height, this._D.width, this._D.height);
+		        }
+            }
+            else
+            {
+		        if (this._A.width !== 0 && this._A.height !== 0)
+		        {
+    	            this._game.stage.context.drawImage(this._texture, this._A.x, this._A.y, this._A.width, this._A.height, this._dx, this._dy, this._A.width, this._A.height);
+		        }
+
+		        if (this._B.width !== 0 && this._B.height !== 0)
+		        {
+			        this._game.stage.context.drawImage(this._texture, this._B.x, this._B.y, this._B.width, this._B.height, this._dx + this._A.width, this._dy, this._B.width, this._B.height);
+		        }
+
+		        if (this._C.width !== 0 && this._C.height !== 0)
+		        {
+			        this._game.stage.context.drawImage(this._texture, this._C.x, this._C.y, this._C.width, this._C.height, this._dx, this._dy + this._A.height, this._C.width, this._C.height);
+		        }
+
+		        if (this._D.width !== 0 && this._D.height !== 0)
+		        {
+			        this._game.stage.context.drawImage(this._texture, this._D.x, this._D.y, this._D.width, this._D.height, this._dx + this._C.width, this._dy + this._A.height, this._D.width, this._D.height);
+		        }
+            }
+
+            if (globalAlpha > -1)
+            {
+                this._game.stage.context.globalAlpha = globalAlpha;
+            }
+
+            return true;
+
+        }
+
+        private createRepeatingTexture() {
+
+            //	Work out how many we'll need of the source image to make it tile properly
+            var tileWidth = Math.ceil(this.width / this._sourceWidth) * this._sourceWidth;
+            var tileHeight = Math.ceil(this.height / this._sourceHeight) * this._sourceHeight;
+
+            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();
+
+            this._sourceWidth = tileWidth;
+            this._sourceHeight = tileHeight;
+
+        }
+
+    }
+
+}

Phaser/gameobjects/Tilemap.ts

@@ -1,270 +1,155 @@
 /// <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;
+            //  Loop through the layers
-        public heightInPixels: number = 0;
+            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,58 @@
+/// <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;
+
+        }
+
+
+    }
+
+}

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/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,233 @@
+/// <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;
+
+        }
+
+
+    }
+}

README.md

@@ -1,9 +1,9 @@
 Phaser
 ======
 
-Version 0.9.2
+Version 0.9.3
 
-20th April 2013
+21st April 2013
 
 By Richard Davey, [Photon Storm](http://www.photonstorm.com)
 
@@ -18,6 +18,17 @@ For support post to the Phaser board on the [HTML5 Game Devs forum](http://www.h
 Change Log
 ----------
 
+V0.9.3
+
+* Fixed issues with Group not adding reference to Game to newly created objects.
+* Added more robust frame checking into AnimationManager
+* Re-built Tilemap handling from scratch to allow for proper layered maps (as exported from Tiled / Mappy)
+* Tilemap no longer requires a buffer per Camera (in prep for WebGL support)
+* Added shiftSinTable and shiftCosTable to the GameMath class to allow for quick iteration through the data tables.
+* Added the new ScrollZone game object. Endlessly useful but especially for scrolling backdrops. Created several example tests.
+* Removed the need for DynamicTextures to require a key property and updated test cases.
+
+
 V0.9.2
 
 * Fixed issue with create not being called if there was an empty init method.

Tests/Tests.csproj

@@ -101,6 +101,22 @@
       <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" />
+    <Content Include="scrollzones\parallax.js">
+      <DependentUpon>parallax.ts</DependentUpon>
+    </Content>
+    <Content Include="scrollzones\simple scrollzone.js">
+      <DependentUpon>simple scrollzone.ts</DependentUpon>
+    </Content>
+    <TypeScriptCompile Include="scrollzones\texture repeat.ts" />
+    <Content Include="scrollzones\texture repeat.js">
+      <DependentUpon>texture repeat.ts</DependentUpon>
+    </Content>
     <Content Include="sprites\align.js">
       <DependentUpon>align.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,22 @@
+/// <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() {
+        //  This creates a ScrollZone the size of the game window
+        //  However the source image (balls.png) is only 102x17 so it will automatically create a fill pattern
+        scroller = myGame.createScrollZone('balls', 0, 0, 800, 600);
+        //  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.scrollSpeed.x = myGame.math.shiftSinTable();
+        scroller.scrollSpeed.y = myGame.math.shiftCosTable();
+    }
+})();

Tests/scrollzones/ballscroller.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, update);
+
+    function init() {
+
+        myGame.loader.addImageFile('balls', 'assets/sprites/balls.png');
+
+        myGame.loader.load();
+
+    }
+
+    var scroller: Phaser.ScrollZone;
+
+    function create() {
+
+        //  This creates a ScrollZone the size of the game window
+        //  However the source image (balls.png) is only 102x17 so it will automatically create a fill pattern
+        scroller = myGame.createScrollZone('balls', 0, 0, 800, 600);
+
+        //  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.scrollSpeed.x = myGame.math.shiftSinTable();
+        scroller.scrollSpeed.y = myGame.math.shiftCosTable();
+
+    }
+
+})();

Tests/scrollzones/parallax.js

@@ -0,0 +1,32 @@
+/// <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() {
+        //  In this example we're creating a whole bunch of ScrollZones working on the same image
+        var y = 10;
+        var speed = 6;
+        speed -= 0.3;
+        //	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 < 31; z++) {
+            var zone = myGame.createScrollZone('starray', 0, y, 640, 10);
+            zone.scrollSpeed.setTo(speed, 0);
+            zone.offset.y = y;
+            if(z <= 14) {
+                speed -= 0.3;
+            } else {
+                speed += 0.3;
+            }
+            if(z == 14) {
+                y = 240;
+                speed += 0.3;
+            } else {
+                y += 10;
+            }
+        }
+    }
+})();

Tests/scrollzones/parallax.ts

@@ -0,0 +1,54 @@
+/// <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() {
+
+        //  In this example we're creating a whole bunch of ScrollZones working on the same image
+
+		var y:number = 10;
+		var speed:number = 6;
+			
+		speed -= 0.3;
+			
+		//	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 < 31; z++)
+		{
+            var zone:Phaser.ScrollZone = myGame.createScrollZone('starray', 0, y, 640, 10);
+            zone.scrollSpeed.setTo(speed, 0);
+            zone.offset.y = y;
+				
+			if (z <= 14)
+			{
+				speed -= 0.3;
+			}
+			else
+			{
+				speed += 0.3;
+			}
+					
+			if (z == 14)
+			{
+				y = 240;
+				speed += 0.3;
+			}
+			else
+			{
+				y += 10;
+			}
+		}
+
+    }
+
+})();

Tests/scrollzones/simple scrollzone.js

@@ -0,0 +1,20 @@
+/// <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);
+        //  The speed of the scroll movement
+        scroller.scrollSpeed.x = 4;
+        scroller.scrollSpeed.y = 2;
+        myGame.createSprite(0, 0, 'overlay');
+    }
+})();

Tests/scrollzones/simple scrollzone.ts

@@ -0,0 +1,33 @@
+/// <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);
+
+        //  The speed of the scroll movement
+        scroller.scrollSpeed.x = 4;
+        scroller.scrollSpeed.y = 2;
+
+        myGame.createSprite(0, 0, 'overlay');
+
+    }
+
+})();

Tests/scrollzones/texture repeat.js

@@ -0,0 +1,21 @@
+/// <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/misc/starfield.jpg');
+        myGame.loader.load();
+    }
+    var scroller;
+    var ship;
+    function create() {
+        //  This creates a ScrollZone the size of the game window
+        //  The texture will repeat automatically
+        scroller = myGame.createScrollZone('balls', 0, 0, 800, 600);
+    }
+    function update() {
+        //	Cycle through the wave data and apply it to the scroll speed (causes the circular wave motion)
+        scroller.scrollSpeed.x = myGame.math.shiftSinTable();
+        scroller.scrollSpeed.y = myGame.math.shiftCosTable();
+    }
+})();

Tests/scrollzones/texture repeat.ts

@@ -0,0 +1,36 @@
+/// <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/misc/starfield.jpg');
+
+        myGame.loader.load();
+
+    }
+
+    var scroller: Phaser.ScrollZone;
+    var ship: Phaser.Sprite;
+
+    function create() {
+
+        //  This creates a ScrollZone the size of the game window
+        //  The texture will repeat automatically
+        scroller = myGame.createScrollZone('balls', 0, 0, 800, 600);
+
+
+    }
+
+    function update() {
+
+		//	Cycle through the wave data and apply it to the scroll speed (causes the circular wave motion)
+        scroller.scrollSpeed.x = myGame.math.shiftSinTable();
+        scroller.scrollSpeed.y = myGame.math.shiftCosTable();
+
+    }
+
+})();

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/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);
 
     }