Créateur de sprites

Une toile de sprite n’est pas une image que l’on réduira plus tard : la taille choisie est la résolution que verra le joueur. En 16×16, un personnage est une silhouette avec deux pixels pour les yeux, d’où l’intérêt de cette taille pour les objets, les icônes et les petits héros. En 32×32, il y a de la place pour un visage, une main lisible et une gamme d’ombres. En 64×64, on se rapproche de l’illustration, et chaque image d’animation coûte quatre fois plus de pixels qu’en 32×32.

Décidez de la taille d’après les autres sprites de votre jeu, pas d’après le détail que vous aimeriez. Un tileset sur une grille de 16 pixels appelle des personnages de 16 ou 32 pixels de haut. Si un sprite doit grandir, le panneau de taille garde le dessin accroché au bord ou au coin choisi, et chaque image est redimensionnée de la même façon : l’animation reste calée.

La plupart des bons sprites utilisent entre quatre et seize couleurs. Une petite palette oblige chaque couleur à avoir un rôle : un contour, une base, une ou deux ombres, une lumière. Choisissez une couleur de base et construisez une gamme avec les boutons « plus sombre » et « plus clair » à côté ; décaler légèrement la teinte vers le bleu dans les ombres et vers le jaune dans les lumières se lit comme de la lumière plutôt que comme du gris.

Le contour détache le sprite de n’importe quel fond. Un contour sombre complet est le choix le plus sûr pour les petits sprites ; sur les plus grands, un contour qui prend la couleur de la forme qu’il entoure (contour sélectif) paraît plus doux. Évitez d’ombrer chaque forme depuis ses bords vers l’intérieur (le « pillow shading »), qui aplatit le volume. La lumière vient d’un côté, et l’ombre tombe de l’autre.

Des boucles courtes portent l’essentiel de l’animation dans un jeu. Une respiration ou un rebond d’attente fonctionne en deux à quatre images à quatre à six images par seconde. Un cycle de marche prend en général quatre à huit images à huit à douze : les deux poses de contact où un pied touche le sol, et les poses de passage entre elles. Un coup ou une attaque se lit mieux avec une image d’anticipation lente, une ou deux images d’action très rapides et une pose tenue ensuite.

Dessinez d’abord les poses clés, puis comblez entre elles. Dupliquer sert à cela : copiez l’image sur laquelle vous êtes et ne changez que les pixels qui bougent, pour que le corps ne tremble pas d’une image à l’autre. Avec la pelure d’oignon activée, l’image précédente apparaît faiblement sous les pixels vides, ce qui permet de déplacer un bras d’un ou deux pixels au lieu de le redessiner. Pour tenir une pose plus longtemps, dupliquez-la : dans un GIF, chaque image dure le même temps.

Regardez l’aperçu à la vitesse qu’utilisera le jeu. Une animation fluide au ralenti devient souvent saccadée à pleine vitesse, et le remède est presque toujours de faire changer moins de pixels entre les images, pas d’ajouter des images.

Une sprite sheet réunit toutes les images de l’animation sur une seule image. La planche exportée par cet outil n’a ni marge ni espace entre les images, donc n’importe quel moteur peut la découper à la seule taille d’une image : un sprite de 32×32 en huit images s’exporte en bande de 256×32, ou en grille de 3×3 dont la dernière case reste vide.

Exportez en 1× pour un moteur et laissez le moteur agrandir. Dans Godot, réglez le filtre de texture sur Nearest pour garder des pixels nets. Dans Unity, mettez le Filter Mode sur Point (no filter), désactivez la compression et faites correspondre Pixels Per Unit à la taille du sprite. Dans GameMaker, importez la bande en indiquant le nombre d’images. Les pixels transparents restent transparents, et le sprite peut se poser sur n’importe quel fond.

Un GIF de 32×32 à sa taille réelle est plus petit qu’une vignette, et la plupart des sites floutent les petites images quand ils les agrandissent. Exportez plutôt en 4× ou 8× : chaque pixel devient un bloc de 4×4 ou 8×8 pixels identiques, et le fichier reste léger car le GIF compresse très bien ces suites de pixels identiques.

Dans un GIF, la transparence est une couleur désactivée, et certaines messageries ou réseaux sociaux l’affichent en noir ou en blanc. Si l’animation doit être publiée là où vous ne maîtrisez pas le fond, exportez-la sur blanc.