Esperienze personali sulle tecniche di animazione in pixel art per prodotti videoludici.

L’animazione pixel art nei videogiochi è un campo che richiede sia creatività che competenza tecnica. La tecnica frame by frame è spesso preferita perché ricrea l’effetto delle animazioni dei giochi degli anni ’80/’90 e richiede un numero ridotto di frame. Tuttavia, può essere interessante integrare alcune animazioni realizzate con la skeletal animation, che impiega “ossa” interconnesse simili al rigging usato nella grafica 3D. Combinando le tecniche frame-by-frame e skeletal, si possono raggiungere risultati sorprendenti. Successivamente, ho descritto il mio metodo personale impiegato per sviluppare alcuni prodotti videoludici che sfruttavano un insieme di queste due tecniche.

Per iniziare, la skeletal animation è ampiamente usata nei videogiochi con l’ausilio di software come Spine Animator, Dragon Bones e altri. Questa tecnica impiega ossa interconnesse per animare un personaggio, risultando efficiente e ben integrabile con i più diffusi motori di gioco.

D’altra parte, l’animazione frame-by-frame implica la creazione di una serie di fotogrammi distinti per ciascun movimento. Questo approccio è ideale per la pixel art, dove ogni pixel occupa una posizione precisa. Tuttavia, richiede una profonda comprensione dell’interpolazione tra i fotogrammi e un considerevole investimento di tempo per disegnare ogni singolo frame.

È possibile fondere le due tecniche per raggiungere i risultati desiderati, ma ciò comporta una serie di accorgimenti e strategie da pianificare attentamente.

Per organizzare il processo di realizzazione, possiamo dividerlo in cinque fasi; ciò semplificherà la pianificazione del lavoro e ne aumenterà la professionalità.

1. Studio reference 
2. Progettazione e bilanciamento 
3. Realizzazione
4. Ottimizzazione e post-produzione
5. Analisi e miglioramento 

1 Studio Reference

Nel mio approccio lavorativo, do molta importanza alla fase di studio iniziale prima di avviare un progetto. Sono convinto che questa strategia mi permetta di concentrarmi meglio sul compito da svolgere. Di conseguenza, mi impegno nella ricerca di riferimenti o esempi di progetti precedenti che possano servire da guida per organizzare il mio lavoro nel modo più efficiente. In particolare, ritengo che l’industria dei videogiochi possa essere fonte di ispirazione per creare un lavoro che risponda alle nostre aspettative.

Ecco alcuni giochi che integrano l’animazione scheletrica e l’animazione fotogramma per fotogramma:

1. Hollow Knight: Questo gioco mette in mostra una splendida grafica 2D con animazioni fluide. Utilizza la skeletal animation per i movimenti di base dei personaggi e l’animazione frame-by-frame per dettagli specifici, oltre ad essere un ottimo esempio funzionale  di character design  
2. Blaphemous: Un altro titolo di successo con pixel art. che sapientemente fonde varie tecniche di animazione.
3. Owlboy: Owlboy combina abilmente entrambe le tecniche. La skeletal animation controlla i movimenti dei personaggi, mentre l’animazione frame-by-frame aggiunge dettagli ai loro movimenti e alle espressioni.
4. Odin Sphere e Muramasa della Vanillaware: Anche se non si tratta propriamente di pixel art, ho trovato grande ispirazione nei loro giochi, in particolare nell’uso sapiente della deformazione delle forme e nella progettazione dei movimenti nelle fasi di combattimento, il che mi rende un loro appassionato fan.

In generale, molti giochi indie che si ispirano al retro utilizzano questa combinazione per ottenere un aspetto piacevolmente nostalgico con animazioni fluide ed efficaci . 

2 Progettazione e ottimizzazione 

Il bilanciamento tra animazione scheletrica e frame-by-frame richiede una pianificazione meticolosa; è essenziale considerare alcuni aspetti fondamentali prima di iniziare l’animazione di un personaggio per un videogioco:

