时间戳

首页 > 解决方案 > 在 Tiled .json 解析层之间绘制播放器

json - 在 Tiled .json 解析层之间绘制播放器

问题描述

Hello world 第一次著名的堆栈溢出！

我正在从读取 JSON Tiled 地图编辑器文件并显示到画布中解析 Tiled-made .json 地图（只是一个测试）

我不完全理解 renderLayer 函数，如果可以的话，我会提出一个新的问题。根据我的粗略理解，它按图块渲染每一层并推送到将要绘制的最终“场景”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();
}

标签： jsonlayertiled

解决方案

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

您可能知道，在平铺中您可以添加多个图层。将它们分别加载到您的游戏中并一一绘制。

因此，您必须以一种方式拆分您的 renderLayers()，即并非所有层都一次绘制 (layers.forEach(this.renderLayer); )，而是按给定的顺序绘制。

伪代码：

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

推荐阅读