Pixel Art - Lezione 7 [Animazione battler]

[Zuppo]

http://oi39.tinypic.com/33nhkpy.jpg



Lezione 7 Animare un Battler 2

30/01/2014 03.28
Flame

MSN:###@###.##
_____________________________________________________________


In questa lezione impareremo come arrangiarci nel creare un nemico tutto nostro disegnato da zero ed animato, anche se non si è animatori innati.

_____________________________________________________________



Per questa lezione utilizzeremo come base, un nemico rtp. Utilizzate sempre come base una grafica che non vi porti fuori strada, per esempio usando erroneamente delle rtp del programma sbagliato.
Oppure, in caso vogliamo utilizzare immagini di provenienza diversa dalle rtp, assicuriamoci di ingrandirle o rimpicciolirle delle dimensioni adatte, così da non creare un nemico più grande del dovuto o scioccamente piccolo.
Proporsioni. Sempre e comunque!

In questo caso io ho preso un rtp del 2003, almeno spero, in quanto in realtà ho preso la prima cosa che mi è capitata sottomano! (Non fatelo MAI!! XD)

Creeremo dei frames di attacco (4 o 5). In questa lezione non approfondiremo la colorazione e la rifinitura, in quanto quello è materia di lezioni precedenti (e non mi va..) e vi invito a consultarle, una volta finito qui.



Creazione di un Battler

Prendiamo il nostro bel nemico rtp.
http://img198.imageshack.us/img198/6344/34649265.png
Io ho scelto un quadrupede in quanto ho in mente di fare una belva di un qualche tipo.

Ora andiamo a togliere il superfluo da questa bestiola per tenere solo le linee essenziali.
http://img9.imageshack.us/img9/7451/96554084.png http://img854.imageshack.us/img854/1171/88582022.png

E vualà! Ecco il nostro bel Lineart sul quale baseremo il nostro nemico. Dato che nessuno nasce imparato, sfrutteremo tutte le parti utili di questo Disegno per ottenere il nostro bestiolino. Avendo già in mente di voler fare una specie di statua dalle fattezze ibride, ho ridisegnato sopra a questo cavallo la mia idea, con un colore ben distinguibile.

http://img571.imageshack.us/img571/2994/77331251.png

Diamo una pulitina al tutto.
http://img211.imageshack.us/img211/2114/78555673.png

Come notate, ho brutalmente ricalcato tutte le zampe e quasi la coda per semplificarmi la vita.
Ma zio Flame! Io non so disegnare!!
Avete ragione, questa lezione è rivolta a chi non si destreggia bene nel disegno. Ebbene, seppure nel mio caso non ho cercato immagini di riferimento per la testa, nulla vi vieta di creare un Collage di immagini da ricalcare proprio come ho fatto con il cavallo e poi comporre il puzzle.
Esempio: il cavallo con una testa da leone, sempre rtp o sprite e magari delle ali di drago.
http://imagizer.imageshack.us/v2/800x600q90/838/c6bn.png
http://imagizer.imageshack.us/v2/800x600q90/853/g7sx.png
Aiutarsi con dei riferimenti non è un reato e nell'ambiente amatoriale, persino ricalcare risulta istruttivo. Questo qui è il nostro cavallo con appiccicato una testa di leone preso da un disegno in internet e la coda di un drago in pixel art...XD
Ma torniamo alla nostra cavia da lezione.


Studio dell'Animazione

Ora che abbiamo il primo frame, stortignaccolo, abbozzato, passiamo a Progettare l'animazione. Questa fase è molto importante.
Prendendo un foglio, una matita, o lavorando direttamente sul computer, dobbiamo immaginare ed abbozzare come vogliamo che questa creatura di muova. Nel mio caso, voglio farla impennare e farle dare un morso, dato che ho mantenuto le zampe da cavallo (grossomodo).
Dopo aver guardato delle immagini e dei video di cavalli che impennano, mi sono fatto un'idea di come lo voglio animare.
Ed ecco lo studio.

