How to get tiled json map into phaser? JSON tile map error - Cannot read property '2' of undefined

[rockleaf99]

I've been having a look through the phaser tutorials for json tiled maps and I've noticed that it's not clear on how to create a json tiled map that is 'phaser ready'.

After creating a tiled map in tiled and following the code examples I've been unable to get passed the following error.

Cannot read property '2' of undefined

 

line phaser.js:98679

                    // find the relevant tileset

                    sid = map.tiles[tile.index][2];
                    set = map.tilesets[sid];

version: 2.6.2

 

 

Is there anything obviously wrong with the code or the exported json tile map? 

Maybe there is a special way to export maps from tiled?

Help would be appreciated.

Thanks.

     game = new Phaser.Game(600, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });
    function preload() {

        game.load.tilemap('map', 'assets/map.json', null, Phaser.Tilemap.TILED_JSON);

        game.load.image('tmw_desert_spacing', 'assets/tmw_desert_spacing.png');

    }

    function create() {

        map = game.add.tilemap('map');

        map.addTilesetImage('tmw_desert_spacing');

        layer = map.createLayer('Tile Layer 1');

}

{ "height":14,
 "layers":[
        {
         "data":[0, 0, 0, 40, 40, 40, 40, 40, 40, 40, 40, 0, 0, 0, 0, 0, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 0, 0, 40, 40, 40, 40, 0, 0, 40, 40, 0, 0, 40, 40, 40, 0, 40, 40, 0, 40, 0, 0, 40, 40, 0, 0, 0, 40, 40, 40, 40, 40, 40, 0, 0, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 0, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 0, 40, 0, 40, 40, 40, 0, 40, 40, 40, 40, 40, 40, 40, 0, 40, 0, 40, 0, 40, 40, 40, 40, 40, 0, 40, 40, 40, 0, 40, 40, 0, 40, 0, 40, 40, 0, 40, 0, 40, 40, 40, 0, 0, 40, 40, 40, 0, 40, 40, 40, 40, 40, 40, 40, 40, 0, 0, 40, 40, 40, 40, 40, 40, 40, 40, 40, 0, 0, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 0, 0, 0, 0, 0, 40, 40, 40, 40, 40, 40, 40, 0, 0, 0, 40, 0, 0, 0, 0, 0, 0, 0, 0, 0, 40, 0, 0, 40, 40, 40],
         "height":14,
         "name":"Tile Layer 1",
         "opacity":1,
         "type":"tilelayer",
         "visible":true,
         "width":14,
         "x":0,
         "y":0
        }],
 "nextobjectid":1,
 "orientation":"orthogonal",
 "renderorder":"right-down",
 "tiledversion":"1.0.1",
 "tileheight":32,
 "tilesets":[
        {
         "firstgid":1,
         "source": { "columns":8,
          "image":"tmw_desert_spacing.png",
          "imageheight":199,
          "imagewidth":265,
          "margin":0,
          "name":"tmw_desert_spacing",
          "spacing":0,
          "tilecount":48,
          "tileheight":32,
          "tilewidth":32,
          "type":"tileset"
         }
        }],
 "tilewidth":32,
 "type":"map",
 "version":1,
 "width":14
}

 

[gcardozo]

Hi,

1. Is your tileset "tmw_desert_spacing" and tilemap JSON inside the same folder? Because in your tilemap property "tilesets", looks like it's expecting to be in the same folder: "image":"tmw_desert_spacing.png",
2. I didn't understand what you're trying to achieve here:

   1. sid = map.tiles[tile.index][2];
      set = map.tilesets[sid];

      map.tiles returns the property "tiles" from your tilemap json, and I didn't see any "tiles" property there. If your're trying to get an specific tile, you can do it using:

      1. var tile = map.getTile(x, y, layer, true);

          

Bonus:

//to get the tileset ID (number):
var tilesetID = map.getTilesetIndex("tmw_desert_spacing");

 

[rockleaf99]

6 hours ago, gcardozo said:

Hi,

