Guide d'art pixel isométrique — Tuiles, sprites et personnages

L'art pixel isométrique se dessine sur une grille en losange 2:1 : chaque tuile est exactement deux fois plus large que haute, et la hauteur est dessinée comme une colonne verticale de pixels au lieu d'être simulée par une caméra en perspective. Le 32×16 est la taille de tuile de référence, le 64×32 pour les grandes scènes, le 16×8 pour les petits accessoires et les personnages. Une fois le rapport 2:1 accepté, toutes les autres décisions — emprises de sprite, cycles de marche, raccords, tri de profondeur — en découlent.

Cette page parcourt la grille, les tuiles, les sprites et les jeux de personnages à quatre et huit directions dans l'ordre où vous les construisez réellement. Elle couvre ensuite l'étape que la plupart des tutoriels sautent : transformer cette même grille en losange en un véritable monde 3D explorable dans le navigateur, où l'inclinaison de la caméra est fixée pour correspondre à l'illustration et où les tuiles deviennent de la géométrie. Le constructeur de jeu 3D de Neta Studio est l'outil que nous utilisons pour cette dernière étape, et c'est pourquoi les détails de projection présentés ici valent la peine d'être parfaitement exacts.

Réponse rapide : qu'est-ce qui rend l'art pixel « isométrique » ?

L'art pixel isométrique est une projection tournée, pas une projection en perspective. Les axes X et Y du monde courent tous deux en diagonale à l'écran — vers la droite et le bas pour l'un, vers la gauche et le bas pour l'autre — et l'axe vertical monte droit, pixel par pixel. Rien ne converge, il n'y a pas de point de fuite, et la profondeur est une convention que vous maintenez à la main : plus bas sur le canevas signifie plus proche, une colonne de pixels plus haute signifie plus haut.

Le rapport est de 2 en largeur pour 1 en hauteur sur les deux axes du sol, ce qui place chaque arête du sol à environ 26,57° par rapport à l'horizontale. Techniquement, il s'agit d'une projection dimétrique ; la vraie isométrie a un raccourcissement égal sur les trois axes, à environ 35,264° au-dessus de l'horizon, et produit une tuile de sol d'environ 1,732:1. Le nom est resté parce que « isométrique » est le mot que les gens emploient, et presque tous les jeux de tuiles que vous trouverez sont dessinés en 2:1.

La grille 2:1

Le 2:1 existe parce qu'il correspond à des pixels carrés. Une arête de 2 en largeur et 1 en hauteur forme un escalier net — deux pixels à droite, un pixel vers le bas, en répétition — de sorte que chaque pixel d'arête tombe sur un pixel entier lorsque vous estampez la tuile. Une vraie projection à 30° a un rapport d'environ 1,732 pour 1 : pour 2 pixels en largeur, on descend de 1,155. Cela ne peut pas tomber sur une grille de pixels, donc les arêtes alternent entre des segments d'un et de deux pixels et la ligne ondule. Vous pouvez placer ces pixels à la main pour un accessoire vedette ; vous ne pouvez pas le faire pour un jeu de tuiles qui doit estamper des milliers de copies.

Le cas d'échec que les gens rencontrent vraiment est de faire pivoter un canevas carré de 45° et d'appeler le résultat isométrique. Un carré pivoté de 45° reste un carré : le losange a une largeur et une hauteur égales, la face supérieure et les faces latérales finissent avec la même silhouette, et les rangées de profondeur adjacentes cessent de se distinguer nettement. Dessinez le losange en 2:1 dès le premier pixel ; ne faites jamais pivoter un sprite 16×16 ou 32×32 pour fabriquer une tuile.

Gardez en tête le pas de tuile sous forme de décalage. En 32×16, se déplacer d'une tuile vers l'est correspond à +32 en x et +16 en y dans l'espace écran ; se déplacer d'une tuile vers le nord correspond à +32 en x et -16 en y. Cette seule paire de décalages est ce que vous utilisez pour le placement, le déplacement des sprites et le tri de profondeur.

Dessiner votre première tuile isométrique

Dessinez une seule tuile avant de dessiner un jeu de tuiles. L'objectif est une tuile que vous pouvez estamper sans la retoucher, ce qui signifie que chaque pixel d'arête reste sur le pas 2:1 et que les trois faces visibles partagent une même gamme de valeurs : face supérieure à la valeur de base, un côté un cran plus sombre, l'autre deux crans plus sombre.

Ce sont les deux faces latérales qui donnent la lecture isométrique. Si les deux côtés utilisent la même valeur, le cube s'aplatit en hexagone et l'œil cesse de percevoir la hauteur. Choisissez une direction de lumière — en haut à gauche par convention — et ne la changez jamais au sein d'un projet. Chaque tuile et chaque sprite s'accordent alors sur l'emplacement de la lumière.

Sprites isométriques et planches de sprites

Un sprite de profil a une emprise rectangulaire et marche horizontalement. Un sprite isométrique a une emprise en losange, et ses pieds reposent à l'intérieur de ce losange. Tout, dans la planche, en découle : l'ancre est le centre du losange, ou le coin inférieur du losange si vous préférez raisonner en pieds, et le sprite est dessiné à la même origine de tuile que la tuile de sol sur laquelle il se tient.

Le déplacement à l'écran est diagonal. Se déplacer d'une tuile de carte vers l'est correspond à +32 pixels à droite et +16 vers le bas ; une tuile vers le nord, à +32 à droite et -16 vers le bas. Ainsi, un cycle de marche orienté vers l'est n'est pas une boucle horizontale — le corps dérive le long de la pente 2:1 pendant que les jambes pédalent. Si les décalages image par image sont dessinés sur une ligne horizontale, le personnage patine en travers de la tuile. Testez-le en plaçant quatre copies le long d'une diagonale et en vérifiant que les pieds suivent les centres des tuiles.

Disposez la planche en rangées pour la direction et en colonnes pour l'image, dans une cellule uniforme. Une emprise 32×16 avec un personnage de 32 pixels de haut tient dans une cellule de 32 de large sur 48 de haut : 16 pixels pour le losange, 32 au-dessus pour le corps. Gardez l'alpha binaire, 0 ou 255. Les pixels de bord semi-transparents captent ce qui se trouve derrière eux une fois la planche assemblée ou redimensionnée, et vous obtenez un halo clair autour de chaque personnage sur une tuile sombre.

Personnages isométriques (4/8 directions)

Quatre directions est la norme parce que la grille de sol possède quatre diagonales : sud-est, sud-ouest, nord-est, nord-ouest. Ces orientations couvrent tout déplacement le long des axes de la carte. Huit directions ajoutent les orientations cardinales à l'écran — nord, sud, est et ouest — qui n'apparaissent que lorsque le personnage marche en diagonale sur la grille, le long des deux axes à la fois. Cela double l'illustration, et les quatre rangées supplémentaires ne sont visibles que pendant que le joueur maintient deux touches.

Le moteur a besoin d'une correspondance déterministe. Soit la rangée correspond à l'indice de direction et la colonne à l'image, soit un indice à plat de directionIndex * framesPerDirection + frame. Notez l'ordre dans un fichier texte à côté de la planche. Le bug classique est une planche conçue est-en-premier et importée sud-en-premier : une direction se retrouve à l'envers et le retour arrive sous la forme « l'animation de marche semble incorrecte ».

Nombre d'images et cadence

Un cycle de marche se lit à 8 à 12 images par seconde. Quatre images à 8 ips font 125 ms par image ; six images permettent de dessiner une pose de contact et une pose de passage et se déplacent plus fluidement le long de la diagonale 2:1 sans beaucoup de travail supplémentaire. Gardez un nombre d'images identique dans chaque rangée de direction, sauf si vos métadonnées stockent un nombre par direction — une rangée de six images à côté de rangées de quatre images joue à la mauvaise vitesse dès que le code suppose une grille uniforme. L'inactivité se fait en une ou deux images sur une boucle lente. Les attaques et les interactions vont sur une planche séparée à la même taille de cellule, afin que le pivot ne change jamais.

Le retournement coûte moins cher et se trompe souvent

Refléter l'est vers l'ouest divise le dessin par deux. Cela reflète aussi la lumière. Si votre lumière vient du haut à gauche, un sprite retourné est éclairé depuis le haut à droite, et les détails asymétriques — un bras au bouclier, un fourreau, une bretelle de sacoche — se retrouvent du mauvais côté. Ne faites un miroir que lorsque le personnage est symétrique et que l'ombrage est assez plat pour que personne ne le remarque, et ne retournez jamais un sprite portant une forte lumière directionnelle.

Objets, accessoires et hauteur

La boîte d'illustration d'un accessoire est plus haute que son emprise. Un arbre avec une emprise 1×1 (32×16) et 40 pixels de feuillage au-dessus a besoin d'une cellule de 32 de large et d'environ 56 de haut : 16 pour le losange, 40 pour ce qui s'élève au-dessus. Décidez de cette taille de cellule une fois pour toutes et gardez chaque accessoire dans le même module, sinon l'importateur aura besoin d'un décalage par sprite pour chacun.

