Really struggling with JSON tilemap

LCA102 · October 25, 2022, 2:26am

Hi

I’m trying to implement a simple tilemap in my game but I’m stuck in Invalid Tilemap Layer ID error.

My code:

        function preload() {
            this.load.image("player", "assets/Texture/TXPlayerFront.png");
            this.load.image("floorTiles", "assets/Texture/TXTilesetGrass.png");
            this.load.image("wallTiles", "assets/Texture/TXTilesetWall.png");
            this.load.tilemapTiledJSON("level1", "assets/Texture/map.json");
        }

        function create() {
            console.log(this.cache.tilemap.get('level1').data)
            this.add.image(200, 200, "player");
            const map = this.make.tilemap("level1")
            const floorTileset = map.addTilesetImage("TXTilesetGrass.png", "floorTiles")
            map.createLayer("floor", floorTileset)
            const wallTileset = map.addTilesetImage("TXTilesetWall.png", "wallTiles")
            map.createLayer("walls", wallTileset)

The console.log is printing this infos:

{
    "layers": [
        {
            "name": "floor",
            "tileset": "TXTilesetGrass.png",
            "data": [...]
        },
        {
            "name": "walls",
            "tileset": "TXTilesetWall.png",
            "data": [...]
        }
    ],
    "tilesets": [
        {
            "name": "TXTilesetGrass.png",
            "imagewidth": 256,
            "imageheight": 256,
            "tilewidth": 32,
            "tileheight": 32
        },
        {
            "name": "TXTilesetWall.png",
            "imagewidth": 512,
            "imageheight": 512,
            "tilewidth": 32,
            "tileheight": 32
        }
    ],
    "canvas": {
        "width": 800,
        "height": 608
    }
}

The JSON file has this infos in “layer”. I used this site to create it Online-Tile-Map-Editor

    "layers": [
        {
            "name": "floor",
            "tileset": "TXTilesetGrass.png",
            "data": [...]
        },
        {
            "name": "walls",
            "tileset": "TXTilesetWall.png",
            "data": [...]
        }
    ]

I can’t get rid of this error.

I have read this. It states that “The layer array index value, or if a string is given”. I’ve tried using map.createLayer(“0”, floorTileset) and map.createLayer(0, floorTileset), still the same error.

Any help? I don’t even know what it means, my JSON doesn’t have any other info.

samme · October 25, 2022, 2:33am

Change to

const map = this.add.tilemap("level1");

LCA102 · October 25, 2022, 7:56pm

Throws another error:

Any clue of what it means?

samme · October 25, 2022, 8:16pm

I’m not sure that map will work if it wasn’t made in Tiled. But you can try adding

"orientation": "",

to the root object of the JSON file.

LCA102 · October 25, 2022, 9:17pm

I created the map using Tiled now, still can’t make it work, same errors as before.

Should I just give up on trying to use JSON? Doesn’t make any sense, I’ve tried a bunch of examples and none of them is working.
I’m using the most recent Phaser.JS downloaded from the website, I’ve tried in a Code Sandbox as well and won’t work either.

Using “name” property;

Using “id” property;

Full Tiled JSON here:

JSON

{ "compressionlevel":-1,
 "height":19,
 "infinite":false,
 "layers":[
        {
         "data":[1, 2, 3, 4, 1, 2, 3, 4, 1, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            9, 10, 11, 12, 9, 10, 11, 12, 9, 10, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 330,
            359, 359, 359, 359, 359, 359, 359, 359, 359, 359, 359, 384, 17, 18, 19, 20, 17, 18, 19, 20, 20, 17, 18, 19, 330,
            359, 359, 359, 359, 359, 359, 359, 359, 359, 359, 359, 376, 25, 26, 27, 28, 25, 26, 27, 28, 28, 25, 26, 27, 330,
            359, 359, 359, 359, 359, 359, 359, 359, 359, 359, 359, 384, 1, 2, 3, 4, 1, 2, 3, 4, 1, 2, 3, 4, 330,
            359, 359, 359, 359, 359, 359, 359, 359, 359, 359, 359, 384, 9, 10, 11, 12, 9, 10, 11, 12, 9, 10, 11, 12, 330,
            17, 18, 19, 20, 17, 18, 19, 20, 17, 18, 19, 20, 17, 18, 19, 20, 17, 18, 19, 20, 17, 18, 19, 20, 330,
            25, 26, 27, 28, 25, 26, 27, 28, 25, 26, 27, 28, 25, 26, 27, 28, 25, 26, 27, 28, 25, 26, 27, 28, 330,
            1, 2, 3, 4, 1, 2, 3, 4, 1, 2, 3, 4, 1, 2, 3, 4, 1, 2, 3, 4, 1, 2, 3, 4, 330,
            9, 10, 11, 12, 9, 10, 11, 12, 9, 10, 11, 12, 9, 10, 11, 12, 9, 10, 11, 12, 9, 10, 11, 12, 330,
            17, 18, 19, 20, 17, 18, 19, 20, 17, 18, 19, 20, 17, 18, 19, 20, 17, 18, 19, 20, 17, 18, 19, 20, 330,
            25, 26, 27, 28, 25, 26, 27, 28, 25, 26, 27, 28, 25, 26, 27, 28, 25, 26, 27, 28, 25, 26, 27, 28, 330,
            1, 2, 3, 4, 1, 2, 3, 4, 1, 2, 3, 4, 1, 2, 3, 4, 1, 2, 3, 4, 1, 2, 3, 4, 330,
            9, 10, 11, 12, 9, 10, 11, 12, 9, 10, 11, 12, 9, 10, 11, 12, 9, 10, 11, 12, 9, 10, 11, 12, 330,
            17, 18, 19, 20, 17, 18, 19, 20, 17, 18, 19, 20, 17, 18, 19, 20, 17, 18, 19, 20, 17, 18, 19, 20, 330,
            25, 26, 27, 28, 25, 26, 27, 28, 25, 26, 27, 28, 25, 26, 27, 28, 25, 26, 27, 28, 25, 26, 27, 28, 330,
            1, 2, 3, 4, 1, 2, 3, 4, 1, 2, 3, 4, 1, 2, 3, 4, 1, 2, 3, 4, 1, 2, 3, 4, 330,
            9, 10, 11, 12, 9, 10, 11, 12, 9, 10, 11, 12, 9, 10, 11, 12, 9, 10, 11, 12, 9, 10, 11, 12, 9,
            17, 18, 19, 20, 17, 18, 19, 20, 17, 18, 19, 20, 17, 18, 19, 20, 17, 18, 19, 20, 17, 18, 19, 20, 17],
         "height":19,
         "id":1,
         "name":"Background",
         "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, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 34, 34, 0, 0, 0, 0, 0, 0, 0, 0, 34, 34, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 34, 34, 0, 0, 0, 0, 0, 0, 0, 0, 34, 34, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 34, 34, 0, 0, 0, 0, 0, 0, 0, 0, 34, 34, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 34, 34, 0, 0, 0, 0, 0, 0, 0, 0, 34, 34, 0,
            34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 0, 0, 34, 34, 0,
            34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 0, 0, 34, 34, 0,
            0, 0, 0, 0, 0, 34, 34, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 34, 34, 0, 0, 34, 34, 0,
            0, 0, 0, 0, 0, 34, 34, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 34, 34, 0, 0, 34, 34, 0,
            0, 0, 0, 0, 0, 34, 34, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 34, 34, 0, 0, 34, 34, 0,
            0, 0, 0, 0, 0, 34, 34, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 34, 34, 0, 0, 34, 34, 0,
            0, 0, 0, 0, 0, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 0,
            0, 0, 0, 0, 0, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 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":19,
         "id":2,
         "name":"Pathing",
         "opacity":1,
         "type":"tilelayer",
         "visible":true,
         "width":25,
         "x":0,
         "y":0
        }, 
        {
         "data":[114, 115, 116, 167, 213, 214, 213, 214, 213, 214, 162, 163, 164, 165, 162, 163, 164, 165, 162, 163, 164, 165, 167, 164, 165,
            130, 131, 132, 183, 229, 230, 229, 230, 229, 230, 178, 179, 180, 181, 178, 179, 180, 181, 178, 179, 180, 181, 183, 180, 181,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 90,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 106,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 122,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 90,
            162, 163, 164, 165, 162, 163, 164, 165, 162, 163, 164, 165, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 106,
            178, 179, 180, 181, 178, 179, 180, 181, 178, 179, 180, 181, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 122,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 90,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 106,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 122,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 90,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 106,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 122,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 90,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 106,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 122,
            162, 163, 164, 165, 162, 163, 164, 165, 162, 163, 164, 165, 162, 163, 164, 165, 162, 163, 164, 165, 162, 163, 164, 165, 165,
            178, 179, 180, 181, 178, 179, 180, 181, 178, 179, 180, 181, 178, 179, 180, 181, 178, 179, 180, 181, 178, 179, 180, 181, 181],
         "height":19,
         "id":3,
         "name":"Walls",
         "opacity":1,
         "type":"tilelayer",
         "visible":true,
         "width":25,
         "x":0,
         "y":0
        }],
 "nextlayerid":4,
 "nextobjectid":1,
 "orientation":"orthogonal",
 "renderorder":"right-down",
 "tiledversion":"1.9.2",
 "tileheight":32,
 "tilesets":[
        {
         "firstgid":1,
         "source":"TXTilesetGrass.tsx"
        }, 
        {
         "firstgid":65,
         "source":"TXTilesetWall.tsx"
        }, 
        {
         "firstgid":321,
         "source":"TXTilesetStoneGround.tsx"
        }],
 "tilewidth":32,
 "type":"map",
 "version":"1.9",
 "width":25
}

Preload and Create code

        function preload() {
            this.load.image("player", "assets/Texture/TXPlayerFront.png");

            this.load.image("floorTiles", "assets/Texture/TXTilesetGrass.png");
            this.load.image("wallTiles", "assets/Texture/TXTilesetWall.png");
            this.load.image("pathTiles", "assets/Texture/TXTilesetStoneGround.png");
            this.load.tilemapTiledJSON("level1", "assets/Texture/testtilemap.json");
        }

        function create() {
            console.log(this.cache.tilemap.get('level1').data)
            this.add.image(200, 200, "player");
            const map = this.make.tilemap("level1")
            const floorTileset = map.addTilesetImage("TXTilesetGrass.png", "floorTiles")
            map.createLayer(1, floorTileset)
            const pathTileset = map.addTilesetImage("TXTilesetStoneGround.png", "pathTiles")
            map.createLayer(2, pathTileset)
            const wallTileset = map.addTilesetImage("TXTilesetWall.png", "wallTiles")
            map.createLayer(3, wallTileset)
        }

akumagamo · October 26, 2022, 7:47am

I assume there are multiple issues:

if on can trust the documentation, you should load the map like this const map = this.make.tilemap({key:"level1"}) setting the key of the Phaser.Types.Tilemaps.MapDataConfig.
When this is done there is an new error

,what made me inspect the json file. And as the error message stated, you have to use emed tileset, so not creating a tileset(aka) out of multiple image (one image per tileset).

I hope this insides can solve your problems.

samme · October 27, 2022, 4:31pm

You need to use either add.tilemap('level1') or make.tilemap({ key: 'level1' }).

akumagamo · October 27, 2022, 6:23pm

Btw.: My point mentioning “collection of Images, will not work” was a wrong assumption, you would just have to embed the tileset in the map

(I could swear, I was not able to select this option, when using “colleciton of images”, but it was a long time ago where I tried this the last time)

Topic		Replies	Views
How do I load in a tilemap from Tiled using Phaser 3? Phaser 3	4	873	December 18, 2018
Json tilemap from tiled not loading Phaser 3	15	6839	April 21, 2020
The tile map does not load Phaser 3	10	845	November 19, 2021
Phaser Tiled Tilemap Parsing error Phaser 3	0	339	March 4, 2021
Phaser doesn't load Json Map(Black Screen) Phaser 3	1	1184	March 30, 2019

Really struggling with JSON tilemap

Related topics