Tilemap not showing

Phaser 3
1

My tilemap is not showing even though there are no errors in the console. My code also seems to be correct because I have the right arguments in the right methods. Is there something I am doing wrong? I used the application Tiled to create my tilemap. In Tiled, the tilemap is orthogonal, and tiles are 16 by 16 and are formatted in CSV. Here is a link to the JSON file. Any help is appreciated.

PlayScene.js:

class PlayScene extends Phaser.Scene {
constructor () {
    super("game");
}

preload () {
    this.load.image("tiles", "assets/tilesets/tiles_packed.png");
    this.load.tilemapTiledJSON("island", "assets/tilemaps/island.json");
}

create () {
    this.physics.world.setBounds(0, 0, 2000, 2000);
    this.camera = this.cameras.main.setBounds(0, 0, 2000, 2000);
    
    this.player = this.physics.add.sprite(config.width / 2, config.height / 2, "me");
    this.player.setCollideWorldBounds(true);
    this.camera.startFollow(this.player);
    
    this.map = this.make.tilemap({ key: "island" });
    this.tilemap = this.map.addTilesetImage("tiles_packed", "tiles", 16, 16, 0, 0);
    this.groundLayer = this.map.createStaticLayer("Ground", "island", this.player.x, this.player.y)
    this.edgesLayer = this.map.createStaticLayer("Edges", "island", this.player.x, this.player.y);
    
    
    this.playerIdleAnim = "stillNorth";
    
    this.cursors = this.input.keyboard.addKeys({
        up: Phaser.Input.Keyboard.KeyCodes.W,
        down: Phaser.Input.Keyboard.KeyCodes.S,
        right: Phaser.Input.Keyboard.KeyCodes.D,
        left: Phaser.Input.Keyboard.KeyCodes.A,
        shift: Phaser.Input.Keyboard.KeyCodes.SHIFT
    })
}

update () {
    this.movePlayer();
}

movePlayer () {
    if (this.cursors.up.isDown && this.cursors.right.isDown) {
        this.setPlayerDistSpeedAnim(1, -1, "moveNE", "stillNE");
    } else if (this.cursors.down.isDown && this.cursors.right.isDown) {
        this.setPlayerDistSpeedAnim(1, 1, "moveSE", "stillSE");
    } else if (this.cursors.down.isDown && this.cursors.left.isDown) {
        this.setPlayerDistSpeedAnim(-1, 1, "moveSW", "stillSW");
    } else if (this.cursors.up.isDown && this.cursors.left.isDown) {
        this.setPlayerDistSpeedAnim(-1, -1, "moveNW", "stillNW");
    } else if (this.cursors.up.isDown) {
        this.setPlayerDistSpeedAnim(0, -1, "moveNorth", "stillNorth");
    } else if (this.cursors.down.isDown) {
        this.setPlayerDistSpeedAnim(0, 1, "moveSouth", "stillSouth");
    } else if (this.cursors.right.isDown) {
        this.setPlayerDistSpeedAnim(1, 0, "moveEast", "stillEast");
    } else if (this.cursors.left.isDown) {
        this.setPlayerDistSpeedAnim(-1, 0, "moveWest", "stillWest");
    } else {
        this.player.play(this.playerIdleAnim);
    }
}

setPlayerDistSpeedAnim (x, y, animation, idle) {
    var scale = 1;
    
    if (this.cursors.shift.isDown) {
        scale = 8;
    }
    
    var current = this.player.play(animation, true);
    current.x += x * scale;
    current.y += y * scale;
    this.playerIdleAnim = idle;
}

}

screenshot:

image
image1364×662 33.8 KB

2

Zoom the camera out until you see some tiles.

My guess is this should be

this.groundLayer = this.map.createStaticLayer("Ground", "island");
this.edgesLayer = this.map.createStaticLayer("Edges", "island");