Atualização: O algoritmo de renderização de mapa foi corrigido, adicionou mais ilustrações, mudou a formatação.
Talvez a vantagem da técnica "zig-zag" para mapear os ladrilhos para a tela possa ser dita de que os ladrilhos x
e as y
coordenadas estão nos eixos vertical e horizontal.
Abordagem "Desenho em diamante":
Ao desenhar um mapa isométrico usando "desenho em um diamante", acredito que se refere apenas à renderização do mapa usando um for
loop aninhado sobre a matriz bidimensional, como este exemplo:
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)
)
Vantagem:
A vantagem da abordagem é que é um simples aninhado for
loop com lógica bastante direta que funciona de forma consistente em todos os blocos.
Desvantagem:
Uma desvantagem dessa abordagem é que as coordenadas x
e y
dos blocos no mapa aumentarão em linhas diagonais, o que pode dificultar o mapeamento visual da localização na tela para o mapa representado como uma matriz:
No entanto, haverá uma armadilha na implementação do código de exemplo acima - a ordem de renderização fará com que os blocos que deveriam estar atrás de certos blocos sejam desenhados no topo dos blocos na frente:
Para corrigir esse problema, a for
ordem do loop interno deve ser revertida - iniciando no valor mais alto e renderizando no valor mais baixo:
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)
)
Com a correção acima, a renderização do mapa deve ser corrigida:
Abordagem "zig-zag":
Vantagem:
Talvez a vantagem da abordagem "zig-zag" seja que o mapa renderizado possa parecer um pouco mais verticalmente compacto do que a abordagem "diamante":
Desvantagem:
Ao tentar implementar a técnica de zig-zag, a desvantagem pode ser que é um pouco mais difícil escrever o código de renderização, porque não pode ser escrito tão simples quanto um for
loop aninhado sobre cada elemento em uma matriz:
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
)
Além disso, pode ser um pouco difícil tentar descobrir a coordenada de um bloco devido à natureza escalonada da ordem de renderização:
Nota: As ilustrações incluídas nesta resposta foram criadas com uma implementação Java do código de renderização de bloco apresentado, com a seguinte int
matriz como o mapa:
tileMap = new int[][] {
{0, 1, 2, 3},
{3, 2, 1, 0},
{0, 0, 1, 1},
{2, 2, 3, 3}
};
As imagens de bloco são:
tileImage[0] ->
Uma caixa com uma caixa dentro.
tileImage[1] ->
Uma caixa preta.
tileImage[2] ->
Uma caixa branca
tileImage[3] ->
Uma caixa com um alto objeto cinza.
Uma observação sobre larguras e alturas de lado a lado
As variáveis tile_width
e tile_height
que são usadas nos exemplos de código acima se referem à largura e altura do bloco do solo na imagem que representa o bloco:
O uso das dimensões da imagem funcionará, desde que as dimensões da imagem e as dimensões do bloco correspondam. Caso contrário, o mapa de blocos poderá ser renderizado com intervalos entre os blocos.