Alvin Posted August 28, 2013 Share Posted August 28, 2013 (edited) 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 Link to comment Share on other sites More sharing options...
rich Posted August 28, 2013 Share Posted August 28, 2013 How are you exporting your Tiled map data? Link to comment Share on other sites More sharing options...
Alvin Posted August 28, 2013 Author Share Posted August 28, 2013 (edited) 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 Link to comment Share on other sites More sharing options...
Alvin Posted August 29, 2013 Author Share Posted August 29, 2013 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); } }} Link to comment Share on other sites More sharing options...
Recommended Posts