在等距六边形平铺引擎中转换屏幕到地图坐标？

Question

我正在开发一个使用六边形网格的 TBS 游戏。但是，我希望它是等距的（看起来不错并且像素艺术），并且平铺引擎运行良好，结果如下：

但是，为了实现这一点，我不得不调整值（图块大小、分块算法）以使图块正确匹配。 这是一个示例图块：

平铺大小为 62x32，平铺时，每个平铺在 x 上移动 47 (cw)，在 y 上移动 16 (ch) 以正确匹配。

这就是我根据地图坐标计算屏幕坐标（用于绘制图块）的方法：

function toScreen(x, y, z, offset)
{
    offset = ifndef(offset, {x: 0, y: 0});
    var ret = new Vector2D(y*Tile.cw + x*Tile.cw -offset.x, -x*Tile.ch + y*Tile.ch -offset.y -z*16);
    ret.y += (Tile.height*this.h)/2; //center the map on screen
    return ret;
}

现在，我需要能够选择图块，并从屏幕（鼠标）坐标中获取地图坐标。我不知道是否有可能只是以某种方式转换坐标（我所有的尝试都失败了）。

这是地图坐标系的样子以及瓦片的绘制方式：

瓷砖的选择当然必须是像素完美的，但仅适用于平面瓷砖（不需要选择越过上面瓷砖的树），因此算法可以假设所有瓷砖都是平面的（就像我举的例子）。有人对如何做到这一点有任何想法吗？我可以“蛮力”它，通过将 [0,0] 处的图块转换为屏幕空间，并查看指针是否在其中，或者它有多远，然后慢慢地逐个图块行走，直到找到一个包含鼠标坐标的图块（或没有包含鼠标坐标的图块），但我正在寻找一种更优雅的解决方案，如果存在的话。

有人有什么想法吗？

谢谢。

Answer 1

看看这篇文章对六边形网格的深入处理：http://playtechs.blogspot.com/2007/04/hex-grids.html

有一节介绍如何将直角坐标转换为六角坐标。通过添加将六边形转换为正六边形的额外仿射变换，您可以轻松地将他的方法调整为您的“等距六边形平铺”。