javascript - 从图 block ID 获取 X 和 Y 坐标

Question

我对可能是一些非常简单的数学运算感到困惑。我需要从每个引用 ID 的图 block 中获取 X 和 Y 坐标。下面的网格显示了生成 ID 的顺序。每个图 block 的宽度和高度均为 32。数字 x 和 y 将等于 (0,0)。这是我开始使用 tileset 用 Canvas 制作的游戏。

1|2|3
4|5|6
7|8|9

到目前为止，对于 X，我已经想出了...

(n % 3) * 32 - 32//3 是源图像的宽度除以 32

对于 Y...

(n/3) * 32

这显然是错误的，但这是我最接近的，而且我认为我与实际公式相差不远。

到目前为止，这是我的实际代码:

function startGame() {
  const canvas = document.getElementById("rpg");
  const ctx = canvas.getContext("2d");
  const tileSet = new Image();
  tileSet.src = "dungeon_tiles.png";
  let map = {
    cols: 10,
    rows: 10,
    tsize: 32,
    getTileX: function(counter, tiles) {
      return ((tiles[counter] - 1) % 64) * 32;
    },
    getTileY: function(counter, tiles) {
      return ((tiles[counter] - 1) / 64) * 32;
    }
  };
  let counter = 0;
  tileSet.onload = function() {
    for (let c = 0; c < map.cols; c++) {
      for (let r = 0; r < map.rows; r++) {
        let x = map.getTileX(counter, mapObj.layers[0].data); // mapObj.layers[0].data is the array of values
        let y = map.getTileY(counter, mapObj.layers[0].data);
        counter += 1;
        ctx.drawImage(
          tileSet, // image
          x, // source x
          y, // source y
          map.tsize, // source width
          map.tsize, // source height
          r * map.tsize, // target x
          c * map.tsize, // target y
          map.tsize, // target width
          map.tsize // target height
        );
      }
    }
  };
}

Answer 1

如果 1 是 (0,0) 并且每个图 block 是 32*32，那么找到你的水平位置很简单 32*(t-1) 其中 t 是您的图 block 编号。 t-1 因为您的图 block 从 1 而不是 0 开始。现在，每行有 3 个图 block ，因此您希望每 3 个图 block 重置一次，因此 x 的最终公式为 32*((t-1)% 3)。

对于垂直位置，它几乎是相同的，但是您只想每 3 个图 block 将您的位置增加一次 32，所以这是您的 y: 32*floor((t-1)/3)。

floor((t-1)/3) 只是整数除法，因为数字总是正数。