Animation sous-pixel

L’animation sous-pixel donne l’impression qu’un objet bouge de moins d’un pixel, en décalant les couleurs le long de ses bords au lieu de déplacer toute la forme.

Un slime au repos, rendu par Pixor
Un drapeau qui flotte, rendu par Pixor

Ce que c’est

Sur un petit sprite, le plus petit mouvement entier est d’un pixel, et un pixel peut être énorme. Un personnage de 16 pixels qui soulève sa poitrine d’un pixel pour respirer a l’air d’avoir le hoquet.

L’animation sous-pixel contourne ce problème. Au lieu de déplacer la forme, vous changez la couleur des pixels le long de son bord. Si un pixel de bord passe de la couleur du fond à un ton moyen, puis à la couleur pleine de la forme, le bord semble avancer d’un tiers de pixel, puis de deux tiers. L’œil perçoit un petit mouvement fluide.

Pourquoi les artistes le font

  • Des idles en douceur. Respirer, flotter et osciller paraissent calmes plutôt que saccadés.
  • Petits sprites. À 16 ou 32 pixels, il n’y a pas de place pour de grands mouvements, donc les fractions comptent.
  • De la fluidité sans plus de pixels. Il ajoute une résolution apparente au mouvement sans redessiner en plus grand.

Erreurs courantes

  • Trop de couleurs intermédiaires. Si vous ajoutez de nouvelles couleurs rien que pour les bords, la palette grossit et le sprite paraît flou. Utilisez les couleurs déjà présentes dans vos rampes.
  • L’utiliser pour les grands mouvements. Un cycle de course ou un coup d’épée se lit mieux avec des poses nettes en pixels entiers.
  • Des bords incohérents. Si un côté d’une forme utilise des pas sous-pixel et que l’autre saute, la forme semble s’étirer.
  • Scintillement. Faire alterner un pixel d’une image à l’autre sans direction claire ressemble à du bruit plutôt qu’à un mouvement.

Comment le faire à la main

  1. Dessinez les poses de début et de fin, à un pixel d’écart.
  2. Entre elles, ajoutez une ou deux images où seuls les pixels de bord changent.
  3. Pour chaque pixel de bord qui sera recouvert par le mouvement, faites-le passer par une couleur intermédiaire de la rampe.
  4. Jouez la boucle à la vitesse du jeu et avec un zoom ×1. Ajustez le rythme avant d’ajouter des images.
  5. Gardez immobiles tous les autres pixels du sprite, pour que le changement se lise comme un mouvement du bord.

La place de Pixor

Le nœud de Style Mouvement sous-pixel de Pixor montre une partie qui bouge de moins d’un pixel par image dans ses pixels de bord, comme le ferait un artiste. Au-delà, Pixor garde une animation rendue assez stable pour que des retouches sous-pixel valent la peine. Le pivot est verrouillé sur un pixel dans chaque image et chaque côté, si bien que le corps ne tremble pas. Les bandes de lumière tiennent jusqu’à ce qu’une surface ait nettement tourné, le tramage est fixé à la surface, et une passe de nettoyage retire les pixels isolés et les traits qui n’apparaissent que le temps d’une image. Pixor mesure aussi le scintillement sur l’ensemble d’un clip.

De là, exportez vers Aseprite, où chaque action et chaque côté a son propre tag, et ajoutez des retouches sous-pixel sur un calque séparé. Quand vous refaites le rendu, les calques peints à la main restent sur leurs images.

Questions

L’animation sous-pixel, est-ce la même chose que l’anticrénelage ?

Elle repose sur la même idée, des couleurs intermédiaires sur les bords, mais les fait varier dans le temps pour que le bord semble glisser d’une fraction de pixel.

Quand l’utiliser ?

Pour les mouvements petits et lents : respiration, flottement, œil qui cligne, drapeau qui ondule. Les grands mouvements se dessinent mieux en déplacements de pixels entiers.

À lire ensuite

Essayez-le sur votre propre modèle, gratuitement dans votre navigateur, ou procurez-vous la version complète.

Essayer dans le navigateur Obtenir Pixor