javascript - 我在 Tiled 中制作的 Tile map 未在浏览器中加载

Question

我已经在 Tiled 中制作了一张 map ，并且已经生成了一个 JSON。每当我尝试在 Chrome 中加载 map 时，它根本无法加载。当我去检查网站时，有类似警告:

在来自 Tiled 的 Json tilemap 中找不到与 tileset 名称“RunItUpCity”匹配的数据

无法创建 tilemap 层，给定的层 ID 无效:底层

有没有人认为 map 或代码有问题？如果有人需要，这里是 JavaScript 代码。

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");

此外，这里是 JSON 文件的代码:

{ "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
}

Answer 1

好的，这就是为我修复的问题；这只是一个愚蠢的配置问题。

显然 phaser 不喜欢看到压缩的图 block 层格式？所以只需在这里(您可以在左侧的属性面板中看到突出显示的行)将其切换为未压缩设置。

祝你好运!烦人的问题...