Question

我使用菱形图案生成等距瓷砖地图：

tileWidth = 128;
tileHeight = 94;

for (var x = 0; x < rows; x++) {
  for (var y = 0; y < cols; y++) {
    var screenX = (x - y) * tileWidthHalf;
    var screenY = (x + y) * tileHeightHalf;
    drawTile(screenX, screenY);
  }
}

这正确呈现，但现在我无法将屏幕坐标（鼠标位置）转换回等距坐标。

我试图扭转数学：

var x = _.floor(screenY / (tileWidth / 2) - (screenX / tileWidth / 2));
var y = _.floor(screenY / (tileHeight / 2) + (screenX / tileHeight / 2));

它适用于0, 0磁贴，但之后无法生成正确的值。

我只是无法提出正确的数学 - 我错过了一些微不足道的事情，或者我对这个过程完全错了吗？

Answer 1

我不知道你是如何想出这个解决方案的。你必须解决方程系统，它给出了以下解决方案：

x = 0.5 * ( screenX / tileWidthHalf + screenY / tileHeightHalf)
y = 0.5 * (-screenX / tileWidthHalf + screenY / tileHeightHalf)

如果您需要图块索引，请使用代码中的floor。

我只能猜测坐标系中瓷砖的对齐情况。但是，根据您在评论中发布的屏幕截图，我假设您需要将screenX与(screenX - tileWidthHalf)交换以获得准确的值。

Answer 2

我正在为w撰写tileWidth，为h撰写tileHeight。使用这种表示法，你基本上有一个转换

⎛x⎞ ↦ ⎛w/2 -w/2⎞ ⎛x⎞
⎝y⎠   ⎝h/2  h/2⎠ ⎝y⎠

你需要反过来。对于2×2矩阵的逆，存在simple formula。交换左上角和右下角的条目。否定其他两个。用行列式划分所有东西。使用它，你有逆转换：

⎛x⎞ ↦ 2/ ⎛ h/2 w/2⎞ ⎛x⎞ = ⎛ 1/w 1/h⎞ ⎛x⎞
⎝y⎠   wh ⎝-h/2 w/2⎠ ⎝y⎠   ⎝-1/w 1/h⎠ ⎝y⎠

所以在你的符号中你得到了

x = screenY / tileHeight + screenX / tileWidth
y = screenY / tileHeight - screenX / tileWidth

这也是Nico写的内容。将非整数坐标转回整数取决于您为每个图块放置参考点的位置。

将屏幕坐标转换为等距地图坐标

2 个答案: