javascript - 将 X、Y 网格坐标转换为 Crafty.js 等距坐标

Question

我们正在开发一款基于 2D 棋盘坐标开发和定义的 Javascript 游戏。

我们正在尝试将我们当前拥有的 X,Y 坐标(即 0,0)转换为相应的 ISO 坐标，以便与 crafty.js 一起使用。

我们这样做的原因是因为服务器随机生成一个游戏板，它是传统的 15x15 空间网格，我们想在等距 3D 中渲染它，但狡猾的 JS 使用一个奇怪的坐标系，从屏幕左上角。

我们如何将 2D 网格映射到下图，左上角的棋盘空间映射到 (0,6) 或任何一个？注释？

Answer 1

我也在狡猾地工作，试图制作一个 17x17 的板。目前我只是使用 map 将每个位置隐藏到它对应的 Crafty 位置。我意识到这非常骇人听闻，可能很慢，但老实说我没有时间。

我注意到上图中的数字有点偏差。下面是 Crafty 在这种情况下如何工作的更好的可视化。白色数字是我从服务器获取的原始数据，黑色数字是 Crafty 需要渲染此板的数据:

我基本上已经计算出一个有点用的方程式(但只在创建 map 时有用):

Even rows (starting at 0)
- y (row) = starting at row number (base 0) then increment by 1 for each x (column)
- x (col) = previous odds's first x, then follow pattern: +0, +0, +1, +1, +2, +2...
Odd rows (starting at 0)
- y (row) = starting at row number (base 0) then increment by 1 for each x (column)
- x (col) = +1 to previous even's first x, then follow pattern: +0, +1, +1, +2, +2, +3...

所以我在下面有一张似乎有效的 map (这是 rawToCrafty map ):

//Row 0
"00.00": { "y": 0, "x": 8 }
"01.00": { "y": 1, "x": 8 }
"02.00": { "y": 2, "x": 9 }
"03.00": { "y": 3, "x": 9 }
"04.00": { "y": 4, "x": 10 }
"05.00": { "y": 5, "x": 10 }
"06.00": { "y": 6, "x": 11 }
"07.00": { "y": 7, "x": 11 }
"08.00": { "y": 8, "x": 12 }
...

是的，有更好的方法，但这是蛮力方法。祝你好运!