The Tile Map I made in Tiled isn't loading in the browser

Question

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 does not load at all. 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

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, here is the code for the JSON File:

{ "height":50,
 "infinite":false,
 "layers":[
        {
         "compression":"zlib",
         "data":"eJy92QV0leXjB\/DBiMFGWHQZdNt0WCiNCQaTUBpUulHpFFvq2i1IKA0GnQYpZRcI2IHw+9y\/4\/wvL3fb3ZnHnfM5u++z5717vnvyvkvIGheXQNm4uLhylKcCFalEZapQlWpU50Iu4mIu4VIu43JqUJNa1KYOdalHfRrQkCu4kqu4mmtoxLVcR2Oa0JRmNKcFJXJEl5CSo586\/RnAQAYxmCEMZRjDGcH9PMCDjGQUoxnDWMYxnglMZBKTmcJDTOVhHuFRHuNxnuBJnmIa05nBTGYRiiHHGnXWso71bGAjm9jMFrbyAR\/yER+zje3sYCe72M0n7GEv+9jPAT7lMz7nC77kK77mG77lO77nIIf4gcMciSFHwSxxcYUoTBGKUozilKAkpTiX8zifCyhNGcpSjvJUoCKVqEwVqlKN6lzIRVzMJVzKZVxODWpSi9rUoS71qJ8l\/Rx3q9OJznShK93oTg960ot7uJf76E0f+tKP\/gxgIIMYzBCGMozhjOB+HuBBRjKK0YxhLOMYzwQmMonJTIkhx9vqLGQRi1nCUpaxnBWs5B3e5T3eZxWrWcNa1rGeDWxkE5vZwlY+4EM+4mO2sZ0d7GQXu\/mEPexlH\/s5EEOOk3KRm0SSyENe8pGfMziTszibcygQHpcUojBFKEoxilOCkpTiXM7jfC6gNGXC6yXlKE8FKlKJylShKtWyxp6jNW24ldu4nTtoSzJ30o72dKAjd4XHJZ3oTBe60o3u9KAnvbiHe7mP3vShb3i9pD8DGMggBjOEoQxjeAZyvMwrvMprvM4bzGYObzKXecxnAW+FxyULWcRilrCUZSxnBSt5h3d5j\/dZxWrWsJZ1rGcDG9nEZrawNQM5\/uBP\/uIYf3OcE8TFx8VlISvxZCM7OchJArnITSJJ5CEv+cjPGZzJWZzNORSgIIUoTBGKUozilKAkpeJTz9EzQlP1mtGcxjSJP7WsBS1pxfXcwI3cxM3cQmvacCu3cTt30JZk7qQd7elAR+7ibjrRmS50pRvd6UFPeqWR4y0\/e5uFzGAms5jG9EBZiKd5hmd5jud5gRd5iZd5hVd5jdd5g9nM4U3mMo\/5LIg\/tQ2LWMwSlrKM5axgZcQ9wXtzZDMmSOCQ6x84zPccjD+17AhH+ZGf+Jlf+JXf+J0\/+JO\/OMbfHOcEcX5HFrISTzayZzu1DbnITSJJ5CEv+cgfcU\/w3pu4mVuoQ13qUYvagbL6NKAhV3AlV3E119CIa7mOxjShKc1oTgta0orruYEbA21oTRtu5TZu5w7akhxxT\/DeF3iRl5jIpH\/KQuN9nxBRNpkpPMRUHuYRHuUxHucJnuQppjGdGcxkFiGe5hme5TmeD7ThZV7hVV7jdd5gNnMi7gneWzX+VLuU7eYT9rCXfeznAJ\/yGZ\/zBV\/yFV\/zDd\/yHd9zkEP8wGGOcJQf+Ymf+YVf+Y3f+YM\/+Ytj\/M1xThCX\/Z81IppgjvLqVqAilahMFapSjepcyEVczCVcymVcTg1qUova1KEu9ahPAxpyBVdyFVdzDY24lutoTBOa0ozmtMhAjgHqDmQQgxnCUIYxnBHczwM8yEhGMZoxjGUc45nARCYxmSk8xFQe5hEe5TEe5wme5CmmMZ0ZzGQWoQzkWKfuejawkU1sZgtb+YAP+YiP2cZ2drCTXezmE\/awl33s5wCf8hmf8wVf8hVf8w3f8h3fc5BD\/MBhjmQgR1gR+0pRilE8ZZ8pSSnO5TzO5wJKU4aylKM8FahIJSpThapUozoXchEXcwmXchmXU4Oa1KI2dahLPernyFiOLup3pRvd6ZGy3\/fiHu7lPnrTh770oz8DGMggBjOEoQxjOCO4nwd4kJGMYjRjGMs4xqeYyKSU11MymGOx+ktYyjKWs4KVvMO7vMf7rGI1a1jLOtazgY1sYjNb2MoHfMhHfMw2trODnexid45T9+pYXkfLkTun\/ZQk8pCXfOTnDM7kLM7mHApQkEIUpghFKUZxSlCSUpzLeZzPBZSmDGUpR3kq5Dx1r47ldbQcwfU+XNbWeydzJ+1oTwc6chd304nOdKEr3ehOD3rSi3u4l\/voTR\/60o\/+DGBgzlP36lheR8sRXO\/DZbO99xzeZC7zmM8C3uJtFrKIxSxhKctYzgpW8g7v8h7vs4rVrGEt61jPhpzR9\/twWTva04GOKWeAaDmC63247IT3jUtwziMr8WQjOznISQK5yE0iSeQhL\/nIzxmcyVmczTkUoCCFKEwRiobfN1d0c7V7HvNZEN7\/E6LnCK734bLm6ragJa24nhu4kZu4mVtoTRtu5TZu5w7aksydtKM9HejIXdxNJzrTha5p5MiqTfFkI3v21HME1\/v\/Kwvvp+o\/zTM8y3M8zwu8yEu8zCu8ymu8zhvMZg5vMpd5zGcBb\/E2C1nEYpakkWO1PljDWtal0R\/R5nk4xxH1j\/IjP\/Ezv\/Arv\/E7fyT8875\/cYy\/Oc4J4rQhS0pb4slG9pTrnCSQi9wkppIhrIC2FKQQhdPoj2jzPJyjvvdoQEOu4Equ4mquoRHXch2NaUJTmtGcFrSkFddzAzdyEzdzC61pk0aGjPRHtHkezpGWY7n97TnOCeIS\/e3Jmnh6\/4bHVZ+4tKWVI9b+CM7z9DKENdHepjSjOS1oSavE0\/s3a670c4RF+xqpfaMYzRjGplzHMs9jyTFde2cwk1mEeJpnEk\/v31aZyLFN+7azg53sSrmuHkXw80csOQ5q76HwGOIwRzjKj4mn928s4yq1HKWNyzKUpRzlU66j5Qh+\/oglR+0kZ2zqUo\/6NKBh0unzIziu5if8v\/Ry9HF\/X\/rRnwEp19FyBD9\/xJJjgvZOZBKTmcJDTE06fX4Ex1VkjsgsqX0F16toGapH+fwRS4492ruXfeznAJ\/yWdLp8yM4rjKaI7hepZYj+PkjlhxpCc6PtMZVpMz2R+T8CD9XdKZMDj8nnfZPX4WMu5A6IetB6OR1sDzyeWr4uWTk+pfeuEovR6z9ETk\/wjmcj5OdLZOdy5KNt5CfheQMWdNCJ6+D5ZHPU8M5gvtgam3\/N\/sjcn6EczjrJzsnJztjJisLyRfSVyHrcujkdbA88nlqOEdwH8xMjlj7Y5zfHflc1OeWZGf+ZOflZPM+ZA0LWY9D9pbQyetgeeTz1Gj74H\/RH8HnoqnVi1W0ffC\/6I\/gc9HM5gieczI7rqL1R7T\/7QT38\/S+Iv+nFU1wP8\/suIrWH9FyBPfzVZnMEe28+1\/0R3A\/D+dIK0t6Of7teR5rfwTH1ckc6bU3Nf\/2PI+1P6KNq1hzRHu\/4DxPL0e1+LRldlzF0u5Y5nlmc0QbV\/8DIhtF1w==",
         "encoding":"base64",
         "height":50,
         "name":"Bottom Layer",
         "opacity":1,
         "type":"tilelayer",
         "visible":true,
         "width":50,
         "x":0,
         "y":0
        }, 
        {
         "compression":"zlib",
         "data":"eJzt2GWQlWUYBuDDAkt3CCzdLCkhYgIStoACilKCoOTSsNTSgi2CgEUptrRBK90dS4qCgE0K5sUvfziOcPYbdnfkmbn+Pu99n\/m+s\/ueUOj\/N3EMYSjDGM4IRjIq8WJd9mxmC1vZxnZ2sJNdiZjrcqdwilCoCEUpRnFKUJJSKRI73aVPjKzd6E4PetKL3vRJRj2WyrqMz\/mC5axgJasC7BFv1172sZ8DHORQQGdkjQiFspGdHOQkF7m5JiKYMy5OtF1lKUd5KlCRSgGd0cqe1jxKG9ryGO1oH2CPWLv6M4CBDGIwcQGdMdOeWcxmDnOZx3w+DrDHWrvWsZ4NbGQTm4M6I2UolIIIUpKK1ESSJmVAZ5h8dkWRnwIUpBCFAzqjgT0NacT9PEBjmtA0wB4d7OpIJzrTha7EBHTGZHumMJVpTOdN3mJGgD0+s2sBC1nEYpawNKAzfrLnZ05yitOc4SznAuyRPlUolIGMZCIzWciaKpj9Ne2pRW1uow51qUf9gM64OM3sephHaE4LWtIqwDOuzt9z0ud6itOc4Szn+IXzXEgmn3vt1J5L6lCXetTndu7gztSJnfDS5kU5x\/IS4xjPy0xgIpOSSY\/Dcn7F1xzhKN9wjOOcSCY9KkeGQlWoSjWuozrXU4MbIhM74aXNUDmHMZwRjGQUTzKaMcmkx1Y5t7GdHexkF7vZQ3wy6VE0jXsxxSlBSUpRmjJEp0nshJc23eXsQU960Zs+9KUfscmkx9W5Olfn36eL79UVoX9KbrMzwt8LdrOHePYG+DvFlZqS7o6lKE0Zoikb4H3ySsxMeXvTh770I5b+DGAggxhMHEMYyjCGMyKJ9L3YYyWrWM0a1rKO9WxgI5vYzBa2so3t7EhCPXK7711DHvKSjyjyU4CCFKIwRShKMYpTIgndFdvJ0p7HeYIOdKQTnelCV2LoRnd60JNeSajHfFk+5hM+5TMWsJBFLGYJS1nG53zBclYkoR6R7ntpSEs60pOBjGQiM1nISjayk4Oc5EpCd8UmsjTlQR6iGQ\/zCM1pQUta0ZpHaUNbHguzx2jv5ZiAvyPekmUGb\/MO7\/Ie7\/MBH\/IRM5nFbOYwl3lh9tijQzx72cd+DnCQQ3wZRsezspzjF85zgV\/5jd\/5gz8v5vX\/SwoiSEkqUod5VyzjvYqmLOUoTwUqUolrw3jv6slSn9u5gzu5i7u5h3u5jwY0pBH38wCNw+zRT85Y+jOAgQxiMHEMCaPHeFleZgITmcQrvMprvM4bTGYKU5nGdN5MwN19razrWM8GNrKJzWwJo8dRWb7hGMc5wbd8x\/f8wI\/8xM+c5BSnOZOAHvk8q1HkpwAFKURhioTx3l3n\/l2d66nBDdzITdzMLdxKTWpRm9uoQ90E3N07yNqRTnSmC12JoVsYPUbKMoonGc0YnuJpnuFZnuN5XuBFxvIS4xL4G8QCeReyiMUsYSnLwuixU5Zd7GYP8exlH\/s5wEEO8SWH+YqvOZLAHhk8lxnJRGaykJVsYTyvJdO6f1CaMkRTlnKUpwIVqcS1VKYKVamWNmE9gpzesvShL\/2IpT8DGMggBhPHEIYyjOGMSEI9VsqyitWsYS3rWM+GJJTzvyZ3OvcP8pCXfESRnwLpwtv5F+iAPZg=",
         "encoding":"base64",
         "height":50,
         "name":"Top Layer",
         "opacity":1,
         "type":"tilelayer",
         "visible":true,
         "width":50,
         "x":0,
         "y":0
        }, 
        {
         "compression":"zlib",
         "data":"eJzt2HVw1nUcB\/AfjBrb2GZTBiYKBjaOEBWFJZgI2C3YhYIoYcAGiA0r7O6mbRTsREpsWGELY\/PFuX88njt9wtuzc5+71z\/fZ\/v83u+733b7Lgj+Pp2D2E0GPUKc9+EQDuUw+nI4R9CP\/mSSRTY55JIXxrNHRJx648mnIMT5VG7mFm7lNm7nDu5kGtMppIhiSigN49kLIg0dYpawNMT5Sr7ia77hW77je35gFaspo5wKKqkK49ltm0Qce6PpYlfXEPu6OdubfdiX\/difAziQ7hxEBj3oSS96h5Ht7Bj2GGnXqBD7xjgbyzjGcx3XcwM3MoGJ5FPAJCYzJYxsL8awx0K7FoXY94GzD\/mIj\/mET\/mMz1nMFyxhKctYzoowsiU2jV2PDnZ1DLGvk7Pt2YEd2Ymd2YXO7BqDDINi2GOYXcND7LvI2cVcwqVcxuVcwQiujEGGB2PYY5Zds0Pse9nZK7zKa7zOG7zJAt6KQYY\/7FjLOqpZTw21G3YnBEETmpJAM5rTgpa0IpHWJJFMSkL0mSKZfp7bn0yyyCaHXPIYwECO5CiO5hiO5TgGcTyDGcLQeurROI3TOPE9a5v5fUk166mhlqB5fScLb\/rLm0kW2eSQS14D6zFN3ukUUkQxJZQ2sB6r5F1NGeVUUElVA+vRvYX7Bxn0oCe96N2ivpOFNxPknUg+BUxiMlMaWI\/GaZz\/82zSKgg2ZTM2Zwu2ZCva0o72reo75T\/PKTKeymmczhmcyVmczTmc2wB6NE70MzM1CGYxmznMZR7zU+s7WXiTlBYEyaTQhlTSSE\/76\/Pq1v7Gpoba1hu+IQia0DSpXmNvNIPlHcJQTuBETuLkuh5Z8maTQy55DGBgGD1GJgTBKK5mNNdwLWMYyzjGR\/l\/i4flfYRHeYzHeYIn63oUyltEMSWUMoO7wuixUMZFvMO7vMf7fMCHfMTHUfZYJ28166mhdkP+dO9O+l+fl8lbTgWVVLGGH8Po0cGdryNbsw3bsh2d2J4d2LFZdD0y5c0imxxyyWNAXY+MZH9j05Ne9OZg+iT\/+2cMk3E453E+F3AhF3Exl3BplD2my1tIEcWUUMqMuh758hYwiclM4SamhujxnCzP8wIv8hIzmcVs5jCXecznZV7hVV6Lssdqecsop4JKqlhT12OJvEtZxnJW8CUrQ\/Ro4V7XklYk0pokkkmhDamkkc4mbMpmbP4f3wm7pARBV3ZnD\/ZkL7qlbPy1x8hyLMcxiOMZzBCGcgInchIncwqnchqnx9Hd9j5Z7ucBHuQhHuYRHuUxHucJnuQpnuYZno2jHr\/K8hu\/8wdrWUc166mhdkNe99gmNCWBZjSPo7ttX1kO5wj60Z9Mssgmh1zyGMBAjuQojo6jHrfJcjt3cCfTmE4hRRRTQikzuIu7uYd746jHt7J8x\/f8wCpWU0Y5FVRSxRp+5Cd+5pcoe7T3vnagI1uzDduyXQQ\/d\/u1DIL9OYAD6c5BZNCDnvSiNwfTh0M4lMNaRtfjXHmHMZzzOJ8LuDCCHtfJcj03cCMTmEg+BUxiMlO4ianczC3cGmWPmfLOYjZzmMs85kfQ4xNZPuUzPmcxX7CEpSxjOSv4kpV8xdd8E2WPJO9lMim0IZU00iN4X3dy996ZXejMruxGF7qyO3uwJ3vRjb3ZJ87u7JfJczlXMIIruYqRjOJqRnMN1zKGsYxjfBx1eV2WN3iTBbzF2yxkURzl\/DezZWIQbEVb2tGeDomR7\/sT7g9P9Q==",
         "encoding":"base64",
         "height":50,
         "name":"Collision Layer",
         "opacity":1,
         "type":"tilelayer",
         "visible":true,
         "width":50,
         "x":0,
         "y":0
        }],
 "nextobjectid":1,
 "orientation":"orthogonal",
 "renderorder":"right-down",
 "tiledversion":"1.1.6",
 "tileheight":32,
 "tilesets":[
        {
         "firstgid":1,
         "source":"..\/tilesets\/RunitUpCity.tsx"
        }],
 "tilewidth":32,
 "type":"map",
 "version":1,
 "width":50
}

Without seeing the code, it's hard to know what your issue might be. Could you provide the code you're using to load the map and JSON? — brae, Nov 26 '18 at 15:49
Thanks! Do you have the layers identified as "Bottom Layer" etc. correctly in your Tiled json? — brae, Nov 26 '18 at 17:08
Yes the JSON seems to reference the layers of the map I created. — ChetD90, Nov 27 '18 at 05:17
Ok, solved the problem of getting the map to load by exporting the map as a csv in Tiled. However, I now have the problem of not getting anything to move on the map. — ChetD90, Dec 04 '18 at 19:03
I am having the same problem; it seems to be some problem with the line `compression: "zlib"` but I am finding very poor record of how to solve the problem; will update here if I find — Daniel Thompson, Mar 12 '19 at 09:51

score 1 · Answer 1 · answered Mar 12 '19 at 10:05

1

Alright this is what fixed it for me; it's just a dumb configuration thing.

Apparently phaser doesn't like seeing the compressed tile layer format? So just switch it here (you can see the highlighted row in the properties panel to the left) to the uncompressed setting.

Good luck! Annoying problem...

answered Mar 12 '19 at 10:05

Daniel Thompson

2,193
4
23
37

1

For my map, I actually switched my Tile Layer Format to CSV and it worked. – ChetD90 Mar 13 '19 at 17:48
After upgrading to Tiled 1.4.1 this worked for me. I used csv until I had more than one layer. More than one would create multiple csv files, and it became a hazzle to work with. – John Jul 08 '20 at 13:02

The Tile Map I made in Tiled isn't loading in the browser

1 Answers1