Phaser not loading multiple createLayer - phaser-framework

Question

I am creating a small Phaser arcade game using Tiled for the map. My maps loads the ground asset however I am not able to load the platforms for some reason. I followed this tutorial :https://phaser.io/examples/v3/view/tilemap/multiple-tilesets but still only the ground tiles are rendered without the platforms. What am I doing wrong and how can I load the platforms as well. There isn't any error in the console. Here is my code:
let config = {
type: Phaser.AUTO,
width: 800,
height: 500,
physics: {
default: 'arcade',
arcade: {
gravity: { y: 300 },
debug: false
}
},
scene: {
preload: preload,
create: create,
}
};
let windowWidth = 800
let widnowHeight = 500
new Phaser.Game(config)
function preload ()
{
this.load.image('sky', require('../assets/sky.png'));
this.load.image('jungle', require('../assets/jungle.png'));
this.load.image('ground', require('../assets/tiles/ground-transp.png'))
this.load.image('small-platform', require('../assets/tiles/small-platform-removebg-preview.png'))
this.load.tilemapTiledJSON('Ground', require('../assets/tutorial-level.json'));
}
function create () {
this.bg = this.add.image(windowWidth / 2, widnowHeight / 2, 'sky');
this.bg = this.add.image(windowWidth / 2, widnowHeight / 2, 'jungle');
this.bg.setDisplaySize(windowWidth, widnowHeight);
const map = this.make.tilemap({ key: 'Ground' })
const tileset = map.addTilesetImage('ground', 'ground')
const platformTileset = map.addTilesetImage('small-platform', 'small-platform')
map.createStaticLayer('Ground', [tileset, platformTileset])
}
and my map:
{ "compressionlevel":-1,
"height":8,
"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,
1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
"height":8,
"id":1,
"name":"Ground",
"opacity":1,
"type":"tilelayer",
"visible":true,
"width":14,
"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, 2, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 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":8,
"id":4,
"name":"Platform",
"opacity":1,
"type":"tilelayer",
"visible":true,
"width":14,
"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, 3, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 3, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
"height":8,
"id":5,
"name":"MossPlatform",
"opacity":1,
"type":"tilelayer",
"visible":true,
"width":14,
"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, 3, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0,
5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5, 0, 0, 0,
0, 0, 0, 0, 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":8,
"id":7,
"name":"BigMossPlatform",
"opacity":1,
"type":"tilelayer",
"visible":true,
"width":14,
"x":0,
"y":0
}],
"nextlayerid":8,
"nextobjectid":1,
"orientation":"orthogonal",
"renderorder":"right-down",
"tiledversion":"1.9.1",
"tileheight":64,
"tilesets":[
{
"columns":1,
"firstgid":1,
"image":"..\/..\/..\/Downloads\/ground-transp.png",
"imageheight":64,
"imagewidth":58,
"margin":0,
"name":"ground",
"spacing":0,
"tilecount":1,
"tileheight":64,
"tilewidth":58
},
{
"columns":1,
"firstgid":2,
"image":"..\/..\/..\/Downloads\/jungle-platform.png",
"imageheight":66,
"imagewidth":129,
"margin":0,
"name":"jungle-platform",
"spacing":0,
"tilecount":1,
"tileheight":66,
"tilewidth":129
},
{
"columns":1,
"firstgid":3,
"image":"..\/..\/..\/Downloads\/small-platform-removebg-preview.png",
"imageheight":72,
"imagewidth":153,
"margin":0,
"name":"small-platform",
"spacing":0,
"tilecount":1,
"tileheight":72,
"tilewidth":153
},
{
"columns":1,
"firstgid":4,
"image":"..\/..\/..\/Downloads\/large-platform.png",
"imageheight":54,
"imagewidth":244,
"margin":0,
"name":"big-platform",
"spacing":0,
"tilecount":1,
"tileheight":54,
"tilewidth":244
},
{
"columns":1,
"firstgid":5,
"image":"..\/..\/..\/Downloads\/large-platform-removebg-preview.png",
"imageheight":54,
"imagewidth":244,
"margin":0,
"name":"large-platform",
"spacing":0,
"tilecount":1,
"tileheight":54,
"tilewidth":244
}],
"tilewidth":58,
"type":"map",
"version":"1.9",
"width":14
}

Answer 1

You need to create each layer, that you want to display. So If you want to display all layer from your JSON map file, you would have to add the following three lines of code:
(if those layers also use the same tilesets)
map.createStaticLayer('Platform', [tileset, platformTileset])
map.createStaticLayer('MossPlatform', [tileset, platformTileset])
map.createStaticLayer('BigMossPlatform', [tileset, platformTileset])