• Design del Personaggio: Nel design, definiremo la personalità e i tratti emotivi del personaggio, facendo attenzione a non renderlo eccessivamente complesso. È importante bilanciare un buon design con la praticità di articolazione in diverse pose.
• Moveset: Stabilisci le animazioni necessarie per il personaggio e determina quali parti saranno influenzate dall’uso dello scheletro.
• Bozza del Moveset: Testa il personaggio in varie pose per esplorare la sua fisicità, identificando le pose più espressive e accattivanti. Il design del personaggio deve riflettere il suo carattere e temperamento; per esempio, un sicario ninja si muoverà furtivamente, mentre un panda amichevole avrà una camminata buffa e impacciata. In collaborazione con il game design, adatta il movimento al moveset stabilito, evitando dispersioni di operatività e assicurandoti che il disegno del personaggio sia conforme alle esigenze di movimento del progetto.
• Tecnica di Animazione: Per un gioco a scorrimento orizzontale con visuale laterale del personaggio, usa l’animazione con ossa per movimenti base come camminare, saltare e correre, per ridurre il carico di lavoro e ottenere animazioni fluide. L’animazione frame-by-frame è utile per dettagli specifici o azioni complesse, come la rotazione del tronco o la testa, posizioni diverse del braccio o effetti speciali.
• Ease in, Ease out e Anticipation: Utilizza gli ease in e out per rendere l’animazione più fluida e naturale e le anticipation per enfatizzare azioni come colpi potenti, salti e rincorse.
• Dettagli ed Espressioni: L’animazione frame-by-frame è perfetta per dettagli come le espressioni facciali.

Fotogrammi sostituiti

In breve, usa la skeletal animation per la base e l’animazione frame-by-frame per i dettagli.

4. Ottimizzazione e post-produzione: due possibili strade

In base alle caratteristiche del progetto, possiamo scegliere di importare il personaggio sfruttando completamente l’animazione scheletrica importando nel nostro Engine il nostro progetto [Strada A] oppure utilizzando una sequenza di immagini in formato PNG [StradaB].
Ogni metodo ha i suoi vantaggi e svantaggi. Pertanto, queste fasi richiedono un certo grado di attenzione.

Strada A (uso esclusivo dell’animazione scheletrica)

Decido di utilizzare l’animazione scheletrica.
La tecnica mista scheletrica richiede l’uso delle Runtime per essere implementata nei vari motori di sviluppo io Uso Spine di Esoteric software linkerò qui la pagina dedicata.

Questa funzione è la più utilizzata perché è pratica e offre un alto livello di controllo sul progetto finale. Le parti del mio personaggio verranno esportate in un file JSON e in un PNG atlas, che poi verranno ricomposte nei motori di sviluppo. Pertanto, utilizzare questa tecnica può risultare molto più veloce e i test in gioco saranno più rapidi, anche in caso di eventuali correzioni.

Tuttavia, utilizzare la pixel art con questa tecnica potrebbe evidenziare alcuni difetti dovuti al movimento di elementi grafici senza anti-aliasing, come la perdita di alcuni pixel in certi punti dell’animazione.

Come possiamo risolvere questo problema?

Ecco alcuni accorgimenti:

• Evita sprite con contorni di 1 pixel.
• Evita il dithering di sfumatura nelle singole parti dello sprite.
• Limita le gradazioni di colore.
• Dividi attentamente le parti del personaggio da animare e riduci il dettaglio delle parti che si muovono di più.

Con questi accorgimenti, dovresti minimizzare gli inestetismi dovuti all’assenza di anti-aliasing. Se sei nuovo dell’argomento Pixel Art prova a guardare questo articolo

Strada B 

( Esporto in sequenza di immagini ed elimino tutte le imperfezioni a mano con photoshop ) 

Questa è certamente l’opzione più estrema che offre un controllo completo su ogni pixel, ma può risultare molto laboriosa se non ben pianificata fin dall’inizio; esaminiamola passo dopo passo.

Esportazione: Regola l’intervallo di frame per secondo dell’animazione; personalmente prediligo 24 fps, ma la scelta varia in base allo stile del gioco e potrebbe essere necessario un numero inferiore di fotogrammi se il progetto lo permette.
Organizzazione: Puoi optare per organizzare i file esportati in uno sprite sheet, una griglia di sprite, o come sequenza di livelli.
Modifica: Utilizza la timeline di Photoshop per creare un’animazione e rifinisci i fotogrammi per rimuovere imperfezioni.
Verifica: Controlla l’animazione a diverse velocità per assicurarti della qualità del lavoro.
Esportazione finale: Esporta l’animazione da Photoshop come sequenza di immagini.

