Éditeur d'Art Pixelisé — Dessiner l'Art Rétro Pixel par Pixel

Les tailles en pixel art sont des conventions, et ces conventions existent parce qu’elles fonctionnent. Le 16×16 est la taille classique de la tuile et du sprite — un personnage NES, une icône d’objet Minecraft, un favicon. Le 32×32 donne à un personnage un visage et une pose. Le 64×64, c’est un portrait ou un ennemi détaillé, et le 100×100 une scène entière. Choisissez la taille qui correspond à la destination de l’image, car un sprite dessiné en 64×64 puis réduit en 16×16 devient de la bouillie, et une icône 16×16 agrandie n’est jamais qu’une icône 16×16 en plus gros.

Décidez avant de dessiner. Redimensionner plus tard conserve les pixels mais pas la composition : un personnage qui remplissait un cadre de 32×32 devient une petite silhouette dans le coin d’un 64×64. Si vous dessinez un ensemble — un tileset, un pack d’icônes, une équipe de personnages — fixez une seule taille de toile pour tout l’ensemble et gardez chaque pièce dessus, pour qu’elles se côtoient à la même échelle dans le jeu ou sur la page.

La palette de 256 couleurs est un menu, pas un objectif. La plupart des sprites aboutis utilisent huit à seize couleurs, organisées en rampes : trois à cinq paliers d’un même matériau, de l’ombre à la lumière. Ce qui sépare un bon pixel art d’un pixel art plat, c’est qu’une rampe ne se contente pas de s’éclaircir — elle décale la teinte. Les ombres tirent vers le bleu ou le violet, les lumières vers le jaune ou l’orange, si bien que l’ombre d’une chemise rouge est un cramoisi froid et sa lumière un corail chaud, plutôt qu’un rouge plus rose.

Construisez d’abord les rampes, puis dessinez. Choisissez le ton moyen de chaque matériau, prenez une ombre et une lumière qui décalent la teinte autant que la valeur, et essayez de réutiliser une même rampe pour plusieurs matériaux — les trois mêmes gris peuvent servir à une armure, à de la pierre et à un nuage. Quand deux couleurs de votre sprite sont si proches qu’il faut zoomer pour les distinguer, l’une des deux ne mérite pas sa place.

En pixel art, les diagonales sont des escaliers, et l’œil ne lit un escalier comme une ligne lisse que si les marches sont régulières. Une ligne à 45° fait un pixel par marche. Une ligne plus couchée se compose de séries de deux, trois ou quatre pixels — et toutes les séries doivent avoir la même longueur, sinon la ligne paraît tordue. L’erreur classique, c’est l’angle où deux lignes se rejoignent en laissant un pixel doublé ; effacez-le et l’angle redevient net. Dessinez au crayon d’un pixel de large et dézoomez souvent : les crénelages se voient à 1× et se cachent à 8×.

Le tramage — un damier de deux couleurs — est la façon dont le pixel art simule une troisième couleur et un dégradé avec une palette limitée. Un damier à 50 % entre deux paliers d’une rampe se lit comme le palier intermédiaire ; un motif plus clairsemé se lit comme une transition plus douce. Utilisez-le pour les ciels, les ombres sur les grandes surfaces et le métal, et évitez-le sur les petits sprites : en 16×16, un damier ressemble simplement à du bruit.

L’image sera vue à sa taille réelle, ou à un multiple entier de celle-ci, jamais au zoom auquel vous la dessinez. Désactivez la grille et regardez la toile dans son ensemble toutes les quelques minutes ; mieux encore, plissez les yeux. Si la pose, l’objet ou la lettre se lit encore une fois le détail estompé, la silhouette est bonne. Sinon, aucun ombrage ne la sauvera — corrigez d’abord le contour.

Un contour d’un pixel dans une version plus foncée de la couleur de remplissage (pas du noir) garde un sprite lisible sur n’importe quel fond. Un contour noir pur fonctionne sur fond clair et disparaît sur fond sombre ; un contour sélectif — foncé là où la forme s’éloigne de la lumière, plus clair là où elle lui fait face — est la technique qu’emploie l’essentiel du pixel art moderne, et avec une rampe déjà construite, il ne reste au crayon qu’à cliquer sur la bonne nuance.

L’export PNG écrit un pixel d’image par case de la toile, sans aucun lissage, ce qui est exactement ce qu’attend un moteur de jeu. Ce qui peut encore le rendre flou, c’est l’étape d’après : la mise à l’échelle. N’agrandissez jamais du pixel art autrement que par un nombre entier — 2×, 3×, 4× — avec une interpolation au plus proche voisin. Dans Unity, c’est le Filter Mode réglé sur Point et la Compression sur None pour la texture ; dans Godot, le filtre de texture sur Nearest ; dans un navigateur, image-rendering: pixelated. Une échelle de 150 %, ou n’importe quel rééchantillonnage bilinéaire, adoucit chaque bord que vous avez dessiné.

Les cases que vous laissez vides s’exportent en transparent, si bien qu’un sprite n’a besoin d’aucune couleur de fond. Si l’image est destinée à une page web ou à un document plutôt qu’à un jeu, exportez à la taille de la toile et laissez la page l’agrandir, ou exportez une fois en 4× pour l’impression — mais ne redimensionnez jamais le PNG dans un éditeur photo avec ses réglages par défaut.