6 mesi di camminate

Quando decidi di passare da animazioni a 4 frames ad animazioni a 8 frames, non pensare che “tanto sono 4 in più cosa vuoi oh”. E’ per questo che per una semplice animazione come può essere quella di un cane su due piedi con un maglioncino rosso che cammina a destra e a sinistra ci ho messo 6 mesi di lavoro.

Il bello è che 8 frames sono il minimo indispensabile per avere un’animazione fluida, e per questo immagino lo sia uscita abbastanza. Per realizzarla son state adottate anche due tecniche particolari: subpixelling e selective outlining (o selout), che proverò a spiegare in breve visto che questo non è un articolo Pixels? This way! La tecnica del subpixelling è probabilmente la più utile, mentre la selout viene usata quasi esclusivamente per gli sprite di un gioco.

Subpixelling – è una tecnica interessante, che consente di “mimare” un mezzo pixel semplicemente colorandolo di un colore scelto appositamente. Perché c’è il bisogno di un mezzo pixel? Nonostante ormai le risoluzioni dei monitor siano diventate altissime, i vari pixels sono ben distinguibili tra di loro, soprattutto quando parliamo di pixelart. Questo significa che quando un pixel è troppo a destra (o sinistra o quel che cavolo vuoi) un occhio attento lo nota immediatamente. Da qui il bisogno di avere un pixel ancora più piccolo per poter dare l’illusione di avere un oggetto meglio definito.

A sinistra l’animazione senza subpixelling negli occhi, a destra la stessa con subpixelling. So che a lungo andare può provocare mal di testa guardare queste due immagini affiancate, ma abbiate pazienza eh! Aggiungere quei pochi pixels scuri (ma non totalmente, perché invece che essere un pixel nero, deve dare l’impressione di un mezzo pixel, quindi un pixel mezzo nero perché non è possibile tagliare un pixel in due con l’accetta, quindi un pixel marrone) è davvero d’aiuto.

Selective outlining – è una tecnica poco utilizzata fuori dall’ambito del game making: c’è a chi piacciono le linee nere e a chi no. La selout va incontro a quei poveri che stanno nel mezzo, consentendo di avere il bordo dello sprite colorato intelligentemente da avere uno sprite che sta bene sia sotto sfondi chiari, che scuri. Un esempio famoso:


Da notare come i bordi dello sprite cambiano colore a seconda della zona in cui si trovano. Pezzo di Derek Yu.

Detto ciò, come sempre libero il mio hard disk mettendo sull’articolo anche il processo.

Se non sapevate che prima di animare precipitosamente una cosa con tutti i dettagli ci vuole della preparazione, ora lo sapete: come quando si disegna con gli stecchini per dare i primi accenni di corpo, si anima a zone colorate in modo da distinguerle tra di loro. In questa versione manca la coda, che è il pezzo che più di tutto mi ha fatto dannare jesus, la madonna e il grinch tutti insieme. Si ringrazia Peach (Matteo Pescarin) per la dritta sulla coda.

Altre cose che compaiono in questo post:


Primo terreno per Terra.

5 Responses to “6 mesi di camminate”


  • Beh, anche se me lo hai postato ieri sera alla fine oggi l’ho letto, mi ha interessato poiché c’erano cose che benché io non sia un pixel artist mi hanno incuriosito!
    Daje forte asu!

  • In realtà esiste un metodo per accendere solo mezzo pixel (o per spostare un pixel a destra/sinistra di mezza posizione), ma funziona solo per alcuni colori, e presenta parecchie limitazioni di ordine pratico.

    Il “trucco” si basa sul fatto che, su un monitor lcd, ogni pixel è costituito da tre elementi distinti: il rosso a sinistra, il verde al centro ed il blu a destra. Quindi, un pixel rosso apparirà leggermente spostato a sinistra rispetto ad un pixel blu. Inoltre, se si accende un pixel magenta, questo pixel avrà la parte a sinistra rossa e quella a destra blu; se invece si accende un pixel blu, ed alla sua destra un pixel rosso, sullo schermo si vedrà sempre un pixel magenta, meglio definito (l’elemento blu di un pixel è molto vicino all’elemento rosso del pixel successivo, mentre tra il rosso e il blu nello stesso pixel c’è il verde), ma soprattutto, il pixel apparirà esattamente a metà tra due posizioni!

    Questo trucco si applica solo se l’immagine viene mostrata su schermo lcd (non se viene stampata, o se viene mostrata su uno schermo crt); inoltre, non funziona se l’immagine viene ingrandita o ruotata.

    • Questo è molto interessante, soprattutto per le difficoltà pratiche.
      E’ molto limitativo il fatto di dover creare dei subpixel illuminando solo certi elementi, ottenendo così soltanto determinate associazioni di colore e di posizione (esempio, il pixel magenta apparirà sempre spostato verso il basso perché non fa uso del verde, se ho capito correttamente).

      Non di meno è bello sapere queste cose e perché no, vedere anche degli esempi pratici in una ipotetica mostra del pixel, su tanti monitor crt.
      Thanks.

      • Su un monitor LCD normalmente i pixel appaiono spostati a destra o a sinistra, non in alto o in basso, perché gli elementi sono affiancati verticalmente ed hanno la stessa altezza.

        Un pixel magenta appare come se fosse formato da due pixel (uno rosso ed uno blu): fai la prova: traccia una riga verticale larga un pixel, di colore magenta, poi guarda lo schermo da vicino: noterai due righe, una rossa (sulla sinistra), ed una blu (a destra).

        Invece, traccia una riga verticale blu, ed alla sua destra una riga rossa: noterai che viene una sola riga verticale di color magenta.

        Infine, traccia una riga verticale rossa, ed immediatamente alla sua destra una riga blu (anche qui, le righe devono essere larghe un pixel, e devono essere affiancate, senza niente spazio nel mezzo); questa volta, vedrai due righe distinte, una rossa e una blu…. solo che in mezzo ci sarà una riga verticale nera (che tu non hai mai disegnato)!

        Inoltre: un pixel magenta è più largo di un pixel verde (prova, su sfondo nero, a tracciare due righe verticali, una magenta e una verde, larghe un pixel), perchè il verde usa l’elemento centrale, il magenta usa i due elementi laterali.

        Wikipedia ne parla qui:
        http://en.wikipedia.org/wiki/Subpixel_rendering

        Per darti un’idea di cosa accade sul monitor, ti linko delle fotografie fatte da me con il microscopio:

        Questa è una linea tracciata normalmente (ad occhio nudo, la linea è bianca su sfondo nero):
        http://www.freeimagehosting.net/t/fnbbu.jpg

        Si nota come si passi bruscamente a destra di un intero pixel.

        Questa è una linea realizzata con i subpixel:
        http://www.freeimagehosting.net/t/eh9y5.jpg

        Ho anche scritto un mini-articolo (con immagini migliori) che dovrebbe essere pubblicato tra qualche giorno sulla rivista online Back 2 Basic (http://back2basic.phatcode.net/ ), in cui cerco di spiegare nei dettagli cosa succede e come sfruttare il fenomeno.

Leave a Reply to angros47