phaser3 Issue with loading map in with Phaser 3

[ShuttJS]

For some reason the following code isn't working. I've created all the tilesets, keys and images are correct and nothing is erroring in the console log

 

preload

        this.load.image('tiles', 'assets//maps/newest.png');
        this.load.tilemapTiledJSON('map', 'assets/maps/newest.json');

 

create

        const map = this.make.tilemap({key: "map", tileWidth: 32, tileHeight: 32});
        const tileset = map.addTilesetImage('newest', 'tiles')
        const layer = map.createLayer('ground', 'map')

The assets are loading in fine too, but I haven't added a map before using tilesets so not sure where I could of gone wrong.

The image also loads in fine when adding that in so I figured it might be something to do with the following JSON file.

{ "compressionlevel":-1,
 "height":20,
 "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, 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, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 0, 0, 0, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 5, 5, 5, 5, 5, 5, 5, 5, 2, 2, 2, 2, 5, 5, 5, 5, 5, 5, 5, 5, 2, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 0, 0, 0, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 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, 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, 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":20,
         "id":1,
         "name":"ground",
         "opacity":1,
         "type":"tilelayer",
         "visible":true,
         "width":25,
         "x":0,
         "y":0
        }],
 "nextlayerid":2,
 "nextobjectid":1,
 "orientation":"orthogonal",
 "renderorder":"right-down",
 "tiledversion":"1.7.2",
 "tileheight":32,
 "tilesets":[
        {
         "columns":3,
         "firstgid":1,
         "image":"..\/..\/Documents\/sprites\/tileset2.png",
         "imageheight":96,
         "imagewidth":96,
         "margin":0,
         "name":"newest",
         "spacing":0,
         "tilecount":9,
         "tileheight":32,
         "tilewidth":32
        }],
 "tilewidth":32,
 "type":"map",
 "version":"1.6",
 "width":25
}

 

I'll add the full code here for anyone to look over

 

class Level1 extends Phaser.Scene {
    constructor() {
        super({key: "Level1" });
  }
    preload () {
        
        
        this.load.aseprite('alco', 'assets/animations/StrongAlc.png', '../assets/animations/StrongAlc.json');
        this.load.aseprite('chef', 'assets/animations/alcochef.png', '../assets/animations/alcochef.json');

        this.load.image('tiles', 'assets//maps/newest.png');
        this.load.tilemapTiledJSON('map', 'assets/maps/newest.json');
        

    }

    create () {

        
        this.width = 800;
        this.height = 640;

        const map = this.make.tilemap({key: "map", tileWidth: 32, tileHeight: 32});
        const tileset = map.addTilesetImage('newest', 'tiles')
        const layer = map.createLayer('ground', 'map')
        let playerPoints = 0;

        this.keyF = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.F);
        this.keyW = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.W);
        this.keyD = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.D);
        this.keyA = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.A);


        this.anims.createFromAseprite('chef', [ 'idleburp', 'standingattack', 'jump', 'run' ]);
        this.anims.createFromAseprite('alco');

        this.alco = this.physics.add.sprite(this.width/2, (this.height /2) -50, 'alco');
        this.chef = this.physics.add.sprite(this.width/50, this.height/2.5, 'chef');

        this.chef.body.setCollideWorldBounds(true)
        this.physics.add.collider(this.chef, this.ground)

        this.chef.sideFacing = 'right'
        this.chef.moving = false;

        function colliderAlco(sprite) {
            playerPoints ++
            console.log(playerPoints)
            // destroySprite(sprite)

        }

        this.physics.add.collider(this.chef, this.alco, colliderAlco(this.alco))

        this.alco.play({key: 'rotatinglabel', repeat: -1})

        // var frameNames = this.textures.get('chef').getFrameNames();       

        this.chef.play({key: 'idleburp', repeat: -1, ignoreIfPlaying: false})
     
    }

    update() {
        if(this.keyF.isDown) { 
            this.chef.play({key: 'standingattack', repeat: 0, ignoreIfPlaying: false})
            this.chef.moving = true

        }

        if(this.keyD.isDown) {
            this.chef.play({key: 'run', repeat: -1, ignoreIfPlaying: false})
            this.chef.moving = true
            this.chef.body.setVelocityX(100);
            this.chef.flipX = false

            if(this.chef.facing === 'left') {
                return this.chef.facing === 'right'
            }

        }

        if(this.keyW.isDown) { 
            this.chef.play({key: 'jump', repeat: 0, ignoreIfPlaying: false})
            this.chef.moving = true
        }


        if(this.keyA.isDown) { 
            this.chef.play({key: 'jump', repeat: 0, ignoreIfPlaying: false})
            this.chef.moving = true
            this.chef.body.setVelocityX(-100);
            this.chef.flipX = true

            if(this.chef.facing === 'right') {
                return this.chef.facing === 'left'
            }
        }
        
    }
}

function destroySprite(sprite) {

    sprite.destroy();

}

export default Level1;

 

This is the index.js

import Phaser from 'phaser'
import Level1 from './scenes/level1'

var config = {
    type: Phaser.AUTO,
    width: 800,
    height: 640,
    physics: {
        default: 'arcade',
        arcade: {
            debug: true,
            gravity: {},
        }
    },
    scene: [Level1],
    scale: {
        zoom: 1,
    }

};


var game = new Phaser.Game(config);