Tileset working, map coming next.

examples/tilemaps/wip1.php

@@ -10,18 +10,8 @@
 
     function preload() {
 
-        // game.load.image('snes', 'assets/maps/smb_tiles.png');
-        // game.load.tilemap('nes', 'assets/maps/mario1.png', 'assets/maps/mario1.json', null, Phaser.Tilemap.JSON);
-        // game.load.tilemap('snes', 'assets/maps/smb_tiles.png', 'assets/maps/smb_level1.json', null, Phaser.Tilemap.JSON);
-
-        //  Just loads the level data and specifies the format
-        // game.load.tilemap('marioLevel1', 'assets/maps/smb_level1.json', Phaser.Tilemap.JSON);
-
-        //  What about passing in a JSON object though? Need that too. But a CSV would look like a 'string', not an object - how to tell apart from URL?
-        // game.load.tilemap('marioLevel1', SMB_LEVEL_JSON, Phaser.Tilemap.JSON);
-
-        //  Exactly the same as loading a sprite sheet :)
-        game.load.tileset('marioLevel1', 'assets/maps/smb_tiles.png', 32, 32);
+        game.load.tilemap('cybernoidLevel3', 'assets/maps/cybernoid.json', null, Phaser.Tilemap.JSON);
+        game.load.tileset('cybernoidTiles', 'assets/maps/cybernoid.png', 16, 16);
 
     }
 
@@ -33,28 +23,32 @@
 
 
 
-        layer = new Phaser.TilemapLayer(game, 0, 0, 500, 500, [], 'snes');
+        // layer = new Phaser.TilemapLayer(game, 0, 0, 500, 500, [], 'snes');
 
         // layer = new Phaser.TilemapLayer(game, 0, 0, 500, 500);
 
 
         //  layer.load(mapData, tileset);
         //  layer.create(mapWidth, mapHeight, [tileset]);
-        //  layer.updateTileset(key); // can change on the fly
 
