Tiled map - problem with my first attempt

[owen]

I have got a problem with my first attempt at displaying a map which I created with Tiled.  As you can see from the attached screen shot, Phaser seems to have 'added 1' to each tile in the map so it uses the next tile along to the one I specified in Tiled.

 

The code has nothing much in it, just preload and create:

var game = new Phaser.Game(1600, 900, Phaser.AUTO, '', { preload: preload, create: create, update: update });var map;var layer;function preload() {    // preload tileset used in map    game.load.image('tileset', 'assets/tileset1.png', 64, 64);    // preload map    game.load.tilemap('map0', 'assets/map0.json', null, Phaser.Tilemap.TILED_JSON); // loading the tilemap file    }function create() {    map = this.add.tilemap('map0'); // Preloaded tilemap    map.addTilesetImage('tileset'); // Preloaded tileset    layer = map.createLayer('Tile Layer 1');     layer.resizeWorld();     map.setCollisionBetween(0, 100); }function update() {     // nothing here yet until I get the map working!}     

Screenshot from Tiled:

 

Screenshot from output in web page.  Note the tiles are "one off" from the expected.

 

What am I doing wrong?  Thanks!

 

Owen

[Sebi]

Can you attach the json file and the image?

[DazZ]

Does your tilesheet have a slightly too large width? I remember I had this problem and I think I solved it by cutting off the excess width of my tilesheet.

 

Actually just tested and I had the "one off" effect but it went the other way, I solved it by cropping off some unused width.

[Gerben]

Your json file will also have the following paramter: "firstgid":1

Which could also be part of the problem

[lewster32]

This is a commonly encountered problem and is answered here: http://www.html5gamedevs.com/topic/5668-tiled-json-possible-bug/#entry34406

 

You should be able to fix this like so:

map.addTilesetImage('tileset1', 'tileset'); // Preloaded tileset

[owen]

 

This is a commonly encountered problem and is answered here: http://www.html5gamedevs.com/topic/5668-tiled-json-possible-bug/#entry34406

 

You should be able to fix this like so:

map.addTilesetImage('tileset1', 'tileset'); // Preloaded tileset

 

This fixed it.  Thank you!

 

I do have a lot of empty space in my tileset as well, this is because i was planning to fill in the gaps with new tiles as I went along.  But with the above fix it does not seem to matter any more.