Sign in to follow this  
ChetD90

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

Recommended Posts

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.