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

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

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