1. Is your tileset "tmw_desert_spacing" and tilemap JSON inside the same folder? Because in your tilemap property "tilesets", looks like it's expecting to be in the same folder: "image":"tmw_desert_spacing.png",
2. I didn't understand what you're trying to achieve here:

   1. 
      sid = map.tiles[tile.index][2];
      set = map.tilesets[sid];

      map.tiles returns the property "tiles" from your tilemap json, and I didn't see any "tiles" property there. If your're trying to get an specific tile, you can do it using:

      1. 
         var tile = map.getTile(x, y, layer, true);

          

Bonus:

//to get the tileset ID (number):
var tilesetID = map.getTilesetIndex("tmw_desert_spacing");

 

1. The tile set is in the same folder.

 

2. That is the line where the phaser library is failing.

[rockleaf99]

Im using tiled version 1.0.1 which was released june 13th 2017. Maybe phaser does not support the json format of the new tiled?

 

What version of tiled is the norm to use with phaser?

[rockleaf99]

For anyone interested after downgrading tiled to v0.18.2 i got the game to work. 

It seems that phaser does not support json maps that are exported by tiled v1.0.1. 

This was a tricky one as the code was correct, glad I can move on. I think this should be documented somewhere and there could be a schema for the json objects that are accepted by the phasers tile map parser. Unless it already exists?

 tiled download link v0.18.2

[samme]

You need to use the Embed Tileset button.

[sebastomass]

I'm having the same issue. It seems to be the new Tiled update.

Quote

Uncaught TypeError: Cannot read property '2' of undefined
    at Object.parseTiledJSON (phaser.js:100871)
    at Object.parse (phaser.js:100252)
    at new Phaser.Tilemap (phaser.js:96875)
    at Phaser.GameObjectFactory.tilemap (phaser.js:47701)
    at Object.create (main.js:31)
    at Phaser.StateManager.loadComplete (phaser.js:28669)
    at Phaser.Loader.finishedLoading (phaser.js:75664)
    at Phaser.Loader.processLoadQueue (phaser.js:75619)
    at Phaser.Loader.asyncComplete (phaser.js:75691)
    at Phaser.Loader.fileComplete (phaser.js:76574)

 

[sebastomass]

Thanks for the url man!

On 2017-6-27 at 10:35 PM, rockleaf99 said:

tiled download link v0.18.2

 

 

[jsonify]

8 hours ago, samme said:

You need to use the Embed Tileset button.

Can you give a screenshot where this button is located? I'm having a hard time finding it. Thanks.

[samme]

[samme]

phaser-ce/issues/273

[bryantmakesprog]

On 6/28/2017 at 5:01 PM, samme said:

You need to use the Embed Tileset button.

This did the trick for me. Easy to miss

[cdaringe]

i'm using "Embed Tileset" yet the error persists.

maybe tiled exporting is busted?  the map.json output continues to yield:

 "tileheight":16,
 "tilesets":[
        {
         "columns":0,
         "firstgid":1,
         "grid":
            {
             "height":1,
             "orientation":"orthogonal",
             "width":1
            },
         "margin":0,
         "name":"map",
         "spacing":0,
         "tilecount":23,
         "tileheight":382,
         "tiles":
            {
             "10":
                {
                 "image":"assets\/horse_of_spring\/Tile\/Flower\/flower-open.png",
                 "imageheight":73,
                 "imagewidth":43
                },
...

 

Phaser parses this as an ImageCollection, vs a Tileset

[cdaringe]

hmm. i'm looking inside the .tmx file.  even after selecting embed, there doesn't seem to be any metadata indicating as such.

 

 <tileset firstgid="1" name="map" tilewidth="256" tileheight="128" tilecount="1" columns="0">
  <grid orientation="orthogonal" width="1" height="1"/>
  <tile id="0">
   <image width="256" height="128" source="assets/horse_of_spring/Tile/Tile Waterfall/tile-fall_0.png"/>
  </tile>
 </tileset>

 

[t1gor]

Having same issue here.

> ... there doesn't seem to be any metadata indicating as such

 

Do you know what has to be there?

• Phaser v3.15.1
• Tiled v1.2.1