javascript - 将平铺图 block map 读取为 JSON - 错误

Question

我正在关注hashrocket's有关将 Tiled TMX 图 block map 读取为 JSON 的教程。

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

未捕获类型错误:无法读取未定义的属性“0” 第 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");
        });

<小时/>

编辑:

这是我的平铺图 block map 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
}

Answer 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));
}