Promoted the Tilemap to a DisplayObject and vastly simplified the load process.

src/loader/Cache.js

@@ -47,6 +47,12 @@ Phaser.Cache = function (game) {
      */
     this._text = {};
 
+    /**
+     * Tilemap key-value container.
+     * @type {object}
+     */
+    this._tilemaps = {};
+
     this.addDefaultImage();
 
     this.onSoundUnlock = new Phaser.Signal;
@@ -100,6 +106,22 @@ Phaser.Cache.prototype = {
 
     },
 
+    /**
+     * Add a new tilemap.
+     * @param key  {string} Asset key for the texture atlas.
+     * @param url  {string} URL of this texture atlas file.
+     * @param data {object} Extra texture atlas data.
+     * @param atlasData {object} Texture atlas frames data.
+     */
+    addTilemap: function (key, url, data, mapData, format) {
+
+        this._tilemaps[key] = { url: url, data: data, spriteSheet: true, mapData: mapData, format: format };
+
+        PIXI.BaseTextureCache[key] = new PIXI.BaseTexture(data);
+        PIXI.TextureCache[key] = new PIXI.Texture(PIXI.BaseTextureCache[key]);
+
+    },
+
     /**
      * Add a new texture atlas.
      * @param key  {string} Asset key for the texture atlas.
@@ -315,6 +337,21 @@ Phaser.Cache.prototype = {
         return null;
     },
 
+    /**
+    * Get tilemap data by key.
+    * @param key Asset key of the tilemap you want.
+    * @return {object} The tilemap data. The tileset image is in the data property, the map data in mapData.
+    */
+    getTilemap: function (key) {
+
+        if (this._tilemaps[key])
+        {
+            return this._tilemaps[key];
+        }
+
+        return null;
+    },
+
 	/**
 	* Get frame data by key.
 	* @param key Asset key of the frame data you want.

src/loader/Loader.js

@@ -217,6 +217,52 @@ Phaser.Loader.prototype = {
 
 	},
 
+	/**
+	* Add a new tilemap loading request.
+	* @param key {string} Unique asset key of the tilemap data.
+	* @param tilesetURL {string} The url of the tile set image file.
+	* @param [mapDataURL] {string} The url of the map data file (csv/json)
+	* @param [mapData] {object} An optional JSON data object (can be given in place of a URL).
+	* @param [format] {string} The format of the map data.
+	*/
+	tilemap: function (key, tilesetURL, mapDataURL, mapData, format) {
+
+		if (typeof mapDataURL === "undefined") { mapDataURL = null; }
+		if (typeof mapData === "undefined") { mapData = null; }
+		if (typeof format === "undefined") { format = Phaser.Tilemap.CSV; }
+
+		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 });
+			}
+			else
+			{
+				switch (format)
+				{
+					//  A csv string or object has been given
+					case Phaser.Tilemap.CSV:
+						break;
+
+					//  An xml string or object has been given
+					case Phaser.Tilemap.JSON:
+
+						if (typeof mapData === 'string')
+						{
+							mapData = JSON.parse(mapData);
+						}
+						break;
+				}
+
+				this.addToFileList('tilemap', key, tilesetURL, { mapDataURL: null, mapData: mapData, format: format });
+
+			}
+		}
+
+	},
+
 	/**
 	* Add a new bitmap font loading request.
 	* @param key {string} Unique asset key of the bitmap font.
@@ -437,6 +483,7 @@ Phaser.Loader.prototype = {
 			case 'spritesheet':
 			case 'textureatlas':
 			case 'bitmapfont':
+			case 'tilemap':
 				file.data = new Image();
 				file.data.name = file.key;
 				file.data.onload = function () {
@@ -572,14 +619,50 @@ Phaser.Loader.prototype = {
 		switch (file.type)
 		{
 			case 'image':
+
 				this.game.cache.addImage(file.key, file.url, file.data);
 				break;
 
 			case 'spritesheet':
+
 				this.game.cache.addSpriteSheet(file.key, file.url, file.data, file.frameWidth, file.frameHeight, file.frameMax);
 				break;
 
+			case 'tilemap':
+
+				if (file.mapDataURL == null)
+				{
+					this.game.cache.addTilemap(file.key, file.url, file.data, file.mapData, file.format);
+				}
+				else
+				{
+					//  Load the JSON or CSV before carrying on with the next file
+					loadNext = false;
+					this._xhr.open("GET", this.baseURL + file.mapDataURL, 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 'textureatlas':
+
 				if (file.atlasURL == null)
 				{
 					this.game.cache.addTextureAtlas(file.key, file.url, file.data, file.atlasData, file.format);
@@ -612,6 +695,7 @@ Phaser.Loader.prototype = {
 				break;
 
 			case 'bitmapfont':
+
 				if (file.xmlURL == null)
 				{
 					this.game.cache.addBitmapFont(file.key, file.url, file.data, file.xmlData);
@@ -686,7 +770,29 @@ Phaser.Loader.prototype = {
 		var data = JSON.parse(this._xhr.response);
 		var file = this._fileList[key];
 
-		this.game.cache.addTextureAtlas(file.key, file.url, file.data, data, file.format);
+		if (file.type == 'tilemap')
+		{
+			this.game.cache.addTilemap(file.key, file.url, file.data, data, file.format);
+		}
+		else
+		{
+			this.game.cache.addTextureAtlas(file.key, file.url, file.data, data, file.format);
+		}
+
+		this.nextFile(key, true);
+
+	},
+
+	/**
+	 * Successfully loaded a CSV file.
+	 * @param key {string} Key of the loaded CSV file.
+	 */
+	csvLoadComplete: function (key) {
+
+		var data = this._xhr.response;
+		var file = this._fileList[key];
+
+		this.game.cache.addTilemap(file.key, file.url, file.data, data, file.format);
 
 		this.nextFile(key, true);