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

What is the correct way to draw isometric tiles in a 2D game?

我读过引用（如这个），其建议的瓷砖在渲染将方式锯齿状的2D阵列重新地图presentation在每列中。我想，他们应该在一个钻石时尚，哪里还有什么被绘制到屏幕上关乎更紧密的二维数组将是什么样子，只要转动一点点绘制了。

I've read references (such as this one) that suggest the tiles be rendered in a way that will zig-zag each column in the 2D array representation of the map. I imagine that they should be drawn more in a diamond fashion, where what gets drawn to the screen relates more closely to what the 2D array would look like, just rotated a little.

是否有优势和劣势，以这两种方法？

Are there advantages or disadvantages to either method?

推荐答案

更新：修正地图绘制算法，增加了更多的插图，改变了格式化的

也许是优势，为锯齿形技术映射瓷砖的屏幕可以说是瓷砖的 X 和是的坐标上的垂直和水平轴。

Perhaps the advantage for the "zig-zag" technique for mapping the tiles to the screen can be said that the tile's x and y coordinates are on the vertical and horizontal axes.

图中的钻石的方式：

通过绘制轴测图使用在金刚石拉丝，我认为是指只呈现地图使用嵌套的为 -loop在二维阵列，如下面的例子：

By drawing an isometric map using "drawing in a diamond", which I believe refers to just rendering the map by using a nested for-loop over the two-dimensional array, such as this example:

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

优势：的

该方法的优点是，它是一个简单的嵌套为 -loop具有相当直截了当的逻辑，在所有瓷砖中都能正常工作。

The advantage to the approach is that it is a simple nested for-loop with fairly straight forward logic that works consistently throughout all tiles.

缺点：的

一个缺点的方法是， X 和是坐标的地图上的瓦片将增加对角线，这可能使它更难以直观映射屏幕到psented作为数组地图重新$ P $上的位置：

One downside to that approach is that the x and y coordinates of the tiles on the map will increase in diagonal lines, which might make it more difficult to visually map the location on the screen to the map represented as an array:

全尺寸图片

Full size image

不过，也将是一个陷阱，以实现上面的例子中code - 在前面的瓷砖前要绘制的渲染顺序会​​引起地砖，都应该是背后某些砖：

However, there is going to be a pitfall to implementing the above example code -- the rendering order will cause tiles that are supposed to be behind certain tiles to be drawn on top of the tiles in front:

为了修正这个问题，里面的为 -loop的订单必须得到扭转 - 从最高值开始，并呈现向较低值：

In order to amend this problem, the inner for-loop's order must be reversed -- starting from the highest value, and rendering toward the lower value:

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

通过上述修正，在地图上的呈现应当纠正：​​

With the above fix, the rendering of the map should be corrected:

Z形的方法：

优势：的

也许的锯齿形的做法的好处是，呈现的映像可能会出现多一些垂直紧凑，比钻石的方法：

Perhaps the advantage of the "zig-zag" approach is that the rendered map may appear to be a little more vertically compact than the "diamond" approach:

缺点：的

这是试图实现锯齿技术，缺点可能是因为它是一个有点困难，写的渲染code，因为它不能写成简单的一个嵌套的的 -loop横跨阵列中的每个元素：

From trying to implement the zig-zag technique, the disadvantage may be that it is a little bit harder to write the rendering code because it cannot be written as simple as a nested for-loop over each element in an array:

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
        )

另外，它可能是一个有点难以揣摩瓷砖的坐标由于渲染顺序的交错性质：

Also, it may be a little bit difficult to try to figure out the coordinate of a tile due to the staggered nature of the rendering order:

注：包括在此答案的插图用Java实现的瓦片渲染code presented创建，具有以下 INT 数组作为图：

Note: The illustrations included in this answer were created with a Java implementation of the tile rendering code presented, with the following int array as the map:

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

平铺图像：

对瓷砖的宽度和高度的注

变量 tile_width 和 tile_height 这是在上述code例子用来指宽度和

The variables tile_width and tile_height which are used in the above code examples refer to the width and height of the ground tile in the image representing the tile:

使用图像的尺寸将工作，只要该图像尺寸和瓷砖尺寸匹配。否则，该元件地图可以与地砖之间的间隙呈现

Using the dimensions of the image will work, as long as the image dimensions and the tile dimensions match. Otherwise, the tile map could be rendered with gaps between the tiles.