Les accessoires multi-tuiles sont dessinés sur un losange plus grand. Un bâtiment 2×2 couvre quatre tuiles, son emprise au sol est donc un losange de 64×32 même si l'illustration s'élève de 48 ou 64 pixels au-dessus. Gardez l'origine au centre de l'emprise — pour un accessoire 2×2, c'est le point où les quatre tuiles se rencontrent — et non au centre de la boîte englobante du sprite. Un centrage sur la boîte englobante décale la base d'une demi-tuile, et le bâtiment semble flotter au-dessus d'un coin de sa propre parcelle.

Le tri de profondeur dans un moteur de rendu isométrique 2D est l'algorithme du peintre : triez par tileX + tileY, puis départagez avec une priorité par objet. Les accessoires hauts le mettent en échec. Une tour de six tuiles de haut placée à la rangée 2 est dessinée par-dessus un mur à la rangée 5 qui devrait l'occulter. Deux solutions : scindez les accessoires hauts en une base et une partie supérieure et triez chacun selon les rangées qu'il couvre réellement, ou donnez à chaque sprite un masque d'occupation par tuile pour que le moteur sache quelles rangées il chevauche.

Des jeux de tuiles qui ne se répètent pas

Il y a deux types de raccords dans un jeu isométrique, et ils demandent des corrections différentes. Le raccord de valeur est l'endroit où une face latérale rencontre la face supérieure de la tuile en dessous : si la base du mur est plus claire que le dessus du sol, vous obtenez une ligne brillante le long de chaque mur de la carte. Le raccord de motif est l'endroit où une série de tuiles de sol identiques se répète — le pas 2:1 est assez régulier pour que l'œil s'accroche au rythme après environ trois tuiles.

Les variantes d'arête masquent le motif. L'ensemble utile minimal est de neuf : une tuile centrale, quatre tuiles avec une transition sur une seule arête, et quatre avec des transitions sur deux arêtes adjacentes. Dessinez la transition comme une bande douce et irrégulière de deux à quatre pixels plutôt qu'une ligne droite, sinon vous avez déplacé le raccord au lieu de le supprimer. Randomisez le placement avec un hachage de la coordonnée de tuile plutôt qu'avec un générateur pseudo-aléatoire séquentiel, afin que le même monde se régénère à l'identique à chaque fois — c'est important lorsque le monde est reconstruit à partir d'une description écrite.

Le graphe d'adjacence est le même que pour les jeux de tuiles orthogonaux : quatre voisins par arête et quatre voisins diagonaux par tuile. C'est pourquoi l'ensemble de blob de 47 tuiles se transpose sans changement depuis un travail orthogonal — seule l'illustration diffère. N'activez pas les cas purement diagonaux si vous ne les avez pas dessinés, sinon vous obtiendrez des artefacts de coin ou un écart d'un pixel là où deux tuiles de sol ne s'accordent pas.

• Ensemble de blob de 47 tuilesCouvre toutes les combinaisons de quatre et huit voisins, y compris les cas purement diagonaux qu'un ensemble de neuf tuiles omet. Même nombre de tuiles qu'un ensemble de blob orthogonal ; seule l'illustration change.
• Ensemble de neuf tuilesCentrale, quatre tuiles à une seule arête, quatre tuiles d'angle. Rapide à dessiner, couvre la plupart des transitions de sol, et n'échoue que sur les cas purement diagonaux si vos règles de placement interdisent de les générer.
• Variantes en miroirRetourner une tuile de sol horizontalement est une variation gratuite lorsque la tuile n'a aucun indice de lumière. Ne faites jamais un miroir d'un mur ni d'un accessoire éclairé : la direction de la lumière se retourne avec, et la tuile cesse de correspondre à ses voisines.

De l'iso 2D à un monde iso 3D jouable

Un losange 2:1 est ce que vous obtenez avec une caméra orthographique à un lacet de 45° et une inclinaison de 30°. À 30°, la réduction verticale vaut exactement sin(30°) = 0,5, donc une tuile de sol carrée se projette en un losange deux fois plus large que haut — le même rapport que les pixels que vous avez dessinés. La véritable inclinaison isométrique de 35,264° donne 1,732:1 et ne correspondra pas à un jeu de tuiles 2:1. Ainsi, une tuile 32×16 se superpose proprement à une unité de monde 1×1, et tout l'ensemble 2D peut servir de textures sur des quads plats ou être extrudé en boîtes sans rien redessiner.

