如何在等距平铺贴图中转换鼠标位置？

Question

所以我自己写了第一部分(算法)来计算每个瓷砖在绘制这张地图时应该放在哪里的位置(见下文).然而,我需要能够将鼠标位置转换为适当的单元格,我几乎已经脱掉了我的头发,因为我无法弄清楚如何从鼠标位置获取单元格.我担心的是它涉及一些相当高的数学或者我只是容易的东西,我无法注意到.
例如,如果鼠标位置是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);

说到地图,每个单元格(透明图块56x28像素)放置在前一个单元格的中心(或单元格1; 1的零位置),上面是我用于转换单元格到位置的代码.我为位置到单元尝试了很多东西和计算但是每个都失败了.

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

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是实际的图块大小,而不是图像本身.正如你在我的示例图片上看到的那样,我在瓷砖下添加了污垢,这只是为了更容易渲染,实际尺寸为24 x 12.坐标也是"浮动"以保持结果网格x和y向下舍入.

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

将从Y = 0和X = 0开始渲染平铺以映射大小.渲染第一行后,向下和向左跳过几个像素.这将使下一行瓷砖重叠第一行,这是保持各层重叠的好方法.您应该渲染切片,然后再移动到下一个切片上的任何内容.

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

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

Answer 2

(1) x` = 28x -28 + 28y -28  = 28x + 28y -56
(2) y` = -14x +14 +14y -14 = -14x + 14y

转型表:

[x] [28  28 -56 ] = [x`]
[y] [-14 14  0  ]   [y`]
[1] [0    0  1  ]   [1 ]

[28  28 -56 ] ^ -1 
[-14 14  0  ]
[0    0  1  ] 

用绘图仪计算(我喜欢wims)

[1/56 -1/28  1 ]
[1/56  1/28  1 ]
[0      0    1 ]

x = 1/56*x` - 1/28y` + 1
y = 1/56*x` + 1/28y` + 1