rockleaf99

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

Recommended Posts

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
}

 

tmw_desert_spacing.png

Share this post


Link to post
Share on other sites

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");

 

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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)

 

Share this post


Link to post
Share on other sites

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

Screen Shot 2018-09-01 at 1.01.11 PM.png

Share this post


Link to post
Share on other sites

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>

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.