将X，Y网格坐标转换为Crafty.js等距坐标

Question

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

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

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

我们如何将2D网格映射到下面的图像，左上方的板空间映射到（0,6）或任何一个？注释

Answer 1

我也在狡猾地工作，试图制作17x17板。目前我只是使用地图将每个位置转换为相应的Crafty位置。我意识到这是令人难以置信的hacky，可能很慢，但我老实说没有时间。

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

我基本上已经将它用于一个有用的等式（但仅在创建地图时有用）：

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

所以我在下面有一张似乎有用的地图（这是rawToCrafty地图）：

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

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

Answer 2

这个一般概念的名称是Projection。

要将游戏板绘制到屏幕上，您可以从游戏板坐标投射到屏幕坐标。

要获取鼠标单击位置并确定单击板上的位置，您可以从屏幕坐标投射到游戏板坐标。

这两个投影是彼此相反的。

在游戏编程中执行这些投影的常用方法是使用矩阵。

Answer 3

如果我理解正确，您希望将以下输入映射到以下输出：

输入：

0,0   0,1   0,2   0,3   0,4   0,5
1,0   1,1   1,2   1,3   1,4   1,5
2,0   2,1   2,2   2,3   2,4   2,5
3,0   3,1   3,2   3,3   3,4   3,5
4,0   4,1   4,2   4,3   4,4   4,5
5,0   5,1   5,2   5,3   5,4   5,5

输出：

0,6   0,5   1,4   1,3   2,2   2,1
0,7   1,6   1,5   2,4   2,3   3,2
1,8   1,7   2,6   2,5   3,4   3,3
1,9   2,8   2,7   3,6   3,5   4,4
2,10  2,9   3,8   3,7   4,6   4,5
2,10  3,10  3,9   4,8   4,7   5,6

我的矩阵非常生疏。我确信使用它们会有一个整洁的方法，但我会给你我的hacky答案。

假设这不是一个更普遍的问题的例子，你可以做类似的事情：

function mapCoords(xIn,yIn){
    return {
        x:Math.floor((xIn+yIn)/2),
        y:6+xIn-yIn
    }
}

有一些概括，以及更优雅的方式，但据我所知，这解决了你的榜样。

Answer 4

//笛卡儿到等长：

isoX = cartX - cartY

isoY =（cartX + cartY）/ 2

//笛卡尔等距：

cartX =（2 * isoY + isoX）/ 2

cartY =（2 * isoY - isoX）/ 2