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

我们正在开发基于2D板坐标开发和定义的Javascript游戏。将X，Y网格坐标转换为Crafty.js等距坐标

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

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

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

enter image description here

2012-10-26 javanix

您能否详细说明为什么你需要这样做？ – Shmiddty

这些可能有所帮助：http://www.wildbunny.co.uk/blog/2011/03/27/isometric-coordinate-systems-the-modern-way/和http://gamedev.stackexchange.com/questions/ 30566 /如何翻译屏幕坐标到等距坐标 – IVlad

我在狡猾的工作，试图做一个17x17板。目前，我只是简单地使用地图来隐藏每个位置的相应狡猾位置。我意识到这非常令人难以置信，可能很慢，但我真的没有时间。

我注意到上面的数字在上图中有点偏离。在这种情况下，Crafty的工作原理可以更好地理解。白色的数字是原始数据，我从服务器获取，而黑色的数字是什么狡猾的需要呈现这款主板： Crafty Layout

创建当我基本上算出来了几分有用的方程式（但只有用地图）：

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

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

来源

2012-11-03 01:59:36 Chris

这个笼统的概念名称是Projection。

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

要获取鼠标单击位置并确定单击了棋盘上的哪个位置，可以从屏幕坐标投影到游戏棋盘坐标。

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

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

来源

2012-10-26 18:38:43 mbeckish

欲了解更多信息，请看这篇文章：http://gamedev.stackexchange.com/questions/34787/how-to-convert-mouse坐标 - 对等距的索引？RQ = 1。他甚至使用了您使用的相同示例图像！ – mbeckish

我认为他所要求的不是物品的像素位置，而是更多的是如何翻译网格。因此，如果他从服务器获取“square x0 and y0 should grass”的数据，他如何将其转化为诡计的坐标？（0.0会翻译成6x6网格上的东西，比如6.0） – Chris

是的，我没有想过，并从他那里复制，然后意识到我们甚至没有使用相同的系统:)我知道有一些东西使它更复杂。 – javanix

如果我理解正确的话，你希望下面的输入映射到以下的输出：

输入：

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

将会有概括做，而且做起来的更优雅的方式，但我的理解这解决你的例子。

来源

2012-11-02 15:44:54

//笛卡尔坐标到等距：

isoX = cartX - 卡蒂

isoY =（cartX +卡蒂）/ 2

//等距到直角坐标：

cartX =（2 * isoY + isoX）/ 2

cartY =（2 * isoY - isoX）/ 2

来源

2014-07-02 18:55:16

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

回答

相关问题