Problem Tilemap JSON

[adcoding]

I can’t figure out what’s the problem:
I created a tilemap using Tiled but I can see only a black screen (using MAMP)

var game = new Phaser.Game(config);

function preload(){
	this.load.image('gameTiles', 'assets/dungeonSet.png');
	this.load.tilemapTiledJSON('level1', 'assets/dungeonLevel1.json');
}

function create(){
	this.map = this.add.tilemap('level1');
	var tileset = this.map.addTilesetImage('dungeonSet','gameTiles');
	this.backgroundLayer = this.map.createLayer('backgroundLayer', tileset);
}
```Preformatted text

[jjcapellan]

Hi @adcoding,

@adcoding

this.backgroundLayer = this.map.createLayer('backgroundLayer', tileset);

createLayer() is not a tilemap method. Phaser 3 has two methods for this: createStaticLayer() and createDynamicLayer(). Docs of tilemap here:
https://photonstorm.github.io/phaser3-docs/Phaser.Tilemaps.Tilemap.html
Example for tilemap from JSON here.

Regards.

[adcoding]

I follow the example and now it works.
But I think there’s a problem cause I see only the background Tiled level.
I have another level in Tiled that contains the platform tiles with a custom property ‘collides’.

[BlunT76]

If you have multiples layers in tiled, you need to create multiples layers in phaser
Show us the code

[adcoding]

var game = new Phaser.Game(config);
var controls;

function preload(){
	this.load.image('tiles', 'assets/dungeonSet.png'); //tileset
    this.load.tilemapTiledJSON('map', 'assets/dungeonLevel1.json'); //tilemap
}

function create(){
    var map = this.make.tilemap({ key: 'map' });

    var tiles = map.addTilesetImage('dungeonSet', 'tiles');
    var layer = map.createStaticLayer(0, tiles, 0, 0);


    this.cameras.main.setBounds(0, 0, map.widthInPixels, map.heightInPixels);

    var cursors = this.input.keyboard.createCursorKeys();
    var controlConfig = {
        camera: this.cameras.main,
        left: cursors.left,
        right: cursors.right,
        up: cursors.up,
        down: cursors.down,
        speed: 0.5
    };
    controls = new Phaser.Cameras.Controls.FixedKeyControl(controlConfig);
}

function update (time, delta)
{
    controls.update(delta);
}

[BlunT76]

var game = new Phaser.Game(config);
var controls;

function preload(){
	this.load.image('tiles', 'assets/dungeonSet.png'); //tileset
    this.load.tilemapTiledJSON('map', 'assets/dungeonLevel1.json'); //tilemap
}

function create(){
    var map = this.make.tilemap({ key: 'map' });

    var tiles = map.addTilesetImage('dungeonSet', 'tiles');
    var layer = map.createStaticLayer(0, tiles, 0, 0).setDepth(0); //

    // add the platform layer
    var platformLayer = map.createDynamicLayer('nameOfLayerInTiled', tiles, 0, 0).setDepth(1);

    // declare the collisions
    platformLayer.setCollisionByProperty({ collides: true });

    // add a collider between a sprite and the platformLayer
    this.physics.add.collider(player, platformLayer, undefined, undefined, this);

    this.cameras.main.setBounds(0, 0, map.widthInPixels, map.heightInPixels);

    var cursors = this.input.keyboard.createCursorKeys();
    var controlConfig = {
        camera: this.cameras.main,
        left: cursors.left,
        right: cursors.right,
        up: cursors.up,
        down: cursors.down,
        speed: 0.5
    };
    controls = new Phaser.Cameras.Controls.FixedKeyControl(controlConfig);
}

function update (time, delta)
{
    controls.update(delta);
}

[adcoding]

nothing changes

[BlunT76]

Add a console.log to see what happens, are you sure you named the layer correctly?
I named it ‘nameOfLayerInTiled’, this must correspond to the layer name in tiled
What is the Phaser version and tiled version?

// add the platform layer
var platformLayer = map.create.createDynamicLayer('nameOfLayerInTiled', tiles, 0, 0).setDepth(1);
console.log(platformLayer)

[adcoding]

// add the platform layer
    var platformLayer = map.create.createDynamicLayer('Platform', tiles, 0, 0).setDepth(1);
    console.log(platformLayer)

Tiled version: 1.4.2
Phaser version:

<script src="//cdn.jsdelivr.net/npm/phaser@3.24.1/dist/phaser.min.js"></script>

[BlunT76]

My fault…change

@BlunT76

var platformLayer = map.create.createDynamicLayer('nameOfLayerInTiled', tiles, 0, 0).setDepth(1);

to:

var platformLayer = map.createDynamicLayer('nameOfLayerInTiled', tiles, 0, 0).setDepth(1);

[adcoding]

It works!!
But my camera controls don’t work anymore…

var controls;

this.cameras.main.setBounds(0, 0, map.widthInPixels, map.heightInPixels);

var cursors = this.input.keyboard.createCursorKeys();
var controlConfig = {
    camera: this.cameras.main,
    left: cursors.left,
    right: cursors.right,
    up: cursors.up,
    down: cursors.down,
    speed: 0.5
};
controls = new Phaser.Cameras.Controls.FixedKeyControl(controlConfig); 


function update (time, delta)
{
    controls.update(delta);
}

[adcoding]

but I could fix it later.
I add the player and set the camera that follows it.