2d - 绘制等距游戏世界

Question

在 2D 游戏中绘制等距图 block 的正确方法是什么？

我读过引用资料(例如 this one )，建议以锯齿形方式渲染 map 的 2D 数组表示中的每一列。我想它们应该更多地以菱形方式绘制，其中绘制到屏幕上的内容与二维数组的外观更密切相关，只是旋转了一点。

这两种方法各有优缺点吗？

Answer 1

更新:更正了 map 渲染算法，添加了更多插图，更改了格式。

也许将图 block 映射到屏幕的“zig-zag”技术的优点可以说是图 block 的 x 和 y 坐标位于垂直方向上，水平轴。

“画钻石”方法:

通过使用“绘制菱形”来绘制等距 map ，我认为这指的是通过在二维数组上使用嵌套的 for 循环来渲染 map ，例如本例:

tile_map[][] = [[...],...]

for (cellY = 0; cellY < tile_map.size; cellY++):
    for (cellX = 0; cellX < tile_map[cellY].size cellX++):
        draw(
            tile_map[cellX][cellY],
            screenX = (cellX * tile_width  / 2) + (cellY * tile_width  / 2)
            screenY = (cellY * tile_height / 2) - (cellX * tile_height / 2)
        )

优点:

该方法的优点在于，它是一个简单的嵌套 for 循环，具有相当直接的逻辑，可以在所有图 block 中一致地工作。

缺点:

该方法的一个缺点是 map 上图 block 的 x 和 y 坐标将以对角线形式增加，这可能会使视觉映射变得更加困难屏幕上的位置到 map 上以数组表示:

但是，实现上述示例代码会存在一个陷阱 - 渲染顺序将导致本应位于某些图 block 后面的图 block 绘制在前面的图 block 之上:

为了修正这个问题，内部 for 循环的顺序必须颠倒——从最高值开始，向较低值渲染:

tile_map[][] = [[...],...]

for (i = 0; i < tile_map.size; i++):
    for (j = tile_map[i].size; j >= 0; j--):  // Changed loop condition here.
        draw(
            tile_map[i][j],
            x = (j * tile_width / 2) + (i * tile_width / 2)
            y = (i * tile_height / 2) - (j * tile_height / 2)
        )

通过上述修复，应该更正 map 的渲染:

“之字形”方法:

优点:

也许“之字形”方法的优点是渲染的 map 可能看起来比“菱形”方法在垂直方向上更紧凑:

缺点:

从尝试实现 zig-zag 技术来看，缺点可能是编写渲染代码有点困难，因为它不能像嵌套 for 循环那样简单数组中的每个元素:

tile_map[][] = [[...],...]

for (i = 0; i < tile_map.size; i++):
    if i is odd:
        offset_x = tile_width / 2
    else:
        offset_x = 0

    for (j = 0; j < tile_map[i].size; j++):
        draw(
            tile_map[i][j],
            x = (j * tile_width) + offset_x,
            y = i * tile_height / 2
        )

此外，由于渲染顺序的交错性质，尝试找出图 block 的坐标可能有点困难:

注意:此答案中包含的插图是使用所提供的图 block 渲染代码的 Java 实现创建的，并使用以下 int 数组作为 map :

tileMap = new int[][] {
    {0, 1, 2, 3},
    {3, 2, 1, 0},
    {0, 0, 1, 1},
    {2, 2, 3, 3}
};

平铺图像是:

• tileImage[0] -> 一个盒子，里面有一个盒子。
• tileImage[1] -> 一个黑框。
• tileImage[2] -> 一个白框。
• tileImage[3] -> 一个盒子，里面有一个高大的灰色物体。

关于图 block 宽度和高度的注释

上述代码示例中使用的变量tile_width和tile_height指的是代表瓦片的图像中地面瓦片的宽度和高度:

只要图像尺寸和图 block 尺寸匹配，就可以使用图像尺寸。否则，渲染的图 block map 可能会在图 block 之间存在间隙。