-        layer.context.fillStyle = 'rgb(255,0,0)';
-        layer.context.fillRect(0, 0, 200, 300);
+        // layer.updateTileset('cybernoidTiles'); // can change on the fly
+
+
+        // layer.context.fillStyle = 'rgb(255,0,0)';
+        // layer.context.fillRect(0, 0, 200, 300);
+
+        /*
         game.world._container.addChild(layer.sprite);
 
         layer.create(10, 10);
 
-        layer.putTile(2, 2, 1);
-        layer.putTile(3, 2, 1);
-        layer.putTile(4, 2, 1);
-        layer.putTile(5, 2, 1);
-        layer.putTile(4, 6, 1);
+        layer.putTile(0, 0, 3);
+        layer.putTile(0, 1, 4);
+
+        layer.render();
 
         layer.dump();
+        */
     }
 
     function update() {

src/loader/Cache.js

@@ -151,16 +151,14 @@ Phaser.Cache.prototype = {
     * @method Phaser.Cache#addTilemap
     * @param {string} key - The unique key by which you will reference this object.
     * @param {string} url - URL of the tilemap image.
-    * @param {object} data - Tilemap data.
     * @param {object} mapData - The tilemap data object.
     * @param {number} format - The format of the tilemap data.
     */
-    addTilemap: function (key, url, data, mapData, format) {
+    addTilemap: function (key, url, mapData, format) {
 
-        this._tilemaps[key] = { url: url, data: data, spriteSheet: true, mapData: mapData, format: format };
+        this._tilemaps[key] = { url: url, mapData: mapData, format: format };
 
-        PIXI.BaseTextureCache[key] = new PIXI.BaseTexture(data);
-        PIXI.TextureCache[key] = new PIXI.Texture(PIXI.BaseTextureCache[key]);
+        this._tilemaps[key].mapData = Phaser.TilemapParser.parse(this.game, mapData, format);
 
     },
 
@@ -443,7 +441,7 @@ Phaser.Cache.prototype = {
 
         if (this._tilesets[key])
         {
-            return this._tilesets[key];
+            return this._tilesets[key].tileData;
         }
 
         return null;

src/loader/Loader.js

@@ -343,18 +343,24 @@ Phaser.Loader.prototype = {
 	* @param {object} [mapData] - An optional JSON data object (can be given in place of a URL).
 	* @param {string} [format] - The format of the map data.
 	*/
-	tilemap: function (key, tilesetURL, mapDataURL, mapData, format) {
+	tilemap: function (key, mapDataURL, mapData, format) {
 
 		if (typeof mapDataURL === "undefined") { mapDataURL = null; }
 		if (typeof mapData === "undefined") { mapData = null; }
 		if (typeof format === "undefined") { format = Phaser.Tilemap.CSV; }
 
+		if (mapDataURL == null && mapData == null)
+		{
+			console.warn('Phaser.Loader.tilemap - Both mapDataURL and mapData are null. One must be set.');
+			return;
+		}
+
 		if (this.checkKeyExists(key) === false)
 		{
 			//  A URL to a json/csv file has been given
 			if (mapDataURL)
 			{
-				this.addToFileList('tilemap', key, tilesetURL, { mapDataURL: mapDataURL, format: format });
+				this.addToFileList('tilemap', key, mapDataURL, { format: format });
 			}
 			else
 			{
@@ -374,7 +380,7 @@ Phaser.Loader.prototype = {
 						break;
 				}
 
-				this.addToFileList('tilemap', key, tilesetURL, { mapDataURL: null, mapData: mapData, format: format });
+				this.game.cache.addTilemap(key, null, mapData, format);
 
 			}
 		}
@@ -637,7 +643,6 @@ Phaser.Loader.prototype = {
 			case 'spritesheet':
 			case 'textureatlas':
 			case 'bitmapfont':
-			case 'tilemap':
 			case 'tileset':
 				file.data = new Image();
 				file.data.name = file.key;
@@ -701,6 +706,29 @@ Phaser.Loader.prototype = {
 
 				break;
 
+			case 'tilemap':
+				this._xhr.open("GET", this.baseURL + file.url, true);
+				this._xhr.responseType = "text";
+
+				if (file.format == Phaser.Tilemap.JSON)
+				{
+					this._xhr.onload = function () {
+						return _this.jsonLoadComplete(file.key);
+					};
+				}
+				else if (file.format == Phaser.Tilemap.CSV)
+				{
+					this._xhr.onload = function () {
+						return _this.csvLoadComplete(file.key);
+					};
+				}
+
+				this._xhr.onerror = function () {
+					return _this.dataLoadError(file.key);
+				};
+				this._xhr.send();
+				break;
+
 			case 'text':
 				this._xhr.open("GET", this.baseURL + file.url, true);
 				this._xhr.responseType = "text";
@@ -798,8 +826,12 @@ Phaser.Loader.prototype = {
 				this.game.cache.addTileset(file.key, file.url, file.data, file.tileWidth, file.tileHeight, file.tileMax);
 				break;
 
+				/*
 			case 'tilemap':
 
+				file.data = this._xhr.response;
+				this.game.cache.addTilemap(file.key, file.url, file.data, file.format);
+
 				if (file.mapDataURL == null)
 				{
 					this.game.cache.addTilemap(file.key, file.url, file.data, file.mapData, file.format);
@@ -830,6 +862,7 @@ Phaser.Loader.prototype = {
 					this._xhr.send();
 				}
 				break;
+				*/
 
 			case 'textureatlas':
 
@@ -944,7 +977,7 @@ Phaser.Loader.prototype = {
 
 		if (file.type == 'tilemap')
 		{
-			this.game.cache.addTilemap(file.key, file.url, file.data, data, file.format);
+			this.game.cache.addTilemap(file.key, file.url, data, file.format);
 		}
 		else
 		{
@@ -966,7 +999,7 @@ Phaser.Loader.prototype = {
 		var data = this._xhr.response;
 		var file = this._fileList[key];
 
-		this.game.cache.addTilemap(file.key, file.url, file.data, data, file.format);
+		this.game.cache.addTilemap(file.key, file.url, data, file.format);
 
 		this.nextFile(key, true);
 

src/tilemap/Tile.js

@@ -109,7 +109,9 @@ Phaser.Tile.prototype = {
     * @method destroy
     */
     destroy: function () {
-        this.tilemap = null;
+
+        this.tileset = null;
+        
     },
 
     /**

src/tilemap/TilemapLayer.js

@@ -44,7 +44,10 @@ Phaser.TilemapLayer = function (game, x, y, renderWidth, renderHeight, mapData,
     /**
     * @property {Description} tileset - Description.
     */
-    this.tileset = tileset;
+    this.tileset = null;
+
+    this.tileWidth = 0;
+    this.tileHeight = 0;
 
     this.widthInTiles = 0;
     this.heightInTiles = 0;
@@ -52,6 +55,78 @@ Phaser.TilemapLayer = function (game, x, y, renderWidth, renderHeight, mapData,
     this.renderWidth = renderWidth;
     this.renderHeight = renderHeight;
 
+    /**
+    * @property {number} _ga - Local render loop var to help avoid gc spikes.
+    * @private 
+    */
+    this._ga = 1;
+    
+    /**
+    * @property {number} _dx - Local render loop var to help avoid gc spikes.
+    * @private 
+    */
+    this._dx = 0;
+    
+    /**
+    * @property {number} _dy - Local render loop var to help avoid gc spikes.
+    * @private 
+    */
+    this._dy = 0;
+    
+    /**
+    * @property {number} _dw - Local render loop var to help avoid gc spikes.
+    * @private 
+    */
+    this._dw = 0;
+    
+    /**
+    * @property {number} _dh - Local render loop var to help avoid gc spikes.
+    * @private 
+    */
+    this._dh = 0;
+    
+    /**
+    * @property {number} _tx - Local render loop var to help avoid gc spikes.
+    * @private 
+    */
+    this._tx = 0;
+    
+    /**
+    * @property {number} _ty - Local render loop var to help avoid gc spikes.
+    * @private 
+    */
+    this._ty = 0;
+    
+    /**
+    * @property {number} _tl - Local render loop var to help avoid gc spikes.
+    * @private 
+    */
+    this._tl = 0;
+    
+    /**
+    * @property {number} _maxX - Local render loop var to help avoid gc spikes.
+    * @private 
+    */
+    this._maxX = 0;
+    
+    /**
+    * @property {number} _maxY - Local render loop var to help avoid gc spikes.
+    * @private 
+    */
+    this._maxY = 0;
+    
+    /**
+    * @property {number} _startX - Local render loop var to help avoid gc spikes.
+    * @private 
+    */
+    this._startX = 0;
+    
+    /**
+    * @property {number} _startY - Local render loop var to help avoid gc spikes.
+    * @private 
+    */
+    this._startY = 0;
+
 };
 
 Phaser.TilemapLayer.prototype = {
@@ -96,6 +171,109 @@ Phaser.TilemapLayer.prototype = {
 
     },
 
+    updateTileset: function (tileset) {
+
+        this.tileset = this.game.cache.getTileset(tileset);
+        this.tileWidth = this.tileset.tileWidth;
+        this.tileHeight = this.tileset.tileHeight;
+
+    },
+
+    render: function () {
+
+        if (this.visible == false)
+        {
+            return;
+        }
+
+        //  Work out how many tiles we can fit into our canvas and round it up for the edges
+        this._maxX = this.game.math.ceil(this.canvas.width / this.tileWidth) + 1;
+        this._maxY = this.game.math.ceil(this.canvas.height / this.tileHeight) + 1;
+
+        //  And now work out where in the tilemap the camera actually is
+        this._startX = this.game.math.floor(this.game.camera.x / this.tileWidth);
+        this._startY = this.game.math.floor(this.game.camera.y / this.tileHeight);
+
+        //  Tilemap bounds check
+        if (this._startX < 0)
+        {
+            this._startX = 0;
+        }
+
+        if (this._startY < 0)
+        {
+            this._startY = 0;
+        }
+
+        if (this._maxX > this.widthInTiles)
+        {
+            this._maxX = this.widthInTiles;
+        }
+
+        if (this._maxY > this.heightInTiles)
+        {
+            this._maxY = this.heightInTiles;
+        }
+
+        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 = -(this.game.camera.x - (this._startX * this.tileWidth));
+        this._dy = -(this.game.camera.y - (this._startY * this.tileHeight));
+
+        this._tx = this._dx;
+        this._ty = this._dy;
+
+        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+
+        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.tileset.checkTileIndex(this._columnData[tile]))
+                {
+                    this.context.drawImage(
+                        this.tileset.image,
+                        this.tileset.tiles[this._columnData[tile]].x,
+                        this.tileset.tiles[this._columnData[tile]].y,
+                        this.tileWidth,
+                        this.tileHeight,
+                        this._tx,
+                        this._ty,
+                        this.tileWidth,
+                        this.tileHeight
+                    );
+                }
+
+                this._tx += this.tileWidth;
+
+            }
+
+            this._tx = this._dx;
+            this._ty += this.tileHeight;
+        }
+
+        //  Only needed if running in WebGL, otherwise this array will never get cleared down I don't think!
+        if (this.game.renderType == Phaser.WEBGL)
+        {
+            PIXI.texturesToUpdate.push(this.baseTexture);
+        }
+
+        return true;
+
+    },
+
+
     dump: function () {
 
         var txt = '';

src/tilemap/TilemapParser.js

@@ -1,16 +1,5 @@
 Phaser.TilemapParser = {
 
-	/**
-	* Parse a Sprite Sheet and extract the animation frame data from it.
-	*
-	* @method Phaser.AnimationParser.spriteSheet
-	* @param {Phaser.Game} game - A reference to the currently running game.
-	* @param {string} key - The Game.Cache asset key of the Sprite Sheet image.
-	* @param {number} frameWidth - The fixed width of each frame of the animation.
-	* @param {number} frameHeight - The fixed height of each frame of the animation.
-	* @param {number} [frameMax=-1] - The total number of animation frames to extact from the Sprite Sheet. The default value of -1 means "extract all frames".
-	* @return {Phaser.FrameData} A FrameData object containing the parsed frames.
-	*/
 	tileset: function (game, key, tileWidth, tileHeight, tileMax) {
 
 	    //  How big is our image?
@@ -54,7 +43,7 @@ Phaser.TilemapParser = {
 	    var x = 0;
 	    var y = 0;
 
-	    var tileset = new Phaser.Tileset(key, tileWidth, tileHeight);
+	    var tileset = new Phaser.Tileset(img, key, tileWidth, tileHeight);
 
 	    for (var i = 0; i < total; i++)
 	    {
@@ -73,47 +62,110 @@ Phaser.TilemapParser = {
 
 	},
 
+	parse: function (game, data, format) {
+
+		if (format == Phaser.Tilemap.CSV)
+		{
+			return this.parseCSV(data);
+		}
+		else if (format == Phaser.Tilemap.TILED_JSON)
+		{
+			return this.parseTiledJSON(data);
+		}
+
+	},
+
 	/**
 	* Parse csv map data and generate tiles.
 	* 
 	* @method Phaser.Tilemap.prototype.parseCSV
 	* @param {string} data - CSV map data.
-	* @param {string} key - Asset key for tileset image.
-	* @param {number} tileWidth - Width of its tile.
-	* @param {number} tileHeight - Height of its tile.
 	*/
-	parseCSV: function (data, key, tileWidth, tileHeight) {
-
-	    // var layer = new Phaser.TilemapLayer(this, 0, key, Phaser.Tilemap.CSV, 'TileLayerCSV' + this.layers.length.toString(), tileWidth, tileHeight);
+	parseCSV: function (data) {
 
 	    //  Trim any rogue whitespace from the data
 	    data = data.trim();
 
+	    var output = [];
+
 	    var rows = data.split("\n");
 
 	    for (var i = 0; i < rows.length; i++)
 	    {
+	    	output[i] = [];
+
 	        var column = rows[i].split(",");
 
-	        if (column.length > 0)
+	        for (var c = 0; c < column.length; c++)
 	        {
-	            // layer.addColumn(column);
+	            output[i][c] = parseInt(column[c]);
 	        }
 	    }
 
-	    // layer.updateBounds();
-	    // layer.createCanvas();
+	    return [{ name: 'csv', alpha: 1, visible: true, tileMargin: 0, tileSpacing: 0, data: output }];
 
-	    // var tileQuantity = layer.parseTileOffsets();
+	},
 
-	    // this.currentLayer = layer;
-	    // this.collisionLayer = layer;
-	    // this.layers.push(layer);
+	/**
+	* Parse JSON map data and generate tiles.
+	* 
+	* @method Phaser.Tilemap.prototype.parseTiledJSON
+	* @param {string} data - JSON map data.
+	* @param {string} key - Asset key for tileset image.
+	*/
+	parseTiledJSON: function (json) {
 
-	    // this.width = this.currentLayer.widthInPixels;
-	    // this.height = this.currentLayer.heightInPixels;
+		var layers = [];
 
-	    // this.generateTiles(tileQuantity);
+	    for (var i = 0; i < json.layers.length; i++)
+	    {
+	        //  Check it's a data layer
+	        if (!json.layers[i].data)
+	        {
+	            continue;
+	        }
+
+			//	json.tilewidth
+			//	json.tileheight
+
+	        var layer = {
+
+		        name: json.layers[i].name,
+		        alpha: json.layers[i].opacity,
+		        visible: json.layers[i].visible,
+		        tileMargin: json.tilesets[0].margin,
+		        tileSpacing: json.tilesets[0].spacing
+
+	        };
+
+	        var output = [];
+	        var c = 0;
+	        var row;
+
+	        for (var t = 0; t < json.layers[i].data.length; t++)
+	        {
+	            if (c == 0)
+	            {
+	                row = [];
+	            }
+
+	            row.push(json.layers[i].data[t]);
+	            c++;
+
+	            if (c == json.layers[i].width)
+	            {
+	            	output.push(row);
+	                // layer.addColumn(row);
+	                c = 0;
+	            }
+	        }
+
+	        layers.data = output;
+	        this.layers.push(layer);
+
+	    }
+
+	    return layers;
 
 	}
 

src/tilemap/Tileset.js

@@ -1,15 +1,17 @@
 
-Phaser.Tileset = function (key, tileWidth, tileHeight) {
+Phaser.Tileset = function (image, key, tileWidth, tileHeight) {
 
     /**
     * @property {string} key - The cache ID.
     */
     this.key = key;
 
-    this.tilewidth = tileWidth;
+    this.image = image;
+
+    this.tileWidth = tileWidth;
     this.tileHeight = tileHeight;
 
-    this._tiles = [];
+    this.tiles = [];
 
 }
 
@@ -17,7 +19,7 @@ Phaser.Tileset.prototype = {
 
     addTile: function (tile) {
 
-        this._tiles.push(tile);
+        this.tiles.push(tile);
 
         return tile;
 
@@ -25,13 +27,21 @@ Phaser.Tileset.prototype = {
 
     getTile: function (index) {
 
-        if (this._tiles[index])
+        if (this.tiles[index])
         {
-            return this._tiles[index];
+            return this.tiles[index];
         }
 
         return null;
 
+    },
+
+    checkTileIndex: function (index) {
+
+    	console.log('checking tile', index);
+
+    	return (this.tiles[index]);
+
     }
 
 }
@@ -44,7 +54,7 @@ Phaser.Tileset.prototype = {
 Object.defineProperty(Phaser.Tileset.prototype, "total", {
 
     get: function () {
-        return this._ties.length;
+        return this.tiles.length;
     }
 
 });