绘制介于平铺 .json 解析图层之间的绘图播放器

Question

你好世界第一次著名的堆栈溢出！

我正在从读取 JSON 平铺地图编辑器文件解析平铺制作的 .json 地图(只是一个测试(并显示到画布

我不完全理解渲染层函数，如果可取的话，我会就此提出一个新问题。 根据我的粗略理解，它逐个图块渲染每一层，并推送到将要绘制的最终"场景"img。

我的问题是如何在图层之间绘制"玩家"对象。 我有顶层、中间层和底层。中间层是空的，我打算在那里绘制播放器以增加深度。我不知道在代码中的哪个位置添加我的播放器更新功能，我也觉得在地图渲染中有一个播放器更新功能不是很OOP。

在注释中是我如何获取图层名称，并且我有一个可以处理绘图的播放器更新功能。

提前感谢您的任何建议\解释。

用于呈现地图的代码：

$(function() {
var c = document.getElementById("canvas").getContext('2d');
scene = {
layers: [],
renderLayer: function(layer) {
/*
if(layer.name == "Middle"){
player.update();
}
*/
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) {
//console.log(scene);
var i = $("<img />", { src: src })[0];
c.drawImage(i, 0, 0);
});
}
},
renderLayers: function(layers) {
layers = Array.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() {
return $.ajax({
url: "map.json",
dataType: "text json"
}).done($.proxy(this.loadTileset, this));
}
};
scene.load();
});
renderMap = function(){
scene.renderLayers();
}

Answer 1

你的理解是对的。 我建议分别绘制每个图层。有了这个，您可以在指定的图层之间绘制播放器，并且还可以更好地控制可见性。

您可能知道，在平铺中，您可以添加多个图层。在游戏中单独加载它们并逐个绘制它们。

所以你必须以这样一种方式拆分你的renderLayers((，即不是一次绘制所有图层(layers.forEach(this.renderLayer(; (，而是按照给定的顺序绘制。

伪代码：

scene.renderLayer(0);
scene.renderLayer(1);
player.Draw()
scene.renderLayer(2);