Deux choses se cassent lorsque la caméra bouge. D'abord, l'orbite libre : à un lacet de 37°, les arêtes des tuiles tombent entre les pixels et toute la carte scintille. Verrouillez l'inclinaison à 30°, alignez le lacet sur des incréments de 90°, et si vous animez une rotation, revenez à l'alignement avant qu'elle ne se stabilise. Ensuite, l'éclairage : l'illustration porte une lumière précalculée venant du haut à gauche. Si la lumière principale reste fixe dans l'espace du monde et que la caméra tourne de 90°, l'ombrage de l'illustration ne correspond plus à la scène. Rattachez la lumière principale à la caméra, ou intégrez l'ombrage à la texture et gardez la lumière relative à l'écran.

Si vous voulez préserver l'aspect pixel en WebGL, effectuez le rendu à une faible résolution interne et agrandissez avec un filtrage au plus proche voisin, puis alignez la position de la caméra sur des pixels d'écran entiers. Sinon, les centres de texels tombent entre les fragments et l'illustration fourmille pendant que le personnage marche, ce qui se lit comme un bug de texture alors même que l'illustration est correcte.

Le constructeur de jeu 3D de Neta Studio prend une description écrite et construit un véritable monde Three.js dans le navigateur avec une caméra orthographique à l'inclinaison fixe — explorable, sans chaîne d'outils locale. Mini World en est la version à petite échelle et constitue le moyen le plus rapide de tester si un jeu de tuiles et un ensemble de personnages se lisent correctement avant de se lancer dans une grande carte. The Cyclops' Island est un monde d'exemple terminé que vous pouvez parcourir pour voir la projection fonctionner. Pour les personnages, Agent Sprite Forge produit des planches de sprites à une taille de cellule choisie, ce qui maintient la cohérence du pivot entre les directions.

Logiciels d'art pixel isométrique

Tout ce qui est décrit sur cette page peut se faire dans un éditeur raster doté d'une grille. Ce que les outils spécialisés apportent, c'est la conscience des tuiles : un mode carte de tuiles qui montre la tuile que vous dessinez face à ses voisines, afin que vous voyiez le raccord pendant que vous peignez plutôt qu'après l'avoir estampé deux cents fois.

Choisissez en fonction de ce que vous devez produire plutôt que de listes de fonctionnalités. Les tuiles demandent une grille, un aperçu de tuile et une palette stable. Les personnages demandent une pelure d'oignon, des cellules uniformes et une exportation de planche qui transporte un pivot. Les cartes demandent un outil qui stocke les coordonnées de tuiles, car un PNG n'est pas une carte.

• AsepriteÉditeur raster avec un mode carte de tuiles, une grille de tuiles, la pelure d'oignon et une exportation de planche en JSON qui transporte les balises d'images et le pivot. L'aperçu de tuile est la raison de son utilisation pour les jeux de tuiles : vous voyez le raccord pendant que vous le peignez.
• LibreSpriteÉditeur open source issu de la même base de code. Le flux de travail des tuiles est largement identique ; attendez-vous à moins de fonctionnalités récentes.
• Krita et PhotoshopÉditeurs raster généraux. Les repères de grille et la symétrie vous donnent un losange, mais aucun des deux n'a de mode carte de tuiles, vous estampez donc à la main. Le filtre de décalage — décalez le canevas d'une demi-taille de tuile et regardez le milieu — reste le moyen le plus rapide de trouver un raccord de valeur.
• TiledUn éditeur de cartes, pas un outil d'illustration. Stocke les coordonnées de tuiles, prend en charge l'orientation isométrique avec une taille de tuile 2:1 et exporte les données de calques. Dessinez dans un outil, placez dans un autre.
• Le constructeur de jeu 3D de Neta StudioDans le navigateur. Une description écrite devient un monde isométrique jouable en Three.js, vous sautez donc entièrement la chaîne d'outils locale et l'étape d'importation, et vous testez si l'illustration se lit à l'inclinaison de caméra correcte.
• Agent Sprite ForgeGénère des planches de sprites pour les personnages, ce qui est généralement la partie la plus longue d'un ensemble isométrique. Fixez la taille de cellule et le nombre de directions avant de générer ; une planche conçue à une taille de cellule différente ne s'adaptera pas à vos tuiles.

Entrez dans le monde auquel il appartient

Un sprite est un personnage sans endroit où se tenir. La dernière étape est celle que personne d'autre ne propose : prenez la planche que vous venez de créer et placez-la dans un monde où l'on peut se promener — une petite île, une planète, un coin de rue sous la pluie. Chaque monde de ce site a été créé à partir d'une seule description écrite et publié sous forme de page jouable.

FAQ