Cours de Pixel-Art : Chapitre 6 ~ Anti-aliasing

Si vous avez le courage de lire de nos jours la presse "spécialiste" du jeu vidéo, vous avez sans doute déjà vu des journalistes se plaindre de l'aliasing dont souffrent certains jeux. Il s'agit du phénomène qui survient quand un objet au premier plan se trouve devant un fond de couleur distincte : le contour de l'objet se détache du fond et "on voit les pixels" sous forme d'un affreux crénelage des bords.
Les jeux en 3D sont les principales victimes du phénomène (voir à ma gauche : Meremanoid, un jeu Playstation dont ni vous ni moi n'avons jamais entendu parler. Enfin surtout vous.), étant donné que les algorithmes de lissage automatique sont couteux en performance (sur Playstation c'était totalement hors de question).

Les jeux en 2D ne sont pas trop touchés car il existe depuis toujours une bonne vieille méthode de pixel-art, l'anti-aliasing, pour lisser tous ces affreux contours et adoucir les transitions entre objets et arrière plan. En effet, ici pas besoin d'algorithme de la muerte : il suffit que les graphistes (<< c'est vous) y pensent à l'avance.
Pensons donc un peu si vous le voulez bien.
On peut distinguer trois situations dans lesquels le phénomène d'aliasing peut survenir, et il va falloir agir en conséquence.
Premier cas : j'ai deux couleurs différentes sur mon sprite et la transition entre les deux couleurs est aliasée (drame !). Dans ce cas là, on va pouvoir appliquer les techniques d'anti-aliasing à loisir pour adoucir cette transition.
Deuxième cas : la transition entre un de mes personnages et le décor derrière lui est toute aliasée (au secours !).
C'est là où la situation devient plus compliquée puisque nous allons devoir couper ce cas en deux.
Deuxième cas, version j'ai de la chance : en fait "j'ai de la chance" veut dire " je connais la couleur de l'arrière plan sur lequel sera affiché mon sprite". Dans ce cas de figure, vous pourrez anti-aliaser les bords de votre sprite pour que la transition avec le décor ne soit pas trop brutale.
Deuxième cas, version pas de bol : si par contre il vous est impossible de prévoir la couleur de l'arrière plan sur lequel sera affiché votre sprite (par exemple si c'est le héros de votre jeu, il va passer par toute une variété d'arrière-plans), ET BIEN NE FAITES RIEN. Voilà c'est dit. Il serait idiot de modifier les bords de votre sprite pour adoucir une transition puisque vous ne savez pas vers quelle couleur adoucir les contours.

Voilà, maintenant vous savez pourquoi et quand utiliser l'Anti-Aliasing...reste à découvrir comment !

Bien. Comment adoucir ces fameuses transitions entre deux couleurs ? La réponse est plutôt évidente, il suffit d'utiliser une ou plusieurs couleurs intermédiaires (par exemple du gris pour aller entre du blanc et du noir), que l'on appelle teintes tampons (buffer shades). Toute la subtilité réside dans la façon de s'en servir. En effet, la brute sanguinaire et dénuée de tout sens artistique qui sommeille en vous a surement très envie de faire quelque chose comme ceci :

Rha c'est juste immonde. J'espère que vous vous en rendez compte aussi bien que moi, mais non seulement cette erm..."méthode" prend beaucoup de temps à mettre en œuvre (le pixel-art est déjà assez fastidieux comme ça) mais surtout elle ne résout pas notre problème de transition. Bref, il ne suffit pas de faire N'IMPORTE QUOI avec les teintes tampons pour anti-aliaser. L'anti-aliasing est une technique DISCRÈTE, gardez ça en tête.
Maintenant que vous savez ce qu'il ne faut surtout pas faire (d'infâmes contours), voyons ce qu'il faut effectivement faire. D'abord les images, ensuite les mots.

Occupons nous d'un petit arc de cercle orange qui tranche violemment avec son fond gris foncé.
A gauche, la bête à l'état naturel. A droite, les étapes successives du processus d'anti-aliasing.
Commençons par remarquer que le bord de l'arc de cercle est une suite de différents segments, ceux du bas sont de longueur 1, il y en a ensuite deux de longueur 2 et enfin deux de longueur 3 (cela devrait un peu vous rappeler le chapitre sur les courbes). Nous allons nous occuper séparément de chaque segment, en considérant les lignes de l'image les unes après les autres. Dans le cas de segments verticaux (c'est à dire pas comme ici), on considèrerait les colonnes de l'image les unes après les autres.
Sur chaque ligne, on répartit de part et d'autre de la frontière des pixels des teintes tampons pour adoucir la transition (oui on fait un petit dégradé pour le coup), MAIS /!\ ATTENTION /!\ : si vous vous écartez trop de la "frontière" de vos deux teintes, vous allez détruire la forme originelle (et vous rapprocher de l'exemple de ce qu'il ne fallait pas faire). Vos teintes tampons ne doivent pas s'étaler plus loin que les extrémités des segments des lignes au dessus et au dessous, cela semble très compliqué mais en fait pas du tout, regardez les dessins : à la dernière étape, les segments de 1 pixels ne bénéficient que de deux pixels d'AA car sinon ils déborderaient sur les segments voisins et créeraient un effet appelé "banding" très déplaisant (et assez proche de l'exemple "à ne pas suivre" ci-dessus). Il ne faut surtout pas réaliser un "contour" autour de votre forme.
Au besoin, on peut se permettre quelques ajustements si malgré toutes les précautions prises l'AA dénature un peu la forme de l'objet mais cela n'a pas été le cas ici. Aussi, sachez qu'il n'est pas indispensable d'anti-aliaser les segments de longueur 1 (les lignes à 45°) qui s'en sortent généralement assez bien au naturel.

Les résultats sont immédiatement visibles (ça ou alors vous avez immédiatement besoin d'une paire de lunettes). Voilà ce que cela donne sur notre cercle orange (en plus vous l'avez genre image de pub avant/après) et sur notre bon vieux dragon qui pour le même prix s'est vu élargir sa palette.

Remarquez également que j'ai un peu calmé l'ambient lighting sur le dragon. Comme annoncé précédemment, c'est une technique à utiliser avec parcimonie.
Terminons par une petite note technique pour les plus débrouillards d'entre vous et que je ne savais pas trop où caser : vos teintes tampons ne doivent pas nécessairement être des couleurs dont la teinte, la saturation et la luminosité sont comprises entre celles des couleurs à lisser. Si vous voulez optimiser un peu vos palettes, vous pouvez tenter d'exploiter différents gris car ils ont le don de pouvoir servir dans des rampes de différents couleurs et font des merveilles pour l'anti-aliasing.

Concluons tout ce bazar avec un superbe pixel-art généreusement fourni par Panda, qui maîtrise l'anti-aliasing bien mieux que moi (et que vous aussi). Cliquez sur l'image pour la voir en grand et n'oubliez pas d'essuyer le filet de bave de votre clavier après avoir observé le détail.