Рисование игрока между Tiled .json проанализировало слои - PullRequest
Новая
       9

Рисование игрока между Tiled .json проанализировало слои

0 голосов
/ 27 мая 2018

Привет, мир! Впервые знаменитое переполнение стека!

Я анализирую Tiled-made карту .json (просто тест) из Чтение файла редактора карт JSON Tiled и отображение на холсте

Я не совсем понимаю функцию renderLayer, и, если это целесообразно, откроет новый вопрос по этому вопросу.Из моего грубого понимания он рендерит каждый слой плиткой и подталкивает к финальной «сцене» img, которая будет нарисована.

Мой вопрос, в частности, заключается в том, как нарисовать объект "игрок" между слоями.У меня есть верхний, средний и нижний слой.Средний слой пуст и там, где я собираюсь нарисовать игрока, чтобы добавить глубину.Я не знаю, где в коде добавить функцию обновления плеера, и мне также кажется, что функция обновления плеера внутри карты не очень хороша.

В комментариях я могу получитьимя слоя, и у меня есть функция обновления игрока, которая будет обрабатывать рисование.

Заранее благодарен за любые предложения \ объяснения.

Код для рендеринга карты: 

$(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();
}

1 Ответ

0 голосов
/ 28 мая 2018

Ваше понимание верно.Я предлагаю рисовать каждый слой отдельно.Благодаря этому вы можете рисовать ваш проигрыватель между указанными слоями, а также иметь больший контроль над видимостью.

Как вы, возможно, знаете, в плитке вы можете добавить несколько слоев.Загрузите их отдельно в своей игре и нарисуйте их один за другим.

Таким образом, вы должны разделить ваш renderLayers () таким образом, чтобы не все слои отображались одновременно (layer.forEach (this.renderLayer);), но в заданном порядке.

PseudoКод: 

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