algorithm - 如何在等距平铺 map 中转换鼠标位置？

Question

所以我设法自己编写了第一部分(算法)来计算绘制这张 map 时每个图 block 的位置(见下文)。但是，我需要能够将鼠标位置转换为适当的单元格，而且我几乎把头发扯掉了，因为我想不出如何从鼠标位置获取单元格的方法。我担心的是它涉及一些相当高的数学或一些我无法注意到的简单事情。
例如，如果鼠标位置是 112;35，我如何计算/转换它以得到该位置的单元格是 2;3？ 也许这里有一些非常擅长数学思维的程序员可以帮助我解决这个问题，或者有人知道该怎么做或可以提供一些信息？

var cord:Point = new Point();
cord.x = (x - 1) * 28 + (y - 1) * 28;
cord.y = (y - 1) * 14 + (x - 1) * (- 14);

说到 map ，每个单元格(透明图 block 56x28 像素)都放在前一个单元格的中心(或单元格 1;1 的零位置)，上面是代码 I用于将单元格转换为位置。我为位置到单元尝试了很多事情和计算，但每一个都失败了。

编辑: 阅读大量信息后，似乎 使用屏幕外颜色映射(颜色映射到图 block )是最快和最有效的解决方案？

Answer 1

我知道这是一篇旧帖子，但我想更新它，因为有些人可能仍在寻找这个问题的答案，就像我今天早些时候一样。但是，我自己想通了。还有一种更好的渲染方式，这样您就不会遇到拼贴重叠问题。

代码就这么简单:

mouse_grid_x = floor((mouse_y / tile_height) + (mouse_x / tile_width));
mouse_grid_y = floor((-mouse_x / tile_width) + (mouse_y / tile_height));

mouse_x 和 mouse_y 是鼠标屏幕坐标。

tile_height 和 tile_width 是实际的图 block 大小，而不是图像本身。正如您在我的示例图片中看到的那样，我在我的瓷砖下添加了污垢，这只是为了更容易渲染，实际尺寸为 24 x 12。坐标也被“地板化”以保持结果网格 x 和 y 向下舍入。

另请注意，我从 y=0 和 x=tile_with/2(红点)渲染这些图 block 。这意味着我的 0,0 实际上是从瓷砖的顶角开始的(倾斜的)，而不是在露天。将这些图 block 视为旋转的正方形，您仍然希望从 0,0 像素开始。

瓦片将从 Y = 0 和 X = 0 开始渲染到 map 大小。渲染完第一行后，您可以向下和向左跳过几个像素。这将使下一行瓷砖与第一行重叠，这是保持图层重叠的好方法。您应该渲染图 block ，然后在移动到下一个图 block 之前渲染该图 block 上的任何内容。

我也会添加一个渲染示例:

for (yy = 0; yy < map_height; yy++)
{
     for (xx = 0; xx < map_width; xx++)
     {
          draw tiles here with tile coordinates:
          tile_x = (xx * 12) - (yy * 12) - (tile_width / 2)
          tile_y = (yy * 6) + (xx * 6)

          also draw whatever is on this tile here before moving on
     }
}