Is sub-pixel animation the same as anti-aliasing?

It uses the same idea, in-between colours on edges, but changes them over time so the edge seems to slide by a fraction of a pixel.

When should I use it?

For small, slow motion: breathing, bobbing, a blinking eye, a swaying flag. Large movements are better drawn as whole-pixel moves.

Animazione sub-pixel

L’animazione sub-pixel fa sembrare che qualcosa si muova di meno di un pixel, spostando i colori lungo i suoi bordi invece di muovere l’intera forma.

Uno slime inattivo, renderizzato da Pixor

Una bandiera che sventola, renderizzata da Pixor

Cos’è

Su uno sprite piccolo, il movimento intero più piccolo è un pixel, e un pixel può essere tanto. Un personaggio di 16 pixel che alza il petto di un pixel per respirare sembra avere il singhiozzo.

L’animazione sub-pixel aggira il problema. Invece di spostare la forma, cambi il colore dei pixel lungo il suo bordo. Se un pixel del bordo passa dal colore dello sfondo a un tono medio, e poi al colore pieno della forma, il bordo sembra avanzare di un terzo di pixel, poi di due terzi. L’occhio legge un movimento piccolo e fluido.

Perché gli artisti lo fanno

Idle delicati. Respiro, fluttuazione e ondeggiamento sembrano calmi invece che scattosi.
Sprite piccoli. A 16 o 32 pixel non c'è spazio per movimenti ampi, quindi le frazioni contano.
Fluidità senza più pixel. Aggiunge risoluzione apparente al movimento senza ridisegnare a una dimensione maggiore.

Errori comuni

Troppi colori intermedi. Se aggiungi colori nuovi solo per i bordi, la palette cresce e lo sprite sembra sfocato. Usa colori già presenti nelle tue rampe.
Usarlo per i movimenti ampi. Un ciclo di corsa o un fendente di spada si leggono meglio con pose nette a pixel interi.
Bordi incoerenti. Se un lato di una forma usa passi sub-pixel e l’altro salta, la forma sembra allungarsi.
Sfarfallio. Cambiare un pixel avanti e indietro tra i fotogrammi senza una direzione chiara sembra rumore più che movimento.

Come farlo a mano

Disegna le pose di inizio e fine, a un pixel di distanza.
Tra di essi, aggiungi uno o due fotogrammi in cui cambiano solo i pixel di bordo.
Per ogni pixel di bordo che sarà coperto dal movimento, fallo passare per un colore intermedio della rampa.
Riproduci il loop alla velocità del gioco e con zoom 1×. Regola i tempi prima di aggiungere altri fotogrammi.
Tieni fermi tutti gli altri pixel dello sprite, così il cambiamento si legge come movimento del bordo.

Dove si inserisce Pixor

Il nodo di Stile Movimento sub-pixel di Pixor mostra nei pixel del bordo una parte che si sposta di meno di un pixel per fotogramma, come farebbe un artista. Oltre a questo, Pixor mantiene un’animazione renderizzata abbastanza stabile perché valga la pena aggiungere ritocchi sub-pixel. Il pivot è bloccato su un pixel in ogni fotogramma e lato, così il corpo non trema. Le bande di luce sono tenute finché una superficie non gira chiaramente, il dithering è tenuto sulla superficie, e un passaggio di pulizia toglie pixel isolati e linee che compaiono per un solo fotogramma. Pixor misura anche lo sfarfallio lungo una clip.

Da lì, esporta in Aseprite, dove ogni azione e lato ha il suo tag, e aggiungi ritocchi sub-pixel su un livello separato. Quando renderizzi di nuovo, i livelli dipinti a mano restano sui loro fotogrammi.

Mixel: perché i movimenti dovrebbero restare sulla griglia dei pixel
Sprite pre-renderizzati
Animazione, Aseprite e il manuale di esportazione

Domande

L’animazione sub-pixel è la stessa cosa dell’antialiasing?

Usa la stessa idea, colori intermedi sui bordi, ma li cambia nel tempo così il bordo sembra scivolare di una frazione di pixel.

Quando dovrei usarlo?

Per movimenti piccoli e lenti: il respiro, un’oscillazione, un occhio che sbatte, una bandiera che ondeggia. I movimenti grandi si disegnano meglio come spostamenti di pixel interi.