3

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

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

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

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

在此处输入图像描述

4

4 回答 4

1

我也在狡猾地工作，试图制作一个 17x17 的板。目前，我只是使用地图将每个位置转换为相应的狡猾位置。我意识到它非常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 }
...

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

于 2012-11-03T01:59:36.927 回答
0

这个通用概念的名称是Projection。

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

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

这两个投影互为倒数。

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

于 2012-10-26T18:38:43.707 回答
0

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

输入：

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-02T15:44:54.263 回答
0

//笛卡尔到等距：

isoX = cartX - cartY

isoY = (cartX + cartY) / 2

//等距到笛卡尔：

购物车 = (2 * isoY + isoX) / 2

购物车 = (2 * isoY - isoX) / 2

于 2014-07-02T18:55:16.313 回答