De la 3D au pixel art : le guide complet

Dessiner un personnage à la main dans huit directions, avec des cycles de marche, de course, d’attaque et de mort, cela fait beaucoup d’images. Pour une petite équipe, c’est parfois le plus gros coût graphique d’un jeu. Rendre ces images à partir d’un modèle 3D est une vieille réponse à ce problème. Ce guide explique d’où vient l’idée, pourquoi elle fonctionne, ce qui tourne mal, et comment obtenir des sprites qui ressemblent à du pixel art plutôt qu’à un rendu rétréci.

Une brève histoire des sprites pré-rendus

En 1994, Rare a sorti Donkey Kong Country sur Super Nintendo. Ses personnages et ses décors ont été modélisés et rendus sur des stations de travail Silicon Graphics, puis réduits aux petits sprites et aux couleurs limitées de la console. Le jeu ne ressemblait à rien d’autre sur la machine, et il a montré qu’un pipeline 3D pouvait alimenter un jeu 2D.

À la fin des années quatre-vingt-dix, les sprites pré-rendus se sont répandus sur PC. Diablo (1996), Fallout et Fallout 2, StarCraft et Age of Empires utilisaient tous des unités et des personnages rendus à partir de la 3D, souvent dans de nombreuses directions, parce qu’un modèle se tourne gratuitement, contrairement à un dessin.

La technique est revenue sous une autre forme avec Dead Cells (2018). Motion Twin animait ses personnages en 3D et les rendait en petites images de pixel art, et a décrit le procédé dans l’article de Gamasutra (aujourd’hui Game Developer) de 2018, « Art Design Deep Dive: Using a 3D pipeline for 2D animation in Dead Cells ». L’idée était la même qu’en 1994 : une petite équipe obtenant une animation fluide et cohérente sans dessiner chaque image.

Pour en savoir plus, lisez Sprites pré-rendus.

Pourquoi rendre à partir de la 3D

Trois raisons reviennent sans cesse.

• Toutes les directions. Une fois qu’un modèle existe, un nouveau côté n’est qu’une caméra de plus. Quatre, huit ou seize directions demandent le même effort de mise en place.
• Une animation cohérente. Les proportions du personnage restent les mêmes à chaque image et sous chaque côté. Les sprites dessinés à la main dérivent ; un squelette, non.
• Les changements ne coûtent rien. Changez la couleur de l’armure, la taille du sprite ou la palette, et refaites le rendu. Avec des planches dessinées à la main, un changement tardif implique de repeindre des centaines d’images.

Le prix à payer, c’est qu’un simple rendu ne ressemble pas à du pixel art. Réduisez un rendu en ombrage lisse et vous obtenez des bords flous, des dégradés boueux, des centaines de couleurs presque identiques et des pixels qui scintillent d’une image à l’autre. Le reste de ce guide explique comment combler cet écart.

Ce qui fait qu’on y lit du pixel art

Le pixel art tient moins à la basse résolution qu’à la maîtrise. Chaque pixel est une décision. Un rendu prend des millions de minuscules décisions que vous n’avez pas demandées : le travail consiste à reprendre ces décisions.

Une seule échelle de pixel

Tout dans le jeu devrait partager une même taille de pixel. Si un arbre est dessiné à une échelle et un personnage avec deux fois plus de détail, le décalage saute aux yeux. Les pixel artists appellent ces tailles de pixel mélangées des mixels. Dans un pipeline 3D, la solution est une seule échelle en pixels par mètre : un chevalier de deux mètres fait toujours le même nombre de pixels de haut, et une caisse à côté de lui est à la bonne proportion. Dans Pixor, réglez pour cette raison une valeur fixe de Pixels/m sur les caméras : par défaut, chaque caméra ajuste son sprite à sa propre taille.

Un pivot fixe

Si les pieds du personnage tombent sur un pixel différent à chaque image, le sprite tremble en jeu même si l’animation est bonne. Le pivot, en général entre les pieds, doit se trouver sur le même pixel dans chaque image et chaque côté. Pixor verrouille le pivot sur un pixel dans toutes les images et tous les côtés.

Palettes limitées et rampes

Les sprites faits à la main utilisent peu de couleurs, organisées en rampes : une courte suite du sombre au clair pour chaque matériau. Peu de couleurs, c’est des formes qui se lisent clairement en petite taille. Un rendu doit être réduit à une palette, et pas simplement à moins de couleurs choisies au hasard.

Décalage de teinte

Les bonnes rampes ne font pas que s’assombrir ; elles changent de teinte en chemin, en général plus froides dans l’ombre et plus chaudes dans la lumière. C’est le décalage de teinte, et c’est en grande partie ce qui donne au pixel art un aspect peint plutôt que grisâtre.

Contours sélectifs et traits nets

Un trait noir autour de tout convient à certains styles, mais beaucoup d’artistes colorent le contour d’après la forme qu’il entoure, plus sombre du côté de l’ombre et plus clair, voire absent, du côté éclairé. C’est le selout. Les traits doivent faire un pixel de large, sans coins en « L » doublés, et les parties fines comme les lames d’épée et les bâtons doivent rester des traits nets d’un pixel au lieu de se morceler. Plus de détails dans Contours.

Ni pixels isolés ni scintillement

Les pixels isolés qui n’appartiennent à aucune forme ressemblent à du bruit. En animation, le pire problème est le scintillement : un pixel ou un trait qui apparaît le temps d’une image et disparaît à la suivante. Un rendu produit les deux en permanence, car de minuscules changements dans le modèle font passer des valeurs juste au-dessus ou en dessous d’un seuil.

Pas de tramage par accident

Le tramage peut être un choix de style délibéré. S’il est utilisé, le motif doit rester fixé à la surface quand le modèle bouge, et non grouiller dessus comme une moustiquaire.

Le pipeline, étape par étape

Voici la chaîne habituelle, et la place de Pixor à chaque étape.

1. Le modèle

N’importe quel modèle, riggé ou statique, fait l’affaire. Pixor lit les fichiers glTF et GLB, FBX (y compris les téléchargements Mixamo), OBJ et MagicaVoxel .vox. Des modèles plus simples aux formes claires et aux matériaux distincts donnent de meilleurs sprites que des modèles très détaillés ; les détails plus petits qu’un pixel seront perdus de toute façon.

2. Une caméra par côté

Chaque direction est une caméra qui regarde le modèle. Les jeux à défilement horizontal en ont besoin d’une ; les jeux vus de dessus et isométriques utilisent des anneaux de 4 ou 8. L’inclinaison compte autant que la direction : une vue de côté, une vue de trois quarts, une vue isométrique 2:1 et une vue de dessus conviennent chacune à des jeux différents. Dans Pixor, chaque côté est une caméra, en anneaux de 4, 8 ou 16 ou à n’importe quel angle de votre choix.

3. Le G-buffer

Au lieu de rendre tout de suite une image finie, rendez les informations dont vous avez besoin : la couleur unie de chaque pixel, la direction vers laquelle sa surface est tournée (normales), sa distance à la caméra (profondeur) et la partie ou le matériau auquel il appartient. C’est ce qu’on appelle un G-buffer. Chaque étape suivante part de là, et c’est ce qui rend le reste contrôlable. Les images en haut de cette page montrent la couleur, les normales et la profondeur d’un coffre, ainsi que le sprite fini.

4. La lumière en bandes

L’ombrage lisse devient quelques bandes unies : lumière, ton moyen, ombre. Le pixel art en utilise généralement de deux à quatre. Le plus difficile est de garder les bandes stables quand le modèle bouge, pour que la limite d’une bande ne saute pas d’avant en arrière sur une surface qui a à peine tourné. Pixor ombre en 1 à 4 bandes et tient une bande jusqu’à ce que la surface ait nettement tourné.

5. Traits

À partir de la profondeur, des normales et des identifiants de partie, on peut trouver la silhouette, les arêtes intérieures entre les parties, et les plis là où une surface se replie. Chacun peut être dessiné différemment : sombre, coloré, ou pas du tout. Pixor traite les traits de silhouette, intérieurs et de pli comme des types distincts, chacun avec son propre réglage de contour sélectif, les dessine d’un pixel de large sans coins en L, et garde les parties fines sous forme de traits d’un pixel.

6. Palette

Chaque bande de chaque matériau est associée à une couleur d’une rampe. Vous pouvez laisser l’outil construire les rampes à partir des couleurs du modèle ou imposer une palette fixe partagée par tout le jeu. Pixor construit des rampes à décalage de teinte par matériau, et peut utiliser une palette automatique, l’une des sept intégrées, un fichier Lospec .hex ou GIMP .gpl, ou une palette tirée d’une image. Il écrit des PNG indexés et propose des modes console pour les limites de couleurs Game Boy, NES, PICO-8, TIC-80 et C64.

7. Nettoyage

La dernière passe supprime les pixels isolés et les traits qui n’apparaissent que sur une seule image. C’est ce qui distingue une planche qui semble faite à la main d’une planche qui ressemble à de la vidéo. Pixor exécute ce nettoyage comme une étape à part.

8. La planche

