# Phaser is not loading the same map created in Tiled software

I have created a sample map using the tiled software. Then tried to load the same on a webpage using phaser.js. But I am not getting the proper result. Is there any mistake in my code or something wrong with the library.

    <!DOCTYPE html>
<html>
<title>Basic Platformer game</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script src="js/phaser.min.js"></script>
<script src="js/phaser.js"></script>

<body>
<div id="phaser-game"></div>
<script type="text/javascript">
(function() {

var game = new Phaser.Game(
800, 600, Phaser.CANVAS, 'phaser-example',

}

var map;
var layer;
var marker;
var player;
var currentTile;
var cursors;
var curser;

function create() {
game.stage.backgroundColor = '#787878';
game.physics.startSystem(Phaser.Physics.P2JS);

currentTile = map.getTile(0, 0);
layer = map.createLayer('Tile Layer 1');

game.physics.p2.enable(player);
player.body.fixedRotation = true;

layer.resizeWorld();

marker.lineStyle(2, 0x000000, 1);
marker.drawRect(0, 0, 20, 20);

cursors = game.input.keyboard.createCursorKeys();
game.camera.follow(player, Phaser.Camera.FOLLOW_LOCKON, 0.1, 0.1);

</script>
</body>
</html>


And the JSON file is-

    { "height":12,
"layers":[
{
"data":[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 106, 107, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 122, 123, 124, 125, 126, 127, 128, 129, 130, 131, 132, 133, 134, 135, 136, 137, 138, 139, 140, 141, 142, 143, 144, 145, 146, 147, 148, 149, 150, 151, 152, 153, 154, 155, 156, 157, 158, 159, 160, 161, 162, 163, 164, 165, 166, 167, 168, 169, 170, 171, 172, 173, 174, 175, 176, 177, 178, 179, 180, 181, 182, 183, 184, 185, 186, 187, 188, 189, 190, 191, 192, 193, 194, 195, 196, 197, 198, 199, 200, 201, 202, 203, 204, 205, 206, 207, 208, 209, 210, 211, 212, 213, 214, 215, 216, 217, 218, 219, 220, 221, 222, 223, 224, 225, 226, 227, 228],
"height":12,
"name":"Tile Layer 1",
"opacity":1,
"type":"tilelayer",
"visible":true,
"width":19,
"x":0,
"y":0
}],
"nextobjectid":1,
"orientation":"orthogonal",
"renderorder":"right-down",
"tileheight":30,
"tilesets":[
{
"columns":19,
"firstgid":1,
"image":"floor2.png",
"imageheight":385,
"imagewidth":592,
"margin":0,
"name":"floor2",
"spacing":0,
"tilecount":228,
"tileheight":30,
"tilewidth":30
}],
"tilewidth":30,
"version":1,
"width":19
}


• See how all the right features seem to be present, but shifted from row to row to make diagonal lines? That's a symptom that your row stride is wrong. If the diagonals travel to the left from one row to the next, your're reading too many tiles from one row, running into the next, so that it starts midway-along when its turn comes, as though it started too early. If the diagonals travel to the right, then you're not reading enough tiles from the row, and some of the leftovers get added to the next row, nudging it over so it starts late. But t's not clear to me where this row size is set/used. Feb 19, 2018 at 22:15
• I have added the files related to the project please do check if there is a mistake I have done in my code or what should I have to add in my code? Feb 22, 2018 at 7:54

Your code by itself looks alright, but it's hard to tell what the problem is without the source images/tilemap files.

Two possibilities come to mind:

1. You have margin/spacing in between of your tiles in the tileset image.
• The fifth and sixth parameter of the "addTilesetImage" need to be set to the margin and spacing in between of your tiles (which you probably already configured in Tiled).
2. The tileset image isn't properly exported from Tiled, and not 32x32.
• Phaser assumes your tiles are 32x32 if you don't pass any dimensions to addTilesetImage and the dimensions are not contained in the json file.

I would've commented to ask for more info / source files, but lack the rep to do so :).

• There is no margin or spacing in between the tileset image and while creating tilemap I have added tile size of 30X30. But this should not affect the map while loading.I have included all source files, please do check. Feb 22, 2018 at 7:51
• Will do, as soon as I'm home! Feb 22, 2018 at 14:47
• @Ashish Any chance you're modifying tile data in any other part than the create? I've recreated your example based on your create function, and even though you seem to load phaser twice (.min.js and .js) it seems to render properly. I also turned it into a (slightly altered to load the mapdata inline) fiddle: jsfiddle.net/u7kqrq5f/1 Feb 22, 2018 at 16:53
• You have loaded the JSON data in a different way, But does it not working by directly loading ? Any idea? Feb 24, 2018 at 3:24
• Yep! Its working !!! The problem was version of phaser. I was using phaser 2.0.4 and now I have changed it to 2.6.2. Thanx man. Feb 27, 2018 at 10:36

At the very bottom of your json file, I see:

"width":19


But when I count the tiles across your floorplan, I get 20.

This off-by-one difference can create the kind of row stride error I described in the comment earlier:

See how all the right features seem to be present, but shifted from row to row to make diagonal lines? That's a symptom that your row stride is wrong.

If the diagonals travel to the left from one row to the next, your're reading too many tiles from one row, running into the next, so that it starts midway-along when its turn comes, as though it started too early.

If the diagonals travel to the right, then you're not reading enough tiles from the row, and some of the leftovers get added to the next row, nudging it over so it starts late.