algorithm - 在等距六边形平铺引擎中转换屏幕到 map 坐标？

Question

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

但是，为了实现这一点，我不得不摆弄这些值(图 block 大小、平铺算法)以使图 block 正确适合。这是一个示例磁贴:

拼贴大小为 62x32，拼贴时，每个拼贴在 x 方向移动 47 (cw)，在 y 方向移动 16 (ch) 以正确适应。

这就是我从 map 坐标计算屏幕坐标(用于绘制图 block )的方式:

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;
}

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

这是 map 坐标系的样子以及图 block 的绘制方式:

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

有没有人有什么想法？

谢谢。

Answer 1

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

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