Question

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

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

如果我正确理解这一点，那么您想基于x，y获取1 | 2 | 3值正确吗？您可以执行以下操作：

((y * total # of rows) + x) + 1

这会将2D x，y索引转换为一个索引，如您所述，该索引为1 | 2 | 3。该公式基于您的示例，其中的计数从1开始而不是0。如果要将其转换为0，请删除+ 1。

如果您具有输入/字符的宽度和高度，或者大概的位置，则可以使用GetX（int posX）和GetY（int posY）来根据位置获取x和y。将位置转换为x，y值后，请使用上面的公式。

int GetX(int posX)
{
    return (posX / 32);
}

int GetY(int posY)
{
    return (posY / 32);
}

int GetIndex(int posX, int posY)
{
    return ((GetY(posY) / totalRows) + GetX(posX)) + 1;
}

Answer 2

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

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

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

从图块ID获取X和Y坐标

2 个答案: