I created a map/level in JSON with "tiled map editor" which uses a tileset. Fot the JSON file look in the attachment.
Now in code loop through the JSON and try to create the level/map.
Problem is that it renders the same tile and not the different ones.
If I run per layer it's ok (l=1, l<2), If I add the layer loop it renders with only 1 tile...(see attached image, there should be different walls)
I tried several things.
It looks like pixi does create all sprites with same tile?
Many thanks
Raymond
// load json
var level = require('../map/level1.json');
var tileHeight = level.tileheight;
var tileWidth = level.tilewidth;
var layers = level.layers;
var height = level.height;
var width = level.width;
var tileset = PIXI.utils.TextureCache["./images/terrain.png"];
for(var l = 1; l < 5; l++ )
{
// Layer
var data = layers[l].data;
for(var i = 0; i < data.length; i++)
{
// Postition on screen
var y = i / height | 0;
var x = i % width | 0;
// Which tile we should use
if( data[i] != 0) {
var tileRow = (data[i] / 32) | 0;
var tileCol = (data[i] - (tileRow * 32))-1 | 0;
console.log('texture -> row: ' + tileRow + ' col: ' + tileCol + ' width: '+tileWidth+ 'tileHeight: ' + tileHeight);
var rectangle = new PIXI.Rectangle(tileCol*32, tileRow*32, tileWidth, tileHeight); // x, y, w, h
tileset.frame = rectangle;
var layer = new PIXI.Sprite(tileset);
layer.x = x * tileHeight;
layer.y = y * tileWidth;
this._game.stage.addChild(layer);
}
}
}