L'ordre d'affichage des cases

Pour afficher les cases de la carte, Ratsodie s'y prend ainsi :


Boucle de 1 à nombre_de_lignes_de_la_carte
     Boucle de 1 à nombre_de_colonnes_de_la_carte
          Affichage de la case.
     Fin de boucle des colonnes
Fin de boucle des lignes

En clair, le jeu place la case Nord-Ouest, puis chaque case de la même ligne vers l'est.
Arrivé en bout de ligne, il recommence avec la ligne suivante, jusqu'à la dernière case de la carte, c'est à dire la case Sud-Est.

Le problème est l'index de profondeur : Chaque fois que le navigateur affiche une image, il la place par dessus les précédentes.
Celà peu paraître anodin, mais puisque Ratsodie affiche ses cases d'ouest en est, celà signifie que les cases situées à l'est sont au dessus des cases à l'ouest.

Bien sur, celà veut également dire que les cases au sud sont au dessus des cases au nord, mais ça c'est bien, puisqu'en 3D isométrique le sud est sensé être plus près du joueur : Normal donc qu'une case au sud puisse, éventuellement, en cacher une autre au nord.

Par contre, l'ouest est sensé être plus près du joueur que l'est. Donc si une case en cache sa voisine de l'ouest, ça ne va pas paraître visuellement confortable (en gros, l'effet 3D est détruit).

En quoi une case peut-elle cacher sa voisine ? Il y a déjà plusieurs possibilités dans Ratsodie à son niveau actuel de développement :

- Les forets dépassent des cases.
- Le fond des mers est plus bas que le niveau des cases.
- La partie "souterraine" des cases est également plus bas.

Exemple : Si on laisse Ratsodie afficher ses cases d'ouest en est, on va voir la partie souterraine des cases s'afficher par dessus la case immédiatement à l'ouest, alors qu'elle devrait être cachée par celle-ci.

J'avais trouvé la solution, que je connaissais déjà en partie à vrai dire : Le z-index.

En clair, chaque fois qu'un navigateur affiche quelque chose, il lui attribue un indice de profondeur (le z-index). Z, parce que que X pour la largeur, Y pour la hauteur et... Z pour la profondeur. Simpleme convention en géométrie.

Or, chaque nouvel objet affiché a un z-index supérieur au précédent (de 1, j'imagine).

Et vous savez quoi ? Le Z-index est un attribut comme les autres, et on peut donc dire au navigateur de donner un z-index différent à un objet qu'on veut afficher, exactement comme on peut le forcer à lui donner une taille ou un emplacement différent.

Je commence par calculer le z-index de la case que je veux afficher :

var j4 = (i*table_c)+(table_c-j);

En clair, pour chaque case, :

- Je prends le numéro de la ligne en cours (ici, i).
- Je multiplie ce numéro par le nombre de colonnes de la carte.
- Je prends encore le nombre de colonnes de la carte (ici, j).
- Et je lui enlève le numéro de la colonne en cours.
- J'ajoute les deux résultats.
- Ça me donne le z-index de la case en cours

Celà me donne des cases avec un z-index ressemblant à ceci :

4  -  3  -  2  -  1
8  -  7  -  6  -  5

De cette manière, les cases les plus lointaines (Est et Nord) ont bien un z-index inférieur à leurs voisines de l'Ouest et du Sud, et seront donc affichées en dessous.
Celà permet aux arbres de ne pas être coupés par la case juste au dessus, par exemple.

Ensuite, évidemment, j'ajoute le code suivant à la partie affichant l'image :

            case1[i3+"*"+j3].style.zIndex = j4;

L'image créée le sera donc avec un attribut de style "zindex" de valeur "j4", qui a été calculée juste avant.