http://img7.imageshack.us/img7/5093/98224270.pnghttp://img23.imageshack.us/img23/494/46907090.png

Beh? Che state a fà? State a ride? Aho, questa è roba seria sa!! Io da quelli sgorbi ce tiro fori tutto!
E senza di essi, sarebbe un gran casino...!

Decisi i momenti chiave dell'animazione (Fermo- Massima impennata) possiamo passare a Creare effettivamente l'animazione. MA noi non siamo capaci ne a disegnare benissimo, ne ad animare ad occhi chiusi. Il massimo che sappiamo fare è disegnare sgorbi...come si fa allora?
Repetita iuvant. Si ripete lo stesso trucco di prima, si cerca un'immagine di riferimento che faccia il più possibile al caso nostro.
In questo caso ci serve soprattutto l'immagine di qualcosa di impennato. Un cavallo rampante e di profilo.
In realtà se trovassimo un video, staremmo a "cavallo", come si suol dire, perchè potremmo rubarne i frames spudoratamente... Ma nel mio esempio userò delle immagini statiche per aiutare chi proprio non riesce a trovare nemmeno un video di riferimento.
OVVIAMENTE ricalcare i singoli frames di un video è MILLE volte meglio di lavorare con immagini statiche, dato che durante l'animazione si può perdere il controllo delle proporsioni, ma anche per quello ci sono dei metodi che vi dirò dopo.

Con il magico aiuto di google, si comincia a navigare fino a trovare quel che ci serve, o quantomeno al meglio possibile. Nel mio caso, senza perderci un pomeriggio per questioni di tempo, ho ripiegato su questa immagine:
http://img713.imageshack.us/img713/8828/modan1cavallorampante.jpg

Beh, a me sembra proprio un cavallo rampante, abbastanza di profilo. Non è uno sprite? E chissenefrega! Ce lo facciamo diventare noi. Si rimpicciolisce quanto serve e si ricalcano i bordi proprio come abbiamo fatto con il primo sprites..ed eccolo in paragone al nostro amico nemico, che da ora chiameremo Grugno.

http://img547.imageshack.us/img547/4179/79856564.png
Grugno e cavallo rampante stan facendo amicizia. Grugno, a colpo d'occhio si vede che è un po' più grosso, e qui dovremo essere noi a sistemarlo.


http://img11.imageshack.us/img11/7118/87248816.png
Inanzitutto, senza scrupoli, decapitiamo Grugno e portiamo la testa più o meno dove sta quella del cavallo rampante. E da lì andremo a ridisegnare tutto il resto.
Spostiamo la testa (usare il lineart ci risulterà più facile da gestire)

http://img829.imageshack.us/img829/9413/43249684.png
Ricalchiamo quel che serve e controlliamo se qualcosa non ci convince molto.

http://img10.imageshack.us/img10/1493/42263543.png
In questo caso le zampe anteriori, a colpo d'occhio, sembrano troppo lunghe, mentre quelle posteriori persino troppo corte.
Siamo ancora in fare Bozza, perciò non preoccupiamoci di modificare le cose anche selezionando e spostando i pezzi.

http://img577.imageshack.us/img577/4559/20660212.png

http://img843.imageshack.us/img843/8109/27062367.png
E rifiniamo.
Ora abbiamo il nostro secondo Frames. Come vedete, tra il primo ed il secondo c'è molta distanza in termini di movimento, eppure fare prima i momenti cardine della nostra animazione vi aiuterà. Fare le cose frame per frame spesso porta a perdersi strada facendo, finendo con l'avere una testa grande sei volte tanto di quella dalla quale avevamo cominciato. Una cosa ODIOSA.
Infatti è meglio fare prima i frames importanti. C'è sempre tempo per fare i frame "intermedi" a lavoro concluso.

Ed ora passiamo all'ultimo frame importante di questa lezione. Tornare a terra (o anche staccarsi da terra. Essendo un'animazione molto povera, non ho creato una posizione diversa tra quando torna a terra o quando si eleva, l'ho mantenuta identica per risparmiare frames.)