Les images sont rangées dans une planche, en général une rangée par action et par côté, avec des données qui indiquent au moteur où se trouve chaque image.

Dans Pixor, chacune de ces étapes est un nœud du graphe de Style, si bien que vous pouvez voir et modifier chacune d’elles. Un look qui vous plaît peut être enregistré comme kit et réutilisé dans tout un projet. Les préréglages intégrés (clean, selout, retro4, flat et wireframe) sont des points de départ.

Choisir les tailles et les directions

La taille est d’abord un choix de design. Un sprite plus petit se lit plus facilement dans une foule et coûte moins cher à retoucher ; un plus grand montre plus de personnalité. À titre indicatif :

• 16 px convient aux tuiles, aux objets et aux très petits personnages.
• 32 px est une hauteur de personnage courante pour les jeux en vue de dessus et de plateformes.
• De 48 à 64 px, il y a de la place pour les visages, l’équipement et une animation expressive.

Choisissez une échelle en pixels par mètre qui donne à votre personnage principal la hauteur voulue, puis laissez tout le reste suivre. Affichez le jeu à des multiples entiers (×2, ×3, ×4) pour que chaque pixel de l’image devienne un carré net à l’écran. Tailles de sprites entre plus en détail dans le sujet.

Pour les directions : un côté pour les jeux à défilement horizontal (retournez-le pour l’autre sens), quatre pour les jeux simples vus de dessus, huit pour la plupart des jeux d’action et de stratégie, seize pour ce qui tourne en douceur, comme les véhicules.

Animation

Une animation 3D a une pose pour chaque instant. Une animation pixel art n’a qu’une poignée d’images, et ces images sont choisies, pas échantillonnées à intervalles réguliers.

Poses extrêmes et tenues

Les images qui comptent le plus sont les extrêmes : la pose de contact d’une marche, le sommet d’un saut, l’instant où une épée frappe. Une bonne animation de sprite les garde et les tient un peu plus longtemps, et supprime les intervalles qui n’apportent rien en petite taille. Des images espacées régulièrement donnent souvent une impression de flottement. Les images intelligentes de Pixor choisissent les poses extrêmes et les tiennent.

Moins d’images, des images plus propres

Une marche de six ou huit images suffit largement à 32 pixels. Plus d’images, c’est plus de risques de scintillement et plus de retouches. Pixor mesure le scintillement sur toute une animation.

Obtenir l’animation

Vous pouvez animer le modèle vous-même, utiliser les clips fournis avec lui (ou dans des fichiers de clips séparés), ou recibler des clips d’un autre rig. Pixor a aussi une bibliothèque de mouvements avec des actions simples (attente, marche, course, saut, attaque, coup reçu, mort) et des mouvements d’objets (rotation, bob, balancement, pulsation) pour les accessoires et les objets à ramasser.

Retoucher à la main

Un rendu vous donne des images cohérentes. Il ne vous donne pas le jugement d’un artiste. La plupart des bons résultats viennent d’un rendu de base propre, suivi de la retouche des images qui comptent : un visage plus clair, une silhouette plus forte sur l’image d’attaque, un reflet sur la lame.

Aseprite est l’outil habituel pour cela. Pixor exporte des fichiers .aseprite avec un tag pour chaque action et chaque côté. Quand vous modifiez le modèle ou les réglages et refaites le rendu, les calques peints à la main restent sur leurs images : les retouches ne sont pas perdues lors d’un nouveau rendu. Voir Aseprite.

Exporter vers les moteurs

Les moteurs veulent des images et des métadonnées. Cibles courantes :

• Planches de sprites en PNG avec un fichier JSON listant les images, les actions et les côtés.
• SpriteFrames Godot pour les projets Godot.
• GIF ou APNG pour les aperçus, les pages de boutique et les publications sur les réseaux sociaux.
• Cartes de normales et de profondeur si votre moteur éclaire les sprites 2D.

Pixor exporte tout cela. Comme le rendu est déterministe, le même modèle et les mêmes réglages donnent toujours les mêmes pixels, si bien que les planches peuvent être reconstruites à tout moment sans surprise. Voir Exports et le manuel d’export.

Essayez

Pixor est une application de bureau pour Windows et Linux qui réalise chacune des étapes ci-dessus, hors ligne et sans compte. Il ne contient aucune IA générative : il rend votre modèle avec les réglages que vous choisissez. Il coûte 19.99 $ une seule fois, toutes les mises à jour comprises. Commencez par Fonctionnement, parcourez la bibliothèque pour voir des sprites rendus ainsi, ou lisez le manuel pour découvrir chaque réglage.