phaser The Tile Map I made in Tiled isn't loading using Phaser 3

[ChetD90]

I have made a map in Tiled and I have a already generated a JSON. Whenever I try to load the map in Chrome and it load only a black screen. When I went to inspect the website there are warning like:

No data found in the Json tilemap from Tiled matching the tileset name "RunItUpCity"

Cannot create tilemap layer, invalid layer ID given: Bottom Layer

TilemapParser.ParseTiledJSON - Layer compression is unsupported, skipping layer 'Bottom Layer'

Also, I got an Error that read: Uncaught Type Error: cannot read property 'setCollisionProperty' of null 

Does anyone think that there is a problem with the map or the code? Here is the JavaScript code if anyone needs it.

const config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  parent: "game-container",
  pixelArt: true,
  physics: {
    default: "arcade",
    arcade: {
      gravity: { y: 0 }
    }
  },
  scene: {
    preload: preload,
    create: create,
    update: update
  }
};

const game = new Phaser.Game(config);
let cursors;
let player;
let showDebug = false;

function preload() {
  this.load.image("tiles", "../assets/tilesets/RunItUpCity.png");
  this.load.tilemapTiledJSON("map", "../assets/tilemaps/GetawayCity.json");

  // An atlas is a way to pack multiple images together into one texture. I'm using it to load all
  // the player animations (walking left, walking right, etc.) in one image. For more info see:
  //  https://labs.phaser.io/view.html?src=src/animation/texture%20atlas%20animation.js
  // If you don't use an atlas, you can do the same thing with a spritesheet, see:
  //  https://labs.phaser.io/view.html?src=src/animation/single%20sprite%20sheet.js
  this.load.atlas("atlas", "../assets/atlas/atlas.png", "../assets/atlas/atlas.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("RunitUpCity", "tiles");

  // Parameters: layer name (or index) from Tiled, tileset, x, y
  const belowLayer = map.createStaticLayer("Bottom Layer", tileset, 0, 0);
  const worldLayer = map.createStaticLayer("Top Layer", tileset, 0, 0);
  const aboveLayer = map.createStaticLayer("Collision Layer", tileset, 0, 0);

  aboveLayer.setCollisionByProperty({ collides: true });

  // By default, everything gets depth sorted on the screen in the order we created things. Here, we
  // want the "Above Player" layer to sit on top of the player, so we explicitly give it a depth.
  // Higher depths will sit on top of lower depth objects.
  worldLayer.setDepth(10);

  // Object layers in Tiled let you embed extra info into a map - like a spawn point or custom
  // collision shapes. In the tmx file, there's an object layer with a point named "Spawn Point"
  const spawnPoint = map.findObject("Objects", obj => obj.name === "Spawn Point");

Also, I will attach the JSON code to the post because it is 17000+ of code.

 

GetawayCity.json

[samme]

Add this to the beginning of create and then look at the output:

console.log(this.cache.tilemap.get('map').data);

You can find the correct tileset names in there.

If you have layer compression on, turn it off and reexport the map.

[ChetD90]

I used the line of code in my JavaScript file and I got an error of 'Uncaught TypeError: Cannot read property 'cache' of undefined
    at index.js:7'. Also, how exactly do I turn off the layer compression? Do you change the Tile Layer format?

[ChetD90]

Whoa! what are you talking about? I don't even have enemies.children.iterate in my code. Also, I switched the layer compression from Base64(compressed) to Base64(uncompressed). Do you think I should use CSV or XML format?

[samme]

Wrong thread, sorry.

[ChetD90]

Ok, solved the problem of getting the map to load by exporting the map as a csv in Tiled and saving a json of the map. However, I now have the problem of not getting anything to move on the map. Do you think that I make that into a new topic.