Dessin isométriques mondes de jeu

Question

Est-ce le bon moyen d'attirer l'isométrique tuiles dans un jeu en 2D?

J'ai lu des références (comme cette une) qui suggèrent que les carreaux soient rendus de façon zigzag chaque colonne du tableau 2D de la représentation de la carte. J'imagine qu'ils doivent être attirés dans un diamant de mode, où ce qui est dessiné à l'écran est liée plus étroitement à ce que le tableau 2D ressemblerait, tourné un peu.

Existe-il des avantages ou des inconvénients soit pour la méthode?

Answer 1

Mise à jour: correction de la carte algorithme de rendu, a ajouté plus d'illustrations, changé le formatage.

Peut-être l'avantage pour le "zigzag" technique pour la cartographie les tuiles de l'écran peut être dit que la tuile x et y coordonnées sont sur les axes vertical et horizontal.

"Le dessin dans un diamant":

Par le dessin isométrique de la carte à l'aide de "dessin dans un diamant", qui, je crois, se réfère à juste le rendu de la carte à l'aide d'un imbriquée for-boucle sur le tableau à deux dimensions, comme dans cet exemple:

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

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

Avantage:

L'avantage de cette approche est qu'il est un simple imbriquée for-boucle avec relativement simple logique qui fonctionne de façon constante à travers toutes les tuiles.

Inconvénient:

Un inconvénient de cette approche est que l' x et y coordonnées des tuiles sur la carte va augmenter dans les lignes diagonales, ce qui pourrait rendre plus difficile visuellement la carte de l'emplacement sur l'écran de la carte représentée dans un tableau:

L'image en taille réelle

Cependant, il va y avoir un piège pour la mise en œuvre de l'exemple ci-dessus, l'ordre de rendu sera la cause de tuiles qui sont censés être à l'origine de certaines tuiles pour être tiré sur le dessus des tuiles en avant:

Pour modifier ce problème, l'une intérieure for-de la boucle de commande doivent être annulées à partir de la valeur la plus élevée, et le rendu vers la valeur la plus faible:

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ée:

"Zigzag":

Avantage:

Peut-être l'avantage de la "zigzag" est que le rendu de la carte peut sembler être un peu plus verticale compacte que le "diamant":

Inconvénient:

En essayant de mettre en œuvre le zigzag de la technique, l'inconvénient est qu'il est un peu plus difficile à écrire le code de rendu car il ne peut pas être écrit comme un simple imbriquée for-une boucle sur chaque élément dans 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
        )

Aussi, il peut être un peu difficile pour essayer de comprendre le système de coordonnées de la dalle en raison de l'échelonnement de la nature de l'ordre de rendu:

Remarque: Les illustrations incluses dans cette réponse ont été créés avec un Java mise en œuvre de la tuile du code de rendu présenté, avec les suivants en int tableau comme la carte:

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

La tuile images sont:

• tileImage[0] -> Une boîte avec une boîte à l'intérieur.
• tileImage[1] -> D'une boîte noire.
• tileImage[2] -> D'une zone blanche.
• tileImage[3] -> Une boîte avec un grand objet gris.

Une Note sur les Carreaux de Largeurs et de Hauteurs

Les variables tile_width et tile_height qui sont utilisés dans le code ci-dessus des exemples se réfèrent à la largeur et la hauteur du sol, les carreaux de l'image représentant le carrelage:

En utilisant les dimensions de l'image, le travail, aussi longtemps que les dimensions de l'image et de la tuile dimensions match. Sinon, la tuile, la carte pourrait être rendus avec des espaces entre les tuiles.

Answer 2

De toute façon fait le travail. Je suppose que par zigzag-vous dire quelque chose comme ceci: (les chiffres sont de l'ordre de rendu)

..  ..  01  ..  ..
  ..  06  02  ..
..  11  07  03  ..
  16  12  08  04
21  17  13  09  05
  22  18  14  10
..  23  19  15  ..
  ..  24  20  ..
..  ..  25  ..  ..

Et par diamond-vous dire:

..  ..  ..  ..  ..
  01  02  03  04
..  05  06  07  ..
  08  09  10  11
..  12  13  14  ..
  15  16  17  18
..  19  20  21  ..
  22  23  24  25
..  ..  ..  ..  ..

La première méthode a besoin de plus de tuiles rendu de sorte que le plein écran est dessiné, mais vous pouvez facilement faire une vérification de limites et d'ignorer toutes les tuiles entièrement hors de l'écran. Les deux méthodes nécessitent quelques calculs pour savoir quel est l'emplacement de la tuile 01. En fin de compte, les deux méthodes sont à peu près égales en termes de maths pour un certain niveau d'efficacité.