Node isometric tile map 渲染第二层问题

Question

我在 Node 中构建等轴测图瓦片图像，但卡在第二层渲染，我不知道如何调整 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++;
}

Node isometric tile map 渲染第二层问题

Node isometric tile map render second layer problem

tiles

isometric

node.js