Question

在Social Isometric Games书中，第53页，有一个方法的描述，它使用鼠标光标坐标定义标题。它运作良好，但目前尚不清楚使用哪些原则来使其工作。有人可以详细解释这个算法吗？也许你有一些配方的链接。或许你可以告诉我应该看哪个科学领域。

以下是我感兴趣的代码示例：

var col = (e.clientY - gridOffsetY) * 2;  //???
col = ((gridOffsetX + col) - e.clientX) / 2;  //???

var row = ((e.clientX + col) - tile.height) - gridOffsetX; //???

Answer 1

我可以看到，菱形单元的高度是2 * p，宽度是4 * p，其中p是特征尺寸值。

让我们的基点坐标 - 顶部单元格的顶部顶点是（0,0）。

因此，右上角矢量为tr=(2p, p)，左上角矢量为tl=(-2p, p)。

让鼠标点相对于基点为(mx, my)。要查找它所属的单元格，可以通过基础向量(mx, my)分析向量tl, tr

 mx = R * tl.x + C * tr.x
 my = R * tl.y + C * tr.y
 or
 mx = R * 2 * p + C * p
 my = R * (- 2 * p) + C * p

找到C，我们可以添加两个方程式

mx + my = 2 * C * p
C = (mx + my) / (2 * p)
column = Floor(C)  //integer part of C

找到R，减去方程式

R = (mx - my) / (4 * p)
row = Floor(R)

其他计算考虑了屏幕上网格的移动

使用鼠标光标坐标定义标题。等距社交游戏

1 个答案: