我正在关注将{Tiled TMX图块贴图作为JSON阅读的hashrocket's教程。
尝试加载我保存的Tile JSON文件时，我得到了
第52行 Uncaught TypeError: Cannot read property '0' of undefined，即：
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
}
答案 0 :(得分：0)
您混淆了 function CreateTile(x,y, stage){
var rect = new createjs.Shape();
rect.graphics.beginFill("green").drawRect(0,0,50,50);
rect.x = x;
rect.y = y;
var rect2 = new createjs.Shape();
rect2.graphics.beginFill("lightgreen").drawRect(0,0,46,46);
rect2.x = x + 2;
rect2.y = y + 2;
stage.addChild(rect);
stage.addChild(rect2);
}
function GenerateField(height, width, stage)
{
var h_lim = height / 50;
var w_lim = width / 50;
for(var h = 0; h < h_lim; h++){
for(var w = 0; w < w_lim; w++){
CreateTile(w * 50,h * 50,stage);
}
}
stage.update();
}
function init() {
var stage = new createjs.Stage("demoCanvas");
GenerateField(800,600, stage);
var img = new Image();
img.crossOrigin="Anonymous";
img.src = "https://s13.postimg.org/n1dqnac93/spritesheet.png";
var data = {
images : [img],
frames: {width:64, height:64},
animations: {
stand:0,
forwardwalk:[0,1,2, "forwardwalk"],
leftwalk:[7,8, "leftwalk"],
rightwalk:[3,4, "rightwalk"],
backwalk:[9,10,11, "backwalk"]
}
};
var spritesheet = new createjs.SpriteSheet(data);
var person = new createjs.Sprite(spritesheet);
person.x = 400;
person.y = 400;
person.gotoAndPlay("forwardwalk");
stage.addChild(person);
window.addEventListener('keydown', function(e){
var code = e.keyCode;
switch(code){
case 37:
person.x -= 64;
stage.update();
break; //Left key
case 38:
person.y -= 64;
stage.update();
break; //Up key
case 39:
person.x += 64;
stage.update();
break; //Right key
case 40:
person.y += 64;
stage.update();
break; //Down key
default:
break; // ignore
}
}, false);
createjs.Ticker.useRAF = true;
createjs.Ticker.setFPS(5);
createjs.Ticker.on("tick", stage);
}
和type，其中dataType是请求方法，type在这种情况下是JSON对象。欢呼声。
改变这个：
dataType到此：
load: function(name) {
return $.ajax({
url: "maps/" + name + ".json",
type: "JSON"
}).done($.proxy(this.loadTileset, this));
}