Trying to make tiled map load in JavaScript using phaser and won't work?

Question

I am trying to use Phaser3 to create a web based game for my course and I am using tiled to create the maps. I have saved the tiled map as a .json file and I can't load the level I designed. The code I am using is from a tutorial as seen below. The problem is it is only showing a black screen when loading and the tilemapTiledJSON function is coming up as an unresolved function instead of working how it should. I am Webstorm for the coding and I am using phaser 3.50.0.

const config = {
    type: Phaser.AUTO, // Which renderer to use
    width: 800, // Canvas width in pixels
    height: 600, // Canvas height in pixels
    parent: "game-container", // ID of the DOM element to add the canvas to
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};

const game = new Phaser.Game(config);

function preload() {
    this.load.image("tiles", "../Assets/Tileset/GB_TileSet_Cemetery_16x16_Sheet.png");
    this.load.tilemapTiledJSON("map", "../Assets/Level/Cemeterymap.json");
}

function create() {
    const map = this.make.tilemap({ key: "map" });

    // Parameters are the name you gave the tileset in Tiled and then the key of the tileset image in
    // Phaser's cache (i.e., the name you used in preload)
    const tileset = map.addTilesetImage("cemetery 5", "tiles");

    // Parameters: layer name (or index) from Tiled, tileset, x, y
    const belowLayer = map.createStaticLayer("Base", tileset, 0, 0);
    const worldLayer = map.createStaticLayer("Base objects", tileset, 0, 0);
    const aboveLayer = map.createStaticLayer("Non Collision objects", tileset, 0, 0);
}

function update(time, delta) {
    // Runs once per frame for the duration of the scene
}

score -1 · Answer 1 · edited Dec 31 '20 at 03:42

Looking at the Phaser3 documentation on loading a tile map json, it could be that you need lights in your system for it to be visible because everything else seems to follow the same conventions as their example documentation.

The only other area you can investigate is double checking where your assets are, aka the .json and .png files, and possibly moving them closer to the directory with the .js file for phaser to remove that as the potential cause of the problem.

Trying to make tiled map load in JavaScript using phaser and won't work?

1 Answers1