将 Tiled tilemaps 读取为 JSON - 错误答案

【问题标题】：Reading Tiled tilemaps as JSON - error将 Tiled tilemaps 读取为 JSON - 错误
【发布时间】：2014-02-26 00:06:25
【问题描述】：

我正在关注hashrocket's 关于将 Tiled TMX tilemaps 读取为 JSON 的教程。

当尝试加载我保存的 Tile JSON 文件时，我得到了

Uncaught TypeError: Cannot read property '0' of undefined 在第 52 行，即：

     this.tileset = $("<img />", { src: json.tilesets[0].image })[0]

在 loadTileset : function(json) 函数中。

知道为什么吗？

$(function() {
          var c = $("canvas")[0].getContext("2d");

          var scene = {
            layers: [],

            renderLayer: function(layer) {

              if (layer.type !== "tilelayer" || !layer.opacity) { return; }
              var s = c.canvas.cloneNode(),
                  size = scene.data.tilewidth;
              s = s.getContext("2d");
              if (scene.layers.length < scene.data.layers.length) {
                layer.data.forEach(function(tile_idx, i) {
                  if (!tile_idx) { return; }
                  var img_x, img_y, s_x, s_y,
                      tile = scene.data.tilesets[0];
                  tile_idx--;
                  img_x = (tile_idx % (tile.imagewidth / size)) * size;
                  img_y = ~~(tile_idx / (tile.imagewidth / size)) * size;
                  s_x = (i % layer.width) * size;
                  s_y = ~~(i / layer.width) * size;
                  s.drawImage(scene.tileset, img_x, img_y, size, size,
                              s_x, s_y, size, size);
                });
                scene.layers.push(s.canvas.toDataURL());
                c.drawImage(s.canvas, 0, 0);
              }
              else {
                scene.layers.forEach(function(src) {
                  var i = $("<img />", { src: src })[0];
                  c.drawImage(i, 0, 0);
                });
              }
            },

            renderLayers: function(layers) {
              layers = $.isArray(layers) ? layers : this.data.layers;
              layers.forEach(this.renderLayer);
            },

            loadTileset: function(json) {
              this.data = json;
              this.tileset = $("<img />", { src: json.tilesets[0].image })[0]
              this.tileset.onload = $.proxy(this.renderLayers, this);
            },

            load: function(name) {
              return $.ajax({
                url: "maps/" + name + ".json",
                type: "JSON"
              }).done($.proxy(this.loadTileset, this));
            }
          };

          scene.load("area01");
        });

编辑：

这是我的 Tiled tilemap JSON 数据：

{ "backgroundcolor":"#1074cb",
 "height":15,
 "layers":[
        {
         "data":[8, 8, 45, 14, 44, 8, 8, 3, 3, 25, 1, 1, 1, 1, 1, 44, 8, 8, 8, 8, 1, 1, 1, 34, 1, 1, 1, 44, 8, 45, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 54, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 4, 4, 22, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 3, 25, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 3, 25, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 3, 25, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 3, 25, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 3, 25, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 3, 3, 4, 4, 4, 4, 22, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 3, 3, 3, 3, 3, 25, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 12, 13, 1, 3, 3, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 32, 33, 1, 3, 3, 1, 1, 1, 1, 1, 1, 1, 1, 1, 23, 4, 5, 4, 4, 4, 52, 4, 4, 3, 3, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3],
         "height":15,
         "name":"background",
         "opacity":1,
         "type":"tilelayer",
         "visible":true,
         "width":20,
         "x":0,
         "y":0
        }, 
        {
         "data":[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 92, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 112, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
         "height":15,
         "name":"foreground",
         "opacity":1,
         "type":"tilelayer",
         "visible":true,
         "width":20,
         "x":0,
         "y":0
        }],
 "orientation":"orthogonal",
 "properties":
    {

    },
 "tileheight":32,
 "tilesets":[
        {
         "firstgid":1,
         "image":"..\/..\/melonJS\/data\/img\/map\/area01_level_tiles.png",
         "imageheight":241,
         "imagewidth":640,
         "margin":0,
         "name":"area01_level_tiles",
         "properties":
            {

            },
         "spacing":0,
         "tileheight":32,
         "tilewidth":32
        }, 
        {
         "firstgid":141,
         "image":"..\/..\/melonJS\/data\/img\/map\/metatiles32x32.png",
         "imageheight":32,
         "imagewidth":160,
         "margin":0,
         "name":"metatiles32x32",
         "properties":
            {

            },
         "spacing":0,
         "tileheight":32,
         "tilewidth":32
        }],
 "tilewidth":32,
 "version":1,
 "width":20
}

【问题讨论】：

请在您的问题中包含 JSON 数组 ;)
@ProGM 我想这就是我感到困惑的地方。保存的Tiled tilemap 不是保存为 JSON 吗？这不是被这个脚本解释为要解析的 JSON 数组吗？
是的。事实上，我说的是在答案中包含已保存的平铺地图，因此我们将能够看到它的结构以及它导致该错误的原因^^
@ProGM 可以在上面添加
mmh 地图没问题。你确定这个网址吗？ url: "maps/" + name + ".json", 将 .error(function() {alert("The Url is Wrong");}); 添加到 ajax 调用中

标签： javascript json tile

【解决方案1】：

您混淆了type 和dataType，其中type 是请求方法，而dataType 在本例中是一个JSON 对象。干杯。

改变这个：

load: function(name) {
    return $.ajax({
        url: "maps/" + name + ".json",
        type: "JSON"
    }).done($.proxy(this.loadTileset, this));
}

到这里：

load: function(name) {
    return $.ajax({
        url: "maps/" + name + ".json",
        type: "GET",
        dataType: "JSON"
    }).done($.proxy(this.loadTileset, this));
}

【讨论】：