Javascript 将X、Y栅格坐标转换为Crafty.js等轴测坐标

我们正在开发一个基于二维棋盘坐标的Javascript游戏

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

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

我们如何将二维网格映射到下图，并将左上板空间映射到（0,6）或任意一个网格？注释

---

这个一般概念的名称是

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

要获取鼠标单击位置并确定在棋盘上单击的位置，请从屏幕坐标投影到游戏棋盘坐标

这两个投影是相反的

---

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

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

输入：

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

---

这里会有一些概括，以及更优雅的方法，但据我所知，这解决了您的示例。

我也在从事狡猾的工作，试图制作一块17x17板。目前，我只是简单地使用一个地图来将每个位置转换为它相应的狡猾位置。我意识到这是难以置信的骇客，可能很慢，但我真的没有时间

我注意到上图中的数字有点不一致。在这种情况下，这里有一个更好的关于诡计多端的形象。白色数字是我从服务器获得的原始数据，而黑色数字是Crafty渲染此板所需的：

我基本上已经计算出了一个有用的等式（但仅在创建地图时有用）：

因此，我在下面有一张似乎有效的地图（这是rawToCrafty地图）：

---

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

//笛卡尔到等轴测：

isoX=cartX-cartY

isoY=（cartX+cartY）/2

//等距到笛卡尔坐标：

cartX=（2*isoY+isoX）/2

---

cartY=（2*isoY-isoX）/2

您能详细说明为什么需要这样做吗？这些可能会有帮助：有关更多信息，请查看以下帖子：。他甚至使用了与你使用的相同的示例图像！我想他问的不是项目的像素位置，而是如何转换网格。所以，如果他从服务器上获得数据，说“正方形x0和y0应该是草”，他如何将其转换为crafty的坐标？（在6x6网格上，0.0会转换为6.0）是的，我没有思考并从他那里复制它，然后意识到我们甚至没有使用相同的系统：）我知道有一些东西使它更复杂。@Chris-我想你所说的“转换网格”就是我所说的“从游戏板坐标投影”。他可以从游戏板坐标投影到狡猾的坐标，而不是从游戏板坐标投影到屏幕坐标。

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

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