Dibujando mundos de juego isométricos

Actualización: Se ha corregido el algoritmo de renderizado del mapa, se han añadido más ilustraciones, se ha cambiado la configuración.

Tal vez la ventaja de la técnica de "zig-zag" para mapear los mosaicos a la pantalla se puede decir que las coordenadas x y y de los mosaicos están en los ejes vertical y horizontal.

"Dibujo en un diamante" enfoque:

Dibujando un mapa isométrico usando "dibujar en un diamante" , que creo que se refiere a simplemente representar el mapa mediante el uso de un anidado for - bucle sobre la matriz bidimensional, como este ejemplo:

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

Ventaja:

La ventaja del enfoque es que es un simple bucle anidado for con lógica bastante directa que funciona consistentemente en todas las fichas.

Desventaja:

Un inconveniente de este enfoque es que las coordenadas x y y de las fichas en el mapa aumentarán en líneas diagonales, lo que podría hacer más difícil mapee visualmente la ubicación en la pantalla al mapa representado como una matriz:

Sin embargo, va a haber una trampa para implementar el código de ejemplo anterior the el orden de representación hará que los azulejos que se supone que están detrás de ciertos azulejos se dibujen en la parte superior de los azulejos en frente:

Para enmendar este problema, el orden del bucle interno for debe invertirse starting comenzando desde el valor más alto, y renderizado hacia el valor inferior:

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

Con la corrección anterior, la representación del mapa debe corregirse:

"zig-zag" enfoque:

Ventaja:

Tal vez la ventaja del enfoque "zig-zag" es que el mapa renderizado puede parecer un poco más compacto verticalmente que el enfoque "diamante":

Desventaja:

De intentar implementar la técnica zig-zag, la desventaja puede ser que es un poco más difícil escribir el código de renderizado porque no se puede escribir tan simple como un bucle anidado for sobre cada elemento en un 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
        )

Además, puede ser un poco difícil tratar de averiguar la coordenada de un mosaico debido a la naturaleza escalonada del orden de representación:

Nota: Las ilustraciones incluidas en esta respuesta fueron creadas con una implementación Java del código de representación de teselas presentado, con el siguiente array int como mapa:

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

Las imágenes del mosaico son:

• tileImage[0] -> Una caja con una caja dentro.
• tileImage[1] -> Una caja negra.
• tileImage[2] -> Una caja blanca.
• tileImage[3] -> Una caja con un objeto gris alto en ella.

Una Nota sobre Anchos y Alturas de Baldosas

Las variables tile_width y tile_height que se utilizan en los ejemplos de código anteriores se refieren a la anchura y la altura del suelo azulejo en la imagen que representa el azulejo:

El uso de las dimensiones de la imagen funcionará, siempre y cuando las dimensiones de la imagen y las dimensiones del mosaico coincidan. De lo contrario, el mapa de teselas se podría representar con espacios entre las teselas.