Weird Tilemap rendering

[Alvin]

Hello,

 

I'm encountering a weird bug when I try to render a tiledmap (exported from Tiled) using Phaser :

 

 

I've just modified the Phaser test suites and included my files to make sure that it wasn't a problem from my code and I still get the same problem.

 

I've tested with the 095, 097, and 1.0TS083 test suites.

 

This is what the map should look like :

 

 

 

You can find the files causing problems here : http://www.webeled.com/debug/weirdmap.zip

 

Thanks

Edited August 28, 2013 by webeled

[rich]

How are you exporting your Tiled map data?

[Alvin]

Hi,

 

I'm using the basic export feature of Tiled :

 

 menu->file-> export as -> and I choose json in the explorer dropdown.

Edited August 29, 2013 by webeled

[Alvin]

I dont know if it can help, but before using Phaser I was using an EaselJs-based renderer which works well with both isometric and orthogonal json files.

 

So just in case here is the code :

window.onload = function(){	// json map data at the end of this file for ease of understanding (created on Tiled map editor)	mapData = mapDataJson;	// creating EaselJS stage	stage = new createjs.Stage("canvas");	// create EaselJS image for tileset	tileset = new Image();	// getting imagefile from first tileset	tileset.src = mapData.tilesets[0].image;	// callback for loading layers after tileset is loaded	tileset.onLoad = initLayers();}// loading layersfunction initLayers() {	// compose EaselJS tileset from image (fixed 64x64 now, but can be parametized)	var imageData = {		images : [ tileset ],		frames : {			width : 64,			height : 64		}	};	// create spritesheet	var tilesetSheet = new createjs.SpriteSheet(imageData);		// loading each layer at a time	for (var idx = 0; idx < mapData.layers.length; idx++) {		var layerData = mapData.layers[idx];		initLayer(layerData, tilesetSheet, mapData.tilewidth, mapData.tileheight);	}	// stage updates (not really used here)	createjs.Ticker.setFPS(20);	createjs.Ticker.addListener(stage);}// layer initializationfunction initLayer(layerData, tilesetSheet, tilewidth, tileheight) {	for ( var y = 0; y < layerData.height; y++) {		for ( var x = 0; x < layerData.width; x++) {			// create a new Bitmap for each cell			var cellBitmap = new createjs.BitmapAnimation(tilesetSheet);			// layer data has single dimension array			var idx = x + y * layerData.width;			// tilemap data uses 1 as first value, EaselJS uses 0 (sub 1 to load correct tile)			cellBitmap.gotoAndStop(layerData.data[idx] - 1);			cellBitmap.x = x * tilewidth;			cellBitmap.y = y * tileheight;			// add bitmap to stage			stage.addChild(cellBitmap);		}	}}