节点等距图映射渲染第二层问题

Question

我正在以节点构建等距地图图像，并且我陷入了第二层渲染，我不知道如何在y轴上调整项目

到目前为止是我的代码：

let i = 0;
for (let layer of map) {
  const xTiles = layer.length;
  const yTiles = layer[0].length;

  for (let Xi = xTiles - 1; Xi >= 0; Xi--) {
    for (let Yi = 0; Yi < yTiles; Yi++) {
      const imgIndex = layer[Xi][Yi];
      if (imgIndex == null || imgIndex == -1) {
        continue;
      }
      const tile = tiles[imgIndex];

      const offX = (Xi * tileColOffset / 2 + Yi * tileColOffset / 2 + originX) + (i * ((tileColOffset - tile.width) / 2));
      const offY = (Yi * tileRowOffset / 2 - Xi * tileRowOffset / 2 + originY) - (i * ((tileRowOffset / 2)));

      ctx.drawImage(tile, offX, offY);
    }
  }
  i++;
}

我可以将精灵置于x上轴但不在y上，可能是因为精灵的高度不同。上面的代码重现此

您可以看到较高的精灵非常居中，但小精灵不是。有建议吗？

谢谢！

Answer 1

刚刚发现我必须计算地面砖的半高度与精灵高度之间的差：

let i = 0;
for (let layer of map) {
  const xTiles = layer.length;
  const yTiles = layer[0].length;

  for (let Xi = xTiles - 1; Xi >= 0; Xi--) {
    for (let Yi = 0; Yi < yTiles; Yi++) {
      const imgIndex = layer[Xi][Yi];
      if (imgIndex == null || imgIndex == -1) {
        continue;
      }
      const tile = tiles[imgIndex];

      let offX, offY
      if (i === 0) {
        offX = (Xi * tileColOffset / 2 + Yi * tileColOffset / 2 + originX);
        offY = (Yi * tileRowOffset / 2 - Xi * tileRowOffset / 2 + originY);
      } else {
        offX = (Xi * tileColOffset / 2 + Yi * tileColOffset / 2 + originX) + (i * ((tileColOffset - tile.width) / 2));
        offY = (Yi * tileRowOffset / 2 - Xi * tileRowOffset / 2 + originY) + ((i * (tileRowOffset / 2 - tile.height)));
      }
      ctx.drawImage(tile, offX, offY);
    }
  }
  i++;
}