Con questa tecnica, interverremo manualmente su ogni fotogramma; quindi, è consigliabile utilizzarla quando ci sono pochi fotogrammi da correggere e, soprattutto, quando si dispone di un design compatibile e ottimizzato per questo tipo di animazione.

Come menzionato, è fondamentale fare le scelte giuste, soprattutto nella fase di progettazione. L’impiego di questa tecnica in un progetto che necessita di fluidità di movimento e di un uso intensivo dei frames potrebbe rivelarsi controproducente, causando numerosi problemi di produzione. Di conseguenza, è vitale pianificare con cura e optare per la tecnica più efficiente e produttiva, che permetta di finalizzare il lavoro con il minimo di inconvenienti e ottimizzare i risultati.

5.Analisi e miglioramento 

1. Interazione e feedback:
   • Test: Prova le animazioni durante il processo. Ricevi feedback da colleghi o amici per migliorare ulteriormente.
   • Aggiustamenti: Fai piccoli aggiustamenti man mano che procedi. Non aver paura di modificare parti specifiche se necessario e fai frequenti e ordinati backup.
2. Strumenti e workflow efficienti:
   • Plugin e script: Esplora plugin o script che semplificano l’animazione frame-by-frame o migliorano la skeletal animation.
   • Organizzazione dei livelli e degli elementi grafici: Mantieni i livelli organizzati nel tuo software di animazione. Etichetta chiaramente i livelli per facilitare la gestione.

3. Apprendimento continuo:
   • Tutorial e risorse: Studia tutorial online o seguire corsi specifici per migliorare le tue abilità sia nella skeletal animation che nell’animazione frame-by-frame.
   • Esperimenti: Sperimenta con nuove tecniche e stili. A volte, le soluzioni creative emergono dall’esplorazione.

la mia esperienza suggerisce che l’animazione scheletrica può essere un metodo efficace per raggiungere risultati di alta qualità anche nella pixel art, a condizione che si seguano determinati criteri di sostenibilità del progetto.

Consiglio vivamente quindi di utilizzare l’animazione scheletrica insieme ai motori di sviluppo, mantenendo però una certa flessibilità e cercando continuamente nuove soluzioni per creare un prodotto finale di successo, piacevole alla vista e che sia compatibile con gli strumenti a disposizione e, soprattutto, con i processi produttivi del team di appartenenza.

Per concludere, ecco alcuni software utilizzati nell’industria videoludica che potrebbero essere interessanti da approfondire.

1. Spine: Questo software è specificamente dedicato all’animazione scheletrale 2D. Spine offre un workflow efficiente per creare animazioni e integrarle nei giochi. Supporta numerosi toolkit e linguaggi di programmazione come Unity, C#, cocos2d-x, iOS, Android, C++, HTML5, JS e molti altri¹.
2. DragonBones Pro: Un altro strumento popolare per l’animazione scheletrale 2D. È gratuito e offre funzionalità come la deformazione delle mesh. Tuttavia, è importante notare che lo sviluppo di DragonBones Pro è stato interrotto².
3. Spriter: Questo software offre sia una versione gratuita che una a pagamento. È noto per la sua interfaccia semplificata e il workflow senza fronzoli, permettendo di creare animazioni in modo rapido e semplice².
4. Anima2D: Un plugin gratuito per Unity che consente di creare animazioni scheletrali 2D direttamente all’interno dell’editor di Unity².
5. Unity 3D: Unity offre anche strumenti integrati per l’animazione scheletrale 2D, rendendolo una scelta popolare per gli sviluppatori che già utilizzano questo motore di gioco².

Questi strumenti variano in termini di funzionalità, prezzo e supporto, quindi la scelta dipenderà dalle tue esigenze specifiche e dal tuo budget.

Se sei arrivato fino a qui, significa che il mio approccio all’animazione per videogiochi in pixel art ti ha incuriosito. Spero che tu possa trarne ispirazione e arricchire questo metodo con la tua esperienza personale ma ricorda, questo è un metodo che ho elaborato nel corso del tempo adattandolo alle mie esigenze specifiche; saranno le tue esperienze a plasmare la tua visione unica e il tuo stile di lavoro nel creare opere straordinarie.

Grazie di cuore per aver dedicato tempo alla lettura.