Améliorez vos sprites en pixel art!
Introduction
Dans cet article je vais vous expliquer un certain nombre de techniques que j’utilise pour améliorer les sprites de planet centauri avant leur intégration (ou animation). Une partie des règles qui seront présentés sont très simples à mettre en œuvre et/ou très mécaniques, donc même si vous n’êtes pas un grand artiste, essayez de suivre ces quelques principes et vos sprites seront bien plus propres et beaux.
Couleurs
Il y a beaucoup d’erreurs faciles à commettre qui vont grandement dégrader la qualité d’un sprite. Heureusement, elles sont aussi généralement simples à corriger avec un peu d’expérience et un regard critique aiguisé.
Trop de couleurs
Le pixel art est l’art de la contrainte. Si deux couleurs sont très proches, essayez tout simplement de les fusionner en une couleur moyenne, pour voir comment cela rend. Avoir une palette avec peu de couleurs vous permettra de l’améliorer bien plus facilement, mais simplifiera aussi la création du sprite en lui-même. Cela permettra aussi plus facilement d’identifier les artefacts indésirables (pixels placés au mauvais endroit).
Gradients
Si vous faites une palette sous forme de gradients, évitez à tout prix d’avoir des gradients indépendants (c-à-d qui se contentent juste d’assombrir/éclaircir une couleur de base). Faites des gradients aux couleurs interdépendants, qui se croisent.
Essayez aussi d’avoir des clairs plutôt saturés qui tendent vers le jaune ou cyan et des sombres plus désaturés qui tendent vers le bleu ou violet. Mais évitez d’avoir une palette totalement saturée ou désaturée. Cela nuit au contraste et rend généralement mal. Faites aussi en sorte d’avoir des gradients de teintes assez éloignées pour ne pas vous retrouver avec des contrastes de couleurs trop fades.
Rappelez-vous aussi de ne pas utiliser plus de couleurs que cela est nécessaire et gardez des gradients assez contrastés au niveau de la luminosité. N’hésitez pas à récupérer des palettes de référence sur d’autres sprites pour les tester sur le vôtre, et voir si cela rend mieux ou non, pour l’adapter.
Couleurs voisines
Pour les détails ou traits fins, évitez autant que possible les trop forts contrastes avec les couleurs voisines. Une ligne sombre sur fond clair ne fera généralement pas naturelle. En revanche une ligne qui s’adapte à sa couleur de fond donnera une impression de volume plus réaliste.
Cela vaut aussi pour les contours extérieurs, qui doivent à la fois s’adapter à la couleur intérieure et à l’ombrage de la surface.
Nb: Cela ne s’applique bien sûr pas à tous les styles graphiques.
Pillow shading
Le pillow shading est l’effet désagréable obtenu quand la source de lumière vient de face.
Évitez autant que possible les sources lumineuses de face, sauf si vous savez vraiment ce que vous faites.
Lignes et courbes
Ligne parfaite: une ligne dont le pas vertical pour un pas horizontal est toujours le même.
Courbe parfaite: une courbe constituée de lignes parfaites dont le pas dépend toujours des parties voisines.
Ligne sale: ligne donc au moins un sous-segment à plus d’un pixel adjacent a une extrémité.
Comme vous pourrez vous en douter en voyant les images ci-dessus, les lignes sales sont à proscrire. Il faudra aussi faire usage le plus possible de lignes et courbes parfaites.
Clusters
Un cluster est un groupe de pixels de même couleur, collés entre eux. La forme des clusters va grandement influencer le rendu final de l’image. Des clusters bruts et anguleux donneront généralement un résultat assez brouillon. On préférera souvent utiliser des clusters arrondis ou bien droits pour avoir une image finale assez douce, précise et agréable a l’oeil.
Il faut aussi éviter à tout prix les pixels solitaires. Si un pixel se retrouve au milieu d’un cluster d’une autre couleur sans qu’il n’y ait aucun pixel adjacent de la même couleur que celui-ci, supprimez-le.
Dithering et texturing
Contrairement à l’idée répandue, le dithering n’est pas une technique aussi magique qu’elle ne pourrait le laisser croire. Beaucoup de dithering entre des couleurs contrastées va généralement donner un résultat sale et granuleux. C’est d’ailleurs à proscrire totalement si vous souhaitez animer un sprite, car maintenir une coherence de dithering entre les frames sera un vrai calvaire.
Utilisez plutôt du texturing si votre style l’exige (la différence fondamentale avec le dithering est qu’une texture n’a pas de limite de couleurs). Mais n’oubliez pas, qui dit texture dit difficultés supplémentaires pour l’animation, et la lisibilité sera généralement amoindrie. Bref, encore une fois c’est une histoire de style. Pour un style cartoon n’utilisez ni dithering, ni texturing.
Antialiasing
L’antialiasing est une technique qui consiste à réduire l’effet d’escalier (aliasing) présent sur les lignes ou courbes entre deux surfaces de couleurs contrastées.
Antialiasing interne
Il y a deux cas d’utilisation de l’antialiasing interne. La séparation simple entre deux surfaces, et le cas de lignes ou courbes qui coupent une surface de couleurs différentes.
Dans le premier cas il suffit d’utiliser une couleur intermédiaire là où l’aliasing est présent pour le réduire (généralement lorsqu’il y a une variation soudaine de la courbure).
Dans le second cas il suffit généralement de faire passer un petit cluster de couleur intermédiaire entre chaque sous-segment horizontal ou vertical de la ligne. La taille de ce cluster dépendant directement de la taille du sous-segment.
Antialiasing externe
L’antialiasing externe, doit faire face à une restriction supplémentaire face à l’antialiasing interne: le fond d’un jeu varie constamment, ainsi on doit avoir un effet qui s’adapte aux fonds sombres comme aux fonds clairs. La règle est donc simple, on applique l’effet uniquement à l’intérieur du sprite. L’extrémité d’un segment extérieur qui touche le fond ne devra jamais être modifiée.
Ici l’on voit bien que l’antialiasing interne appliqué sur les parties externes du sprite donne de sales artefacts, alors que l’antialiasing externe, bien que moins efficace, donne un résultat tout à fait convaincant sur n’importe quel type de fond.
The end.