Per questo frame NON useremo immagini di riferimento. Inanzitutto è piuttosto difficile riuscire a trovare delle immagini di animali metà su metà giù (ovviamente qualsiasi video e documentario farà al caso vostro) ma voglio invece insegnarvi ciò che vi sarà utile per i frames intermedi. Ossia immaginare di dividere a metà il movimento della nostra bestia.

Inanzitutto sovrapponiamo lo studio dei due frame importanti.
http://img33.imageshack.us/img33/4294/bothv.png
Molto bene. Grugno e Grugna li conosciamo e sono i nostri due frames principi, ma lì in mezzo c'è qualcuno. Il terzo incomodo!
Beh, avrà la testa a metà tra le due posizioni, e le zampe non saranno del tutto dritte ne del tutto alzate, e comincerà a piegare le posteriori per sollevarsi. E la linea della schiena sarà una diagonale a metà tra le due.

http://img812.imageshack.us/img812/8013/36079178.png
Una cosa di questo tipo. ne del tutto in piedi, ne del tutto a terra. Visto così sembra non avere equilibrio ma immaginiamo che si è appena dato una spinta, può godersi i suoi istanti di movimento inersiale ed al diavolo la gravità! Cerchiamo di restare sempre concentrati su quel che stiamo facendo e non ci ritroveremo a fare congetture inutili come quella appena sopra! Lol..
Hemm, comunque tutto sta nell'immaginare la figura esattamente a metà tra le due. Anche disegnare le singole linee (linea della schiena) (testa) sarà un inizio. Quando sentiamo di non avere in mente in che posizione dovrebbe stare nel movimento di mezzo, allora dobbiamo andarci a guardare il movimento di qualche animale simile al nostro o rischiamo di creare..strane cose.

8D...
http://imagizer.imageshack.us/v2/800x600q90/42/ocyi.png

Rifiniamo il tutto (cercate di copiare dove sono gli elementi tenendovi vicino, o persino in un livello sotto, le immagini già concluse)
http://img21.imageshack.us/img21/350/64413082.png
Ed abbiamo il terzo frame chiave. Con questo possiamo tenere a terra il nostro nemico, farlo staccare da terra e farlo impennare. BENE!
Siamo ad un ottimo punto della bozza. (Si. Animare richiede TEMPO. Vi sorprenderà il fatto che è più il tempo che richiede, che l'effettiva abilità artistica, in quanto in realtà si tratta di organizzare le cose in maniera tecnica in modo da poter sempre mantenere le giuste proporsioni. Poco estro, tanta disciplina e pazienza.)

 

 

Completare l'Animazione

 

La nostra animazione si muove. Si alza e si abbassa, ma per ora non ha ancora uno scopo. Sarà il caso di fargli fare qualcosa con quella bella bocca dentata che si ritrova!
Facciamo qualche modifica al volto per potergli dare la facoltà di Mordere.
http://img705.imageshack.us/img705/9822/77444820.pnghttp://img199.imageshack.us/img199/3460/59579389.png
In realtà non c'è molto di più da dire. Se vedete che non riuscite a farlo da voi, anche qui, documentatevi e non fatevi problemi a guardare/rubare da altre immagini.
Un esempio di morso potrebbe essere questo che ho isolato da una leonessa.
http://imagizer.imageshack.us/v2/800x600q90/823/go9m.png



E così, eccoci allo scheletro dell'animazione.
http://img196.imageshack.us/img196/5108/primaprovaf.gif

Il nostro Grugno è solo agli inizi, ma nonostante abbia solo 3 immagini, già da una buona idea di cosa dovrebbe fare. Non così buona però, il che significa che manca ancora qualche frame fondamentale. Tuttavia per questioni di tempo, non ho modo di farvi un esempio più fluido con grugno, quindi cercherò di usare al meglio quel che ho. Per fargli dare un morso mi servirebbe che, nell'atterraggio, sia resa ben evidente la mossa di Mordere e questo mi richiederebbe qualche frame, dato che non posso farla troppo rapida o non si vedrebbe. Tuttavia io non ho il tempo di fare qualche frame, perciò cambierò l'idea di attacco.
Ho scelto di variare l'animazione per non dovermi complicare la vita con altre immagini, perciò invece Grugno ora spara raggi laser dalla bocca, in pieno stile anni settanta.
L'animazione del laser è composta da sei frames, nel quale Grugno resta immobile ed il raggio si genera. Non essendo un fuoco o altre cose che nascono "lentamente", non ho creato una progressione uniforme del raggio.

http://imagizer.imageshack.us/v2/800x600q90/834/vol0.png http://imagizer.imageshack.us/v2/800x600q90/855/9j7t.png http://imagizer.imageshack.us/v2/800x600q90/839/41i8.png

 

http://imagizer.imageshack.us/v2/800x600q90/850/n9x2.png http://imagizer.imageshack.us/v2/800x600q90/35/anot.png http://imagizer.imageshack.us/v2/800x600q90/829/lcsf.png
Per dare l'impressione che esso è istantaneo, ho creato la linea e l'ho fatta Allargare. Nel caso di una fiamma invece, avrei dovuto creare il fuoco che progressivamente usciva dalla bocca.
Questo è il risultato finale.

http://imageshack.com/a/img62/2935/u4x.gif

In questa lezione abbiamo creato una Bozza funzionale della nostra animazione. Si alza, spara e torna giù. Essa non presenta una colorazione definitiva e non ha nessuna di quelle accortezze che possono trasformare questa bozza in qualcosa di più.
Ecco un elenco di accortezze che si possono adottare per questo genere di animazioni:

1 - ovviamente creare un numero maggiore di Frames. La logica dei frames è che Più è lento il movimento, maggiori sono i frames necessari. Più è rapido e scattante il movimento, minori sono i frame obbligaotori. Esagerare con il numero di frames in un movimento che dovrebbe essere rapido, creerebbe quell'effetto "mucillaginoso" che avevano i vecchi film di animazione che mantenevano un numero frames sempre uguale, non adattandolo alla situazione.

2 - Quando si spara un raggio o si deve esprimere potenza, questa potenza deve essere sentita anche dal nostro soggetto. In questo caso dunque, alla partenza del raggio dovrebbe corrispondere un inarcarsi del capo, spinto dal rinculo del colpo. Un effetto che può essere reso anche solo spostando pixel per pixel la zona della testa e delle spalle, seguendo la regola immediatamente sotto.

 

3 - Il numero minimo di un'animazione è TRE. Non due, non uno. Ma TRE. Per qualche ragione è così, quindi se volessi far piegare il capo per il colpo, dovrei creare almeno tre frames tra movimento delle spalle e del collo. Per questioni di tempo ho dovuto rinunciare alla dimostrazione.

4 - Quando il nostro battler è fermo, è sempre meglio fargli muovere qualcosa. Il classico "respiro" è molto più difficile di quello che si pensa e se non riuscite a farlo respirare con naturalezza, allora omettetelo e piuttosto agitate la coda o fategli battere uno zoccolo a terra. L'assenza di respiro non sarà notata particolarmente.

5 - Non sottovalutate il movimento che dovete fare. Quando si devono fare mosse complicate viene naturale dire "non lo so fare, fammi guardare qualche video", mentre invece la pigrizia ci spinge a non documentarci per i movimenti più "banali" o all'apparenza piccoli. NON FATE QUESTO ERRORE. Sempre documentarsi prima, perchè il più delle volte si finisce con il creare un movimento incomprensibile e dunque si getta vita tanto tempo.

6 - E non fatevi fregare...i movimenti piccoli sono i più difficili perchè richiedono più frames, e li richiedono più Esatti (non c'è molto margine di errore insomma).



Avrei voluto completare il battler e persino donarlo colorato, tuttavia questa lezione è interrotta da un anno e mezzo ed ho deciso che, piuttosto che lasciarla a marcire ancora, la posto non completa.
La parte sull'animazione è completa, in realtà, perchè da lì in poi è tutto un Repetita Juvant. Aggiungi il frame intermedio, documentati, aggiungi il frame, etc.
Piccolo rammarico invece sul non aver mostrato come particolareggiare l'animazione con i consigli scritti nel punto due.



Spero che vi sia comunque utile e ci risentiamo non so tra quanti anni con chissà che altra lezione!

 

Ah, ovviamente come sapete il campus è chiuso, quindi questa non è una vera e propria lezione con alunni e chissà che altro ma dato che era una lezione quella che volevo fare, l'ho postata qui.

Alla fine il Campus si è trasformato in una zona "tutorial pubblici", perciò non c'è danno ad aggiungerne uno in più.

Alla prossima!

[Soul Eater]

Il modo in cui imposti le tue spiegazioni è sempre divertenteXD

Ottima lezione, davvero esaustiva

Prendere spunto da altre immagini o animazioni è sempre un ottimo aiuto, così come importantissima è la lineart generale.

Rimane comunque un lavoro molto complesso, soprattutto per chi ha basi scarse o poca predisposizione, e ancora più complesso se bisogna lavorare con visuali diverse dalla semplice laterale o frontale.

[Zuppo]

Vero, infatti in questo caso posso spiegareil Battler, ossia una figura tutto sommato statica e di profilo il più delle volte. Per un battler, ci si può arrangiare e ci si avvicina al mondo dell'animazione per piccoli passi.

 

Passare da questo al creare un video o un cartone animato, è decisamente lunga come strada e lì non si può fare un Collage di figure e sperare di cavarsela. Però nel caso del battler ci si può arrangiare compensando con la pazienza e l'ingegno, la poca manualità.

 

e...

beh... per il modo simpatico di pormi, diciamo che se tentassi di fare il Professionale non mi prenderei sul serio io per primo...XDD

[Zuppo]

sto lavorando ad un'animazione e.. penso che posterò lo studio di come l'ho fatta, una volta finito.

Intanto vi do un'anteprima del "Work in progress"

 

http://imageshack.com/a/img827/6206/4me1.gif

 

quando avrò finito proverò a farci una lezioncina :3

[Guardian of Irael]

Fa impressione come tipo di Chimera! XD

 

Bello il muso e bell'animazione del corpo! ^ ^

La coda mi scatta un pochino, come se non fosse morbida, forse ci vuole un tempo diverso rispetto al corpo in frames.

^ ^

[Zuppo]

ti riferisci al work in progress vero? Si, in effetti sulla coda (che trovavo molto molto complicata da gestire) sono andato a risparmio, limitandomi a fargli seguire il movimento del corpo ma senza fargli fare, come mi sarebbe piaciuto, particolari ondeggi. Una volta colorata voglio rifinire pezzo per pezzo il tutto, dato che è una grafica che voglio proporre ad un giochino e vorrei dargliela già utilizzabile appieno.

 

ma dato che in termini di Movimento code piumate sono un po' ignorante, sto delegando la cosa come ultimo ritocco alla vecchia maniera. ossia Guarda il frame prima, guarda il frame dopo, muovi due pixel, riguarda il frame prima, riguarda il frame dopo... insomma, lì dove non arriva la tecnica arriva la testardagine. XD Ma questo non posso insegnarlo e non mi permetto di farlo, perchè sarebbe consigliabile, invece, che mi andassi a Studiare (come ho fatto per il resto del corpo) il movimento di una coda.

...ma già so che una coda si muove TANTO e non mi va di farlo. XDD

 

Comunque rifinirò il tutto e vi farò vedere la versione completa con annessa spiegazione di come l'ho fatto. In quella micro lezione comunque, l'abilità del disegno mi è stata fondamentale, tuttavia solo perchè mi son voluto creare IO il "video" da cui trarre l'animazione. (Ho disegnato in flash la fiera che cammina e poi ho ridotto il tutto.)

Tuttavia è un lavoro che si può fare anche con un video non disegnato da noi, tipo rubare un bel pezzo di animazione del re leone (perchè no) o di Kimba (che c'è un film nuovo di zecca.)

E dato che stavolta lo coloro, posso mostrare qualcosa di più.

[Guardian of Irael]

Anche perché code leonine piumate son difficili da trovare come animazioni XD

 

...ma già so che una coda si muove TANTO e non mi va di farlo. XDD

>

Bene allora poi facci una nuova minilezioncina e magari qualche spoiler sul giochino che vedrà tale grafica E:D

^ ^

[Zuppo]

il giochino è starbound e c'è una sezioncina dove farsi bell.. hemm, postare consigli o proposte. Tutto qui, volevo proporre una creatura. Spesso tra un lavoro serio ed un altro mi piace svagarmi con Altro lavoro, però che è privo di lucro. Mi ricarica un po' di sano lavoro gratuito ed immotivato. XDD

[Soul Eater]

A parte la coda, il resto del corpo si muove in modo fluido e piacevole, stai facendo un ottimo lavoro, voglio il tutorial!

[Guardian of Irael]

Ah Starbound, capito sia il gioco che la questione delle richieste mostri, ne parlavamo in un gruppo di un forum di un altro gioco ^ ^

Beh bel mostriciattolo da inserire sarebbe :D

^ ^

[Zuppo]

Versione finita!

ma ora non ho tempo per farci una lezione e probabilmente la farò su un altro topic..misà. Sarà lunghetta pure questa... XD

 

http://imageshack.com/a/img716/3554/ir5d.gif

[Guardian of Irael]

Ah ecco il corpo era nudo! Credevo fosse bozza XD

Fa il suo effetto tutta colorata :3

^ ^

[Zuppo]

nudo come è nudo un leone, guardian. XD

[Guardian of Irael]

Ho capito! XD E' solo che vedendo la prova precedente che non aveva ancora la pelle definita credevo volessi piumeggiare tutto il corpo! XD

[Testament]

Veramente fluido, bravò

[Makeratore]

Molto bella quell'animazione! Mi sto cimentando anche io a fare qualche disegnino, ma non sono portato...

[Zuppo]

Beh, nel tutorial al primo post in realtà ho creato delle spiegazioni che tolgono un po' di fatica nel disegno, basandosi su altre grafiche e spudoratamente copiandole a pezzi. E' un inizio per imparare.

[Makeratore]

Si, infatti sto leggendo il tutorial.

[Engeldod]

I dettagli!! +1

Mi piace il movimento delle zampe, come diventano da orizzontali a verticali, spece le zampe posteriori, la coda invece? xD

[Zuppo]

orizzontali verticali..? NOn..ho colto o.o'

 

e la coda l'ho bannata...XDDD Perdonatemi ma non me la sentivo di studiare il movimento dele code, ne avevo abbastanza di quell'animazione. XD

 

 

Ora sono "indaffarato" a Roma, quando torno mantengo la promessa di farci una lezione su come l'ho fatta.

[Engeldod]

orizzontali verticali..? NOn..ho colto o.o'

 

Scusa il ritardo XD

Hai ragione, non mi sono espresso bene, le zampe, "piedi" (?) é.è

A terra sono orizzontali, quando fanno il passo, si sollevano da terra diventando verticali, mi piace molto quel movimento.

[Zuppo]

Ah, la sensazione della falcata? Ossia la zampa che...si, si ho capito. E' vero, è quello che rende più palpabile il senso del terreno, come le zampone dei cani.

Mh, in teoria dovevo farci una lezione su. L'avevo dimenticato, son successe un po' di cose nel mentre.

 

Comunque ho tutti i file. Chissà mai che non ne farò una in effetti.

Ah, grazie dell'interesse :3