La 3d isométrique

1. Définition

   Une image valant 1000 discours voici un exemple de 3d isométrique.

   

   Il s'agit de simuler une impression tridimensionnelle à partir de dessin 2d. La particularité étant le parallélisme des lignes de fuite. Ainsi un objet plus éloigné à la même taille qu'un objet plus proche.

2. Comment dessiner en 3d isométrique?

   Comment dessiner ce genre de perspective avec un logiciel de dessin type paint shop pro?

   Voici un tutorial issu d'un site sur le pixelart, le site www.pixelfreak.com et traduit par mes soins...

   tutoriel de pixel art isométrique fait par Pixelfreak Ce tutoriel va essayer de vous aider à créer du pixel art, du pixel art ISOMETRIQUE. Le mot isométrique signifie "de mesures égales", c'est pourquoi lorsqu'on regarde de tels graphiques, on remarque qu'il n'y a pas de perspective et peu importe qu'un chat que vous dessinez soit au milieu de votre graphique ou en haut, ou même en dans le coin en bas, il aura toujours la même taille. Comme tout le monde n'est pas forcément habitué à la vue isométrique, voici un graphique montrant comment une image vue de dessus peut être transformé en plan X-Y isométrique (ou "sol" si vous ne comprenez pas de quoi je parle). Notez que le graphique garde la même largeur mais sa hauteur est divisée par 50%. C'est un point important, maintenant vous savez que pour faire un cercle de 100 pixels sur un "sol" isométrique, il devra être de hauteur 50 pixels. Voici la grille isométrique agrandie avec les pixels marqués, les lignes sont constituées de deux pixels en largeur et un en hauteur, appelons ce genre de ligne lignes horizontales et la paire de pixels de ses lignes briques comme ca il sera plus facile d'en parler dans la suite de ce tutoriel. Les lignes-pixels parfaites Ce groupe de lignes en forme d'étoile est à la fois très basique et très important. Tout comme une étoile, il vous guidera sur le chemin du pixel art. Ce sont les lignes-pixels parfaites, meme si elles ont l'air échelonnées ou pixellisées , ce sont les lignes les plus douces traçables en pixel art. Le but est donc de s'y ramener le plus possible mais vous allez aussi devoir faire des exceptions à cette règle (à moins de volontairement viser le style Légo, comme sur ce site, eBoy,cf image ci dessous). Voici un exemple de ligne irrégulière. Je suis sure que vous avez remarqué combien elle est "échelonnée". Idéalement, on doit éviter ce genre de ligne...

   PART 1 Maintenant, passons aux choses sérieuses, nous allons travailler sur un exemple pratique, une maison, mais cela devrait vous servir pour d'autres types de dessins. Ouvrez un logiciel de dessin bitmap comme paint ou paint shop pro Utiliser tout simplement l'outil de traçage de lignes et vous verrez que c'est parfait, moi je n'utilise jamais le pinceau. Ce qui veut dire que je ne travaille pas réellement pixel par pixel mais qui me le reprocherait? ;-) Commencons par dessiner une boîte, c'est facile, vous pouvez commencer par le haut avec les lignes horizontales (au sens vu précédemment) puis les lignes dans les coins et finir par la base. Ce point est plus intéressant, je trace la ligne rouge pour mesurer la largeur de ma boîte, la plupart des logiciels de dessin montrant la longueur d'une ligne quand vous la tracez. Ici, ma ligne fait 26 pixels de large, c'est pourquoi je dessine en dessous deux sections de largeur égale à 13 pixels, afin de trouver le milieu (évidemment, pas besoin de les tracer réellement). Une fois ce milieu connu, vous pouvez dessiner une ligne montante qui vous servira de guide. J'ai dessiné une ligne à 45° , pixellement parfaite depuis le coin gauche jusqu'à la ligne guide et une autre depuis l'autre coin vers la ligne guide (on finit par obtenir deux lignes pixellement parfaites, mais pas toujours, suivant la hauteur du triangle que l'on cherche à tracer). Une fois fait cela, vous pouvez nettoyer le devant et tracer une ligne horizontale depuis le haut du triangle jusqu'à l'arrière de la maison (penser à dépasser un peu). Après vous avez juste à tracer une ligne à 45° depuis le coin au fond à gauche jusqu'à la précédente ligne horizontale, puis compléter avec une autre ligne le dessin. Après un peu de nettoyage, ca devrait ressembler à ceci: On a l'impression d'être à la moitié du chemin, non? En fait, pas tout à fait. Mais il est important d'être capable de voir la justesse géométrique de vos figures, une fois cette compétence acquise, vous pouvez vous considérer comme un architecte du pixel ;-)

   PART 2 J'ai décidé de faire le toît plus grand que le reste de la maison. Oui, serait été plus facile d'en tenir compte dès le début, mais ainsi, vous apprendrez plus de chose. J'ai rajouté deux briques sur ma ligne horizontale du dessus, et à la fin de la ligne rouge j'ai dessiné les lignes bleues du toît à nouveau. Je vous recommande chaudement d'utiliser différentes couleurs comme je le fais, afin d'éviter d'avoir un dessin confus. J'ai ensuite dessiné des lignes vertes pour marquer la fin du toît: Regarder bien le point d'intersection entre la ligne bleue et la ligne verte et noter que la hauteur quand la ligne verte rencontre la ligne bleue doit être la même des deux côtés du toît. Pour ce faire, dessiner une ligne horizontale depuis ce point jusqu'à la ligne bleue de l'autre côté du toît pour marquer l'endroit où devrait finir ce côté. Puis à l'endroit où la nouvelle ligne (violette) rencontre la ligne bleue du toît, vous créez une autre ligne (ligne verte). Vous pouvez enlever les lignes inutiles. J'ai nettoyé les lignes précédentes non nécessaires et j'ai recoloré en noir les lignes de couleur. Une maison avec un toît de papier, ça pue, c'est pourquoi j'ai copié le toît et je l'ai coloré, afin de cacher les lignes en dessous (j'évite un paquet de nouilles de lignes). J'ai placé la copie deux pixels au dessus du toît original, puis j'ai nettoyé les couleurs et les coins. Puis j'ai décidé que ca ressemblait beaucoup trop à une niche de chien, aussi j'ai rallongé la maison en copiant la moitié de la maison sur elle-même avec un décalage horizontal. Ensuite j'ai dessiné une porte et une fenêtre, et afin de faire une deuxième fenêtre identique à la première, j'ai fait un "flip" dans paint shop pro. Maintenant ca ressemble à quelque chose!

   PART 3 Coloriage! La couleur que j'ai choisi ressemble beaucoup à du bois, personne n'aimant avoir mal aux yeux, essayer de sélectionner une couleur pas trop intense. Maintenant, utiliser différents ombrages suivant où vous voulez que la source de lumière se trouve. La mienne est à peu près à 9h, aussi le toît doit il être beaucoup plus lumineux que le reste. Cette partie est importante. Comment faire les coins? Ce petit dessin devrait vous aider à comprendre comment je gère les coins. Les coins saillants sont beaucoup plus clair que le reste de l'objet et les coins en retrait sont plus sombres (mais pas noirs). J'ai appliqué la même règle pour le toît, sauf que cette fois il n'y a pas d'arêtes saillantes, mais j'ai souligné d'une teinte plus claire la porte, les fenêtres et le toît. Le contour de la maison reste 100% noir. Les fenêtres sont difficiles à faire, il y a beaucoup de manière de les dessiner.Une des meilleures est certainement de laisser entrevoir l'intérieur mais c'est aussi une des manières les plus dures. Je ne connais pas de recette miracle, mes fenêtres étant différentes sur chacune de mes dessins, aussi à vous de voir. Je suis néanmoins assez satisfait avec le style que j'ai utilisé pour la maison. (noter la légère dénivellation sur la fenêtre) L'un des avantages du pixel art, c'est de pouvoir avoir un haut niveau de détails, aussi devrait on toujours essayer de rajouter un petit plus, ça en vaut la peine. Je vais essayer ici de rajouter quelques ombres... Le toît est la partie la plus grande de la maison, aussi l'ombre devrait être de la taille du toît. Afin de calculer cette taille et l'ombre correspondante, dessiner des lignes droites descendant des coins du toît et relier les par des lignes horizontales pour créer un rectangle: Maintenant vous pourriez placer l'ombre sur la maison et dire "j'ai FINI!" mais pour rendre le tout un peu plus joli, j'ai dessiné l'ombre dans l'angle (après tout la source de lumière n'éclaire pas verticalement). La lumière éclairant le mur sous le toît est certes un détail, mais un détail apprécié par les gens qui verront votre oeuvre, on aurait pu aussi dessiner des lierres sur le mur ou une cheminée, etc... Plus vous détaillez votre dessin, plus il semblera "vivant"! La lumière éclaire maintenant le mur et le sol de manière correcte géométriquement parlant, mais je ne vous détaillerais pas exactement pourquoi, ce serait trop long à expliquer ici. Voici la maison dans son état final: J'ai décidé d'enlever l'éclairage sur l'arête du toît et enfin je suis satisfait du résultat. J'espère vous avoir aidé et vous avoir transmis ma passion du pixel art! Note: le processus de création est loin d'être aussi long que la longueur de ce tutoriel pourrait le faire croire, j'ai juste pris soin de ne sauter aucune étape dans un souci didactique. Donc ne vous découragez pas! Rappelez vous que je nous ai épargné aucun détail seulement dans le but de vous faire comprendre ma démarche créative.

   
   
   

3. Les algorithmes de traçage

   Contrairement à des tiles carrées qui ne contiennent pas forcément de zone transparente, les tiles d'une représentation 3D isométrique sont rectangulaires et ont obligatoirement des zones transparentes (afin de simuler une mosaique losange). L'ordre du traçage des tiles sur la deuxième figure est 1,2,3,4,5,6,7,8,9,10,11,12,13,14,15... Pour tracer les mosaiques vertes, on doit faire un décalage en largeur d'une demi-largeur de mosaique par rapport aux mosaiques jaunes et en hauteur d'une demi-hauteur de mosaique par rapport aux mosaiques jaunes.
   
   
   
   Exemple de jeu (Diablo) utilisant cette technique :
   
   
   
   Il existe aussi des jeux en 3D isométrique mais utilisant des tiles carrées (l'algo de traçage cette fois est le même que pour les vues non 3D isométriques), ils sont plutôt rares car les paysages obtenus ont un côté très écrasé comme on peut le voir sur ce screenshot (Ultima 7) :
   
   
   
   Par rapport à une vue de dessus à la Zelda, il y a un probleme supplémentaire en 3D isométrique: un sprite derrière une maison est caché par cette dernière! On peut observer ce phénomène sur le screenshot de Diablo au dessus, où les squelettes sont parfois devant les piliers mais aussi derrière et dans ce cas, c'est le pilier qui les cache et pas le contraire... De plus dans le jeu Ultima 7, lorsqu'on entre dans une maison, le toît disparait pour nous permettre de voir l'intérieur de celle-ci. Ce système nous donne une bonne indication sur comment est implémenté l'affichage en 3D isométrique.
   
   
   

4. Les layers ou le secret du toît qui disparaissait

   
   
   Toît qui disparait et gestion correcte des priorités d'affichage sont liés! Voici tout d'abord deux screenshots d' Ultima 7 montrant le personnage principal à l'extérieur de la maison, puis à l'intérieur:
   
   
   
   
   
   
   
   En fait, le moteur d'affichage prend simplement en compte plusieurs layers ou couche superposée: d'abord le sol, puis une couche intermédiaire (correspondant aux murs) et enfin une couche supérieure (correspondant au toît). On peut bien sur empiler ces couches les unes par dessus les autres (en fait on empile des couples (sol+mur)) pour obtenir des maisons à plusieurs étages ou des escaliers.
   On peut donc distinguer deux type de layers : ground_layers/sol et wall_layers/mur.
   Sur chaque couche de type sol, on peut y mettre des sprites. Il ne reste plus qu'à tracer dans le bon ordre les mosaiques (cet ordre est constant et dépend de l'orientation de la perspective de la 3D isométrique) de cette couche. Puis vient la couche de type mur, pour laquelle on affiche, suivant le même critère que la couche sol, les mosaiques sauf que cette fois on va veiller à intercaler les sprites de la couche sol précédente, en les traitant comme une mosaique qui aurait pour coordonnées celles des pieds des sprites...
   
   On comprend mieux maintenant comment un personnage derrière une maison est masqué par celle ci et comment on peut "enlever" le toît d'une maison pour mieux voir à l'intérieur: il suffit d'arreter le traçage à la couche mur succédant à la couche sol contenant le personnage principal!
   
   Voici une petite animation montrant de manière plus claire ce processus:
   
   layer 0 de type sol
   
   
   layer 1 de type mur
   
   
   
   Voici les sprites associés au layer 0
   
   
   layer 2 de type sol (et oui, on peut marcher sur un toît!)
   
   
   Détail du fonctionnement de l'algorithme de traçage multi-layers décrit précédemment:
   
   
   
   

5. Etat de développement dans le moteur

   Pour l'instant le moteur ne gère pas vraiment la 3D isométrique, même si quelques uns des algorithmes sont écrits...