What is wrong with tiled and tilemaps? it does not render and there is no error

Phaser 3
1

Too many hours I have spent researching what is wrong, every line of code I have checked over and over again, I have googled, I can’t find the solution.

In tiled I export the tilemap as JSON, base64 uncompressed, the tilesets embed, I check the name of the tileset, and nothing, just nothing appears, what the heck is wrong?

//assets/plowed_soil.json
{ "compressionlevel":-1,
 "height":32,
 "infinite":false,
 "layers":[
        {
         "compression":"",
         "data":"AAAA.......stripped...",
         "encoding":"base64",
         "height":32,
         "id":1,
         "name":"ground",
         "opacity":1,
         "type":"tilelayer",
         "visible":true,
         "width":32,
         "x":0,
         "y":0
        }],
 "nextlayerid":2,
 "nextobjectid":1,
 "orientation":"orthogonal",
 "renderorder":"right-down",
 "tiledversion":"1.9.2",
 "tileheight":16,
 "tilesets":[
        {
         "columns":6,
         "firstgid":1,
         "image":"plowed_soil.png",
         "imageheight":192,
         "imagewidth":96,
         "margin":0,
         "name":"plowed_soil",
         "spacing":0,
         "tilecount":72,
         "tileheight":16,
         "tilewidth":16
        }],
 "tilewidth":16,
 "type":"map",
 "version":"1.9",
 "width":32
}

//file.ts
import { Scene } from 'phaser';
export class LoadingScene extends Scene {

    constructor() {
        super('loading-scene');
    }
    preload(): void {
        this.load.image('base_tiles', 'assets/plowed_soil.png')
        this.load.tilemapTiledJSON('map', 'assets/plowed_soil.json')
    }



    create(): void {
        console.log('Loading scene was created');

        const map = this.make.tilemap({ key: "map" })
        const tileset = map.addTilesetImage("plowed_soil", "base_tiles") 

        const layer = map.createLayer("ground", tileset)

        this.scene.start('level-1-scene');
    }
}
2

Remove that line.

1 Like
3

OMG!!! , thank you so much!!! , now is working!!, I’m just learning how to use the library.

I still wonder why this line was the problem?, now my scene-1 does not load, where do I call it?

//level-1 .ts

import { Scene } from 'phaser';
export class Level1 extends Scene {
    constructor() {
        super('level-1-scene');
    }
    create(): void {
        console.log("level 1")
    }
}`
4

start()

Shutdown this Scene and run the given one.

You shutdown the scene that was showing the tilemap layer.

Make sure you added all the scenes when creating the game.

1 Like