Tiled and Phaser 3.50.0: Uncaught TypeError: orientation is undefined

Phaser 3
1

I want to include a map built with Tiled (v1.4.3) into my Phaser game. I’ve been following this tutorial. Since I’ve upgraded to Phaser 3.50.0, I get the following error message when I launch my game:

Uncaught TypeError: orientation is undefined

Related to this line:

const map = this.make.tilemap({key: 'tilemap'});

While my tilemap (tilemap.json) has an orientation key, my tileset (standard_tiles.json) doesn’t.

tilemap.json

{ “compressionlevel”:-1,
“editorsettings”:
{
“export”:
{
“format”:“json”,
“target”:“tilemap.json”
}
},
“height”:15,
“infinite”:false,
“layers”:[
{
“data”:[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 617, 618, 618, 618, 618, 618, 618, 618, 618, 618, 618, 618, 618, 618, 618, 618, 618, 618, 618, 618, 618, 618, 618, 618, 619, 671, 672, 672, 672, 672, 672, 672, 672, 672, 672, 672, 672, 672, 672, 672, 672, 672, 672, 672, 672, 672, 672, 672, 672, 673, 725, 726, 726, 726, 726, 726, 726, 726, 726, 726, 726, 726, 726, 726, 726, 726, 726, 726, 726, 726, 726, 726, 726, 726, 727],
“height”:15,
“id”:1,
“name”:“Ground”,
“opacity”:1,
“type”:“tilelayer”,
“visible”:true,
“width”:25,
“x”:0,
“y”:0
},
{
“data”:[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 443, 444, 445, 446, 281, 446, 445, 444, 443, 444, 278, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
“height”:15,
“id”:2,
“name”:“Platform”,
“opacity”:1,
“type”:“tilelayer”,
“visible”:true,
“width”:25,
“x”:0,
“y”:0
}],
“nextlayerid”:3,
“nextobjectid”:1,
“orientation”:“orthogonal”,
“renderorder”:“right-down”,
“tiledversion”:“1.4.3”,
“tileheight”:16,
“tilesets”:[
{
“firstgid”:1,
“source”:“standard_tiles.json”
}],
“tilewidth”:16,
“type”:“map”,
“version”:1.4,
“width”:25
}

standard_tiles.json

{ “columns”:54,
“image”:“base_tiles.png”,
“imageheight”:452,
“imagewidth”:982,
“margin”:2,
“name”:“standard_tiles”,
“spacing”:2,
“tilecount”:1350,
“tiledversion”:“1.4.3”,
“tileheight”:16,
“tilewidth”:16,
“transparentcolor”:"#9cc5d9",
“type”:“tileset”,
“version”:1.4
}

So I thought I’d try adding the key "orientation": "orthogonal" to my standard_tiles.json myself. This ‘worked’, except now, it throws a new error:

Uncaught TypeError: curGroupState.layers is undefined

Any idea what’s causing this? As I’ve said, these errors appeared since I upgraded to Phaser 3.50.0. Is there some incompatibility between the latest versions of Tiled and Phaser?

2

Phaser doesn’t support external tilesets. Make sure to embed the tileset in the tilemap like the tutorial says. If that’s not the problem, this might be a Phaser bug. A minimal example, or even the full stack traces of the errors, would help to identify it.

3

Hi @Telinc1, thank you for replying. I did make sure to embed the tileset before saving it in Tiled.
I’ve posted a MWE below (with an index and mwe.js). I can’t post the full error stack because, as a new member, I’m limited to posting 8 links, and the error stack contains links from the CDN:

Uncaught TypeError: curGroupState.layers is undefined
ParseTileLayers http://cdn.jsdelivr.net/npm/phaser@3.50.0/dist/phaser.js:123547
ParseJSONTiled http://cdn.jsdelivr.net/npm/phaser@3.50.0/dist/phaser.js:122966
Parse http://cdn.jsdelivr.net/npm/phaser@3.50.0/dist/phaser.js:122842
ParseToTilemap http://cdn.jsdelivr.net/npm/phaser@3.50.0/dist/phaser.js:64876
http://cdn.jsdelivr.net/npm/phaser@3.50.0/dist/phaser.js:202224
create http://127.0.0.1:5501/public/mwe.js:27

Is this what you’d need? Happy to open a thread on git with the full error log if you suspect it’s a bug.

Thanks again!

index.html 
<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8" />
    <title>MWE</title>
    <script src="//cdn.jsdelivr.net/npm/phaser@3.50.0/dist/phaser.js"></script>
    <style type="text/css">
        body {
            margin: 0;
        }
    </style>
</head>
<body>

<script type="text/javascript" src="public/mwe.js">
</script>
mwe.js 
/* Global Phaser */

    const config = {
      type: Phaser.AUTO,
      width: 384,
      height: 224,
      pixelArt: true,
      zoom: 1,
      physics: {
        default: 'matter',
        matter: {
          gravity: {y: 1},
          debug: true,
        }
      },
      scene: {
        preload() {
          // Load tileset in PNG and JSON form
          this.load.image('base_tiles', 'assets/base_tiles.png');
          this.load.tilemapTiledJSON('tilemap', 'assets/standard_tiles.json');
        },
        
        create() {
          this.matter.world.setBounds(0, 0, game.config.width, game.config.height);
  
          // Create map
          const map = this.make.tilemap({key: 'tilemap'});
          // // Add the tileset image we are using
          // const tileset = map.addTilesetImage('standard_tiles', 'base_tiles');
        },
        
        update() {

        },
      }
    };

    window.game = new Phaser.Game(config);
4

Is standard_tiles.json the tilemap or the tileset? You have to load the tilemap.

5

This is embarrassing… Thank you very much @Telinc1. Solved my problem. I’m new to this forum, can I somehow upvote your answer?

(FYI, I also had to downgrade Tiled from 1.3.4 to 1.2.2.)

6

Happens to the best of us.

Tiled updates really often change the map format without warning. Phaser usually tries to keep up, but it’s not unusual for bugs to appear. However, I’m surprised that you had to use such an old version. I’ll check if anything has changed too drastically.

You can use the icons at the bottom right of a post to like it or mark it as a solution.

7

Thanks!

Regarding the version, I just picked 1.2.2 because that’s the version that was used in this post. I don’t know if more recent versions would have worked as well.