Tiled json possible bug?

[rpiller]

I've had this happen to me twice now and it makes no sense. I use the json format from Tiled with 3 layers. Whenever I load a new map the map has tiles in all the wrong place. Then I comment out each layer but 1 and run the game and it looks fine. Then I uncomment the second layer and then it looks fine, then I comment out the last layer and it looks fine. From then on everything looks fine. So for some strange reason the first time I load a new map with all 3 layers showing the map isn't right.

 

 

function preload() {    game.load.tilemap('map', 'content/maps/Test01.json', null, Phaser.Tilemap.TILED_JSON);    game.load.image('tileset1', 'content/images/tileset.png', 32, 32);    game.load.spritesheet('player', 'content/images/test.png', 24, 32, 12);}function create() {    game.physics.startSystem(Phaser.Physics.P2JS);    // create map    map = game.add.tilemap('map');    map.addTilesetImage('tileset1');    layer1 = map.createLayer('Ground');    layer1.resizeWorld();    layer2 = map.createLayer('Object');    layer2.resizeWorld();    layer3 = map.createLayer('Foreground');    layer3.resizeWorld();}

 

[rich]

Do you test it with Chrome DevTools open? (or similar for FF, IE, etc). If not try it, as it will ensure the browser cache isn't used - would be curious to see what happens then. I'd expect it to be more consistent at any rate.

 

Needless to say there's nothing logical about what you're seeing happen, so I reckon it's either cache or race condition related, but hard to determine which atm.

[rpiller]

I use VS and I build with chrome where I have the Icongnito switch enabled so no chaching can happen so it can't be that. I'll have to check out Chrome DevTools as I don't know what that is. Maybe race condition though?

[rich]

Possibly, something like the json is parsed out of sync and create is running on it - although I'd expect a whole butt load of errors in that case, not just a scrambled tile index, as the whole json object itself wouldn't yet exist (or would be corrupted). Easy enough to test - stick a debug into the Phaser TilemapParser function and one in your create function. If the create ever happens before the parser then that's the issue. Although I'm dubious it is in this case.

[Massemassimo]

Ok so I had troubles with the tilesets because I copy/pasted some tutorial (can't find it right now) which used the following syntax:

this.map.addTilesetImage('tile-image');

where 'tile-image' is the image of the tile (doh).

 

Turns out using the "official syntax"

this.map.addTilesetImage('tileset-name', 'tile-image');

where 'tileset-name' (again: doh) is the name if the tileset as specified in tiled fixed it for me.

 

You can check it in your json-file under

"tilesets":[{..."name": "tileset-name",...

See if that fixes it maybe?

[Cryptonomicon]

I have the same problem. Tiles off by one  +1  but cant see where it is coming from

[Cryptonomicon]

A little bit more on this one.

 

The image is also a little short in the x direction.    It is like an index is starting at 1 when it should be starting at zero.

 

With some test data I placed in the top left hand corner - which should be an upside down V shape  mountain top - I am seeing the next tile over.

 

The tiled image number is "4" corresponding to the fourth tile - counting using a 1 based index.  Phaser is showing the fifth image which would be array index 4 using zero based indexing.

 

Also the image is a few pixels short.  It is as if phaser is drawing pixels from 1 to 31 instead of 0 to 31.

 

Is it possible that the indexing has gotten mixed up?  one of them should start at zero and the other at one?

 

I suppose the real question is what does the tiled ** cough ** spec say.

 

 

I s'pose the only other bit of relevant data is that I have a totally clean install - Sunday night of both phaser and tiled.  Phaser is a github install Tiled the windows installer.

 

 

Test images below.

 

 

What I am seeing is

 

 

What I should be seeing (minus the the lines - I think that is tiled)

 

 

the tile map

 

     

 

As it appears in tiled

 

  

 

The json file (The test tile is the first one - id 4 )

 

{ "height":20,
 "layers":[
        {
         "data":[4, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 3, 4, 5, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 3, 9, 16, 11, 5, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 3, 9, 16, 16, 16, 11, 5, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 3, 4, 5, 25, 25, 25, 25, 3, 9, 16, 16, 16, 16, 16, 11, 5, 3, 4, 5, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 3, 9, 16, 11, 12, 25, 25, 3, 9, 16, 16, 16, 16, 16, 16, 16, 11, 9, 16, 11, 5, 25, 25, 25, 25, 25, 25, 25, 25, 3, 9, 16, 16, 16, 11, 12, 3, 9, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 11, 5, 25, 25, 25, 8, 4, 5, 3, 9, 16, 16, 16, 16, 16, 11, 9, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 11, 5, 25, 3, 9, 16, 11, 9, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 11, 5, 9, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 11, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16],
         "height":20,
         "name":"background",
         "opacity":1,
         "type":"tilelayer",
         "visible":true,
         "width":30,
         "x":0,
         "y":0
        },
        {
         "height":20,
         "name":"platforms",
         "objects":[
                {
                 "height":26,
                 "name":"",
                 "properties":
                    {

                    },
                 "type":"",
                 "visible":true,
                 "width":356,
                 "x":37,
                 "y":195
                }],
         "opacity":1,
         "type":"objectgroup",
         "visible":false,
         "width":30,
         "x":0,
         "y":0
        }],
 "orientation":"orthogonal",
 "properties":
    {

    },
 "tileheight":32,
 "tilesets":[
        {
         "firstgid":1,
         "image":"..\/..\/artwork\/foreboding1.png",
         "imageheight":160,
         "imagewidth":192,
         "margin":0,
         "name":"foreboding1",
         "properties":
            {

            },
         "spacing":0,
         "tileheight":32,
         "tilewidth":32
        }],
 "tilewidth":32,
 "version":1,
 "width":30
}

[Cryptonomicon]

On more investigation there seems to be two parts to this.   The first is from line 243 onward in TilemapParser.js.  There appears to be a need to subtract one from json.layers.data[t]  when it is passed to new Phaser.Tile(layer, json.layers.data[t], x, output.length, json.tilewidth, json.tileheight).

 

The second seems to be a separate error. A pixel appears to be getting dropped somewhere.

 

 

            //  Loop through the data field in the JSON.

            //  This is an array containing the tile indexes, one after the other. null = no tile, everything else = the tile index (starting at 1 for Tiled, 0 for CSV)
            //  If the map contains multiple tilesets then the indexes are relative to that which the set starts from.
            //  Need to set which tileset in the cache = which tileset in the JSON, if you do this manually it means you can use the same map data but a new tileset.

            for (var t = 0, len = json.layers.data.length; t < len; t++)
            {
                //  index, x, y, width, height
                if (json.layers.data[t] > 0)
                {
                    row.push(new Phaser.Tile(layer, json.layers.data[t], x, output.length, json.tilewidth, json.tileheight));
                }
                else
                {
                    row.push(null);
                }

[rich]

Ok there are 2 issues here, but the main one is that you're not declaring the tileset correctly. Look at the following code:

var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create });function preload() {    game.load.tilemap('map', 'wip/testing.json', null, Phaser.Tilemap.TILED_JSON);    game.load.image('tiles', 'wip/foreboding1.png');}function create() {    var map = game.add.tilemap('map');    //  In the Tiled JSON file, the tileset name is 'foreboding1'    //  In Phaser the cache key is 'tiles'    //  Here is how to pair them up correctly:    map.addTilesetImage('foreboding1', 'tiles');    //  If you don't give the correct Tiled tileset name (as below) you get weird results.    //  Un-comment it to see.    // map.addTilesetImage('tiles');    var layer = map.createLayer('Tile Layer 1');}

Look at this grab from Tiled:

 

 

The Tileset name is on the top of the tab. It must match your Phaser code. The only time you can give 1 parameter to map.addTilesetImage is when you have used the exact same Phaser Cache key as you've got tileset name in Tiled (in the example above I've not done this to make it hopefully more clear).

 

If you use the correct tileset name, voila:

 

 

And if you don't:

 

 

Look familiar?

 

Also the 1px issue you're seeing is because of your tileset image, not Phaser. Here is a zoomed-in grab of the bottom of your png:

 

[lenlac]

this thread was very helpful. The answer fixed my issue, thanks.