Mise à jour: algorithme de rendu de carte corrigé, ajout d'illustrations supplémentaires, mise en forme modifiée.
Peut-être que l'avantage de la technique "zig-zag" pour mapper les tuiles à l'écran peut être dit que les tuiles xet les ycoordonnées sont sur les axes vertical et horizontal.
Approche "Dessin dans un diamant":
En dessinant une carte isométrique à l'aide de "dessin dans un losange", qui, je crois, se réfère simplement au rendu de la carte en utilisant une forboucle imbriquée sur le tableau à deux dimensions, comme cet exemple:
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)
)
Avantage:
L'avantage de l'approche est qu'il s'agit d'une simple forboucle imbriquée avec une logique assez simple qui fonctionne de manière cohérente dans toutes les tuiles.
Désavantage:
Un inconvénient de cette approche est que les coordonnées xet ydes tuiles sur la carte augmenteront en diagonales, ce qui pourrait rendre plus difficile la cartographie visuelle de l'emplacement à l'écran sur la carte représentée sous forme de tableau:
Cependant, il va y avoir un piège à l'implémentation de l'exemple de code ci-dessus - l'ordre de rendu provoquera le dessin des tuiles censées être derrière certaines tuiles au-dessus des tuiles en face:
Afin de corriger ce problème, l'ordre de la forboucle interne doit être inversé - en commençant par la valeur la plus élevée et en effectuant un rendu vers la valeur inférieure:
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)
)
Avec le correctif ci-dessus, le rendu de la carte doit être corrigé:
Approche "zig-zag":
Avantage:
L'avantage de l'approche "zig-zag" est peut-être que la carte rendue peut sembler un peu plus compacte verticalement que l'approche "diamant":
Désavantage:
En essayant d'implémenter la technique du zig-zag, l'inconvénient peut être qu'il est un peu plus difficile d'écrire le code de rendu car il ne peut pas être écrit aussi simple qu'une forboucle imbriquée sur chaque élément d'un tableau:
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
)
En outre, il peut être un peu difficile d'essayer de déterminer la coordonnée d'une tuile en raison de la nature décalée de l'ordre de rendu:
Remarque: Les illustrations incluses dans cette réponse ont été créées avec une implémentation Java du code de rendu de tuiles présenté, avec le inttableau suivant comme carte:
tileMap = new int[][] {
{0, 1, 2, 3},
{3, 2, 1, 0},
{0, 0, 1, 1},
{2, 2, 3, 3}
};
Les images de tuiles sont:
tileImage[0] -> Une boîte avec une boîte à l'intérieur.tileImage[1] -> Une boîte noire.tileImage[2] -> Une boîte blanche.tileImage[3] -> Une boîte avec un grand objet gris dedans.
Remarque sur la largeur et la hauteur des carreaux
Les variables tile_widthet tile_heightqui sont utilisées dans les exemples de code ci-dessus font référence à la largeur et à la hauteur de la tuile au sol dans l'image représentant la tuile:
L'utilisation des dimensions de l'image fonctionnera, tant que les dimensions de l'image et les dimensions de la tuile correspondent. Sinon, la carte de tuiles pourrait être rendue avec des espaces entre les tuiles.