Pixi.js Tiled importer

tilemapper.js

(function(window,PIXI){
	var regenerateCache = function(tilemap){
		var tileset = tilemap.tileset;
		tilemap.cache = {}; // empty cache.
		var x=tileset.margin,y=tileset.margin,row=0,col=0;
		var id= 0;
		while(tileset.margin+row*tileset.spacing+y+tileset.tileheight <=tileset.imageheight){
			x=tileset.margin,col=0;
			while(tileset.margin+col*tileset.spacing+x+tileset.tilewidth <= tileset.imagewidth){
				var bounds = {
					x: x-tileset.tilewidth,
					y: y,
					width: tileset.tilewidth,
					height: tileset.tileheight
				};
				//if(col==0)console.log("Found tile ", id, bounds);
				tilemap.cache[id] = new PIXI.Texture(tilemap._tex,bounds);
				x+=col*tileset.spacing+tileset.tilewidth;
				col+=1;
				id+=1;
			}
			y+=row*tileset.spacing+tileset.tileheight;
			row+=1;
		}
	}
	/** genTestTile()
	 *	Generates randomly colored squares for debugging purpose..
	 */
	var tmpLUT ={};
	var genTestTile= function(tilemap,id){
		tmpLUT[id] || (tmpLUT[id]=Math.round(Math.random()*0xffffff));
		// Dummy
		var t = new PIXI.Graphics(); //new PIXI.Rectangle(0,0,tilemap.map.width,tilemap.map.height);
		t.beginFill(tmpLUT[id]);
		t.moveTo(0,0);
		var w = tilemap.map.tilesets[0].tilewidth,
			h = tilemap.map.tilesets[0].tileheight;
		t.lineTo(w,0);
		t.lineTo(w,h);
		t.lineTo(0,h);
		t.lineTo(0,0);
		t.endFill();
		return t;
	}

	PIXI.TileMap = function(map,crossorigin){
		this.cache={};
		PIXI.EventTarget.call(this); //mixes in event target stuff
		PIXI.DisplayObject.call(this);
		PIXI.DisplayObjectContainer.call(this);
        this.anchor = new PIXI.Point();
        this.blendMode = PIXI.blendModes.NORMAL;

        // load map
		var ml = new PIXI.JsonLoader(map,crossorigin);
		ml.on('loaded',function(data){
			this.map = data.content.json;
			this.tileset = this.map.tilesets[0]; // Only support 1 tileset for now.
			if(!data.content.loaded){ throw new Error("Failed loading map ",map,data)};
			// load tiles
			var tl = new PIXI.ImageLoader(data.content.baseUrl+this.tileset.image,crossorigin);
			tl.on('loaded',function(tdata){
				this._tex = tdata.content.texture;
				regenerateCache(this);
				this.regenerate();
				this.emit({type:'loaded',data:this});
			}.bind(this));
			tl.load();
		}.bind(this));
		ml.load();
		this.renderable=true;

		// Regenerate tiles
		this.regenerate = function(){
			this.children.forEach(function(child){
				this.removeChild(child);
			}.bind(this));
			this.map.layers.forEach(function(layerMap){
				if(layerMap.type === 'tilelayer'){
					var layer = new PIXI.DisplayObjectContainer();
					for(var y=0;y<this.map.height;y++){
						for(var x=0;x<this.map.width;x++){
							var tileId= layerMap.data[y*this.map.width+x];
							if(tileId==0){
								continue; // Skip over empty spaces.
							}
							// Dummy code;
							if(this.cache[tileId]){
								var tile = new PIXI.Sprite(this.cache[tileId]);
								tile.position.x = x * this.map.tilewidth;
								tile.position.y = y * this.map.tileheight;
								layer.addChild(tile);

							}
						}
					}
					this.addChild(layer);
				}
				if(layerMap.type === 'objectgroup'){
					layerMap.objects.forEach(function(o){
						// For now, emit for other logic to handle.
						this.emit({type:'object-loaded',data:{layer:layerMap,object:o}})
					}.bind(this));
				}
			}.bind(this));
			this.updateFrame=true;
		}
	};

	// constructor
	PIXI.TileMap.prototype = Object.create( PIXI.DisplayObjectContainer.prototype );
	PIXI.TileMap.prototype.constructor = PIXI.TileMap;
})(window,PIXI);