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

Question

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

我们正试图将当前拥有的X,Y坐标(例如，0,0)转换为对应的ISO坐标，以便与Crafty.js一起使用。我们这样做的原因是因为服务器会随机生成一个传统的15×15网格空间的游戏棋盘，我们希望以等距投影的3D方式呈现它，但是CraftyJS使用的是从屏幕左上角开始的奇怪坐标系统。

我们该如何将2D网格映射到以下图片中，并使左上方的棋盘空间映射到(0,6)或任何 ? 注释之一？

- javanix

---

你能详细说明一下为什么需要这样做吗？ - Shmiddty

这些可能会有所帮助：http://www.wildbunny.co.uk/blog/2011/03/27/isometric-coordinate-systems-the-modern-way/ 和 http://gamedev.stackexchange.com/questions/30566/how-would-i-translate-screen-coordinates-to-isometric-coordinates - IVlad

Answer 1

我也在使用Crafty，尝试制作一个17x17的棋盘。目前我只是使用地图将每个位置转换为其对应的Crafty位置。我知道这非常粗糙，可能很慢，但我实在没有时间。

我注意到上面的数字有点不对。这里有一个更好的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 }
...

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

- Chris

Answer 2

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

输入：

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

我的矩阵知识有点生疏。我相信肯定有一种整洁的方法可以使用它们来完成这个任务，但是我将给出一个比较取巧的答案。

假设这不是更普遍问题的一个实例，您可以尝试以下方法：

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

可能还有更多的概括和更优雅的方法，但据我理解，这可以解决你的问题。

- Richard Marr

Answer 3

//笛卡尔坐标系转等轴投影坐标系：

等轴投影X = 笛卡尔X - 笛卡尔Y

等轴投影Y = (笛卡尔X + 笛卡尔Y) / 2

//等轴投影坐标系转笛卡尔坐标系：

笛卡尔X = (2 * 等轴投影Y + 等轴投影X) / 2

笛卡尔Y = (2 * 等轴投影Y - 等轴投影X) / 2

- Binary Alchemist

Answer 4

这个概念的通用名称是投影。

为了将游戏板绘制到屏幕上，您需要从游戏板坐标投影到屏幕坐标。

为了获取鼠标点击位置并确定点击了哪个位置的棋盘，您需要从屏幕坐标投影到游戏板坐标。

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

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

- mbeckish

---

更多信息请查看此帖子：http://gamedev.stackexchange.com/questions/34787/how-to-convert-mouse-coordinates-to-isometric-indexes?rq=1。他甚至使用了你使用的相同示例图像！ - mbeckish

我认为他所问的并不是物品的像素位置，而更多地是如何翻译网格。因此，如果他从服务器获取到数据，说“方块x0和y0应该是草”，那么他如何将其翻译成Crafty的坐标？（0.0在6x6网格上可能会被翻译成类似于6.0的东西） - Chris

是的，我当时没想清楚，就从他那里复制过来了，后来才意识到我们根本不使用相同的系统:) 我就知道一定有什么东西让事情变得更加复杂。 - javanix

@Chris - 我认为你所说的“翻译网格”是我所说的“从游戏板坐标投影”。他可以将游戏板坐标投影到Crafty坐标，而不是从游戏板坐标投影到屏幕坐标。 - mbeckish