Lezioni di Pixel Art

[Zuppo]

LEZIONI DI PIXEL ART

Ereditate dall'ormai fu Campus di Rpg2s

Prefazione

All'apertura del forum Rpg2s, community nata fondendo due opposte community di making, la più importante iniziativa che ha caratterizzato il forum fù il Campus. Ovvero un luogo dove uno staff di ragazzi che avevano qualche esperienza da condividere, la mettevano a disposizione sotto forma di Scuola, con delle vere e proprie lezioni. Questa pratica andò via via scemando per assenza da ambo le parti (insegnanti e alunni), lasciando dietro se vari scrigni di "saggezza" che fino ad oggi abbiamo lasciato disponibili tra le prime sezioni del forum.
Ora, per maggiore ordine e per togliere un antico artefatto dal forum, rinnovandolo, abbiamo riproposto le stesse lezioni sottoforma di "tutorial". :3
Questo topic racchiude tutte le lezioni sulla pixel art.

 

Purtoppo il cambio politica di Imageshack ha rimosso gran parte delle immagini e molte lezioni sono inutilizzabili. Qui riportiamo quelle poche che si son salvate, sperando di reintegrare a mano quelle mancanti con delle nuove "lezioni". A volte riporto anche lezioni con qualche immagine in meno, lì dove non mina particolarmente il senso della lezione. (e metti caso che un giorno imageshack ce le renda...)

 

 

 

 

 

 

 

 

-----------------------------------------------------

Lezione 3 metodologia alternativa

12/06/2007 11:53
Baldo Ssj2

MSN:wer.jin chiocciola tiscali.it
_____________________________________________________________


Con questa lezione affrontiamo un metodo diverso dal solito per creare chara da utilizzare con il nostro XP. In pratica prima disegneremo il nostro soggetto su carta per poi pixellarlo.

_____________________________________________________________


Passo 1



Per motivi di praticità ho scelto di copiare un chara di RO, in modo da avere un’adeguata anatomia e semplificare il lavoro.


Passo 2



Stampiamolo e procediamo a disegnare il nostro soggetto seguendone i tratti o altrimenti copiatelo dal monitor fate voi… è una questione soggettiva, l’importante che sia realizzato in un ambito esterno al pixellaggio.

(in questo caso l’ho disegnato a mano per poi trasferirlo in digitale)


Passo 3

Dopo averlo scalato nella dimensione più congeniale e aver ripulito l’immagine, possiamo iniziare a pixellare il nostro soggetto senza avere troppo cura nei dettagli e nell’esecuzione: l’essenziale che rispetti il disegno.

(come vedete ho iniziato a ripassare i contorni dell’armatura; ho inserito la testa di un mio vecchio chara per avere un’idea base di fondo e per sagomare il copricollo)


Passo 4



Pian piano sta prendendo forma. Vi consiglio se avete un lavoro complesso (ma anche no), di separare il lavoro in varie parti, sia per semplicità, sia per evitare di rifare parti sbagliate… meglio prevenire che curare.

Ho creato a parte il braccio sinistro, l’aureola, la spada, il mantello e i vari accessori che vedremo dopo.


Passo 5



Ecco pronto in tutte le sue parti. Ho inserito quello che mancava e aggiustato qualche particolare come le mani, prese direttamente dal chara di RO. I colori base sono già stati adottati come avete già visto, ma non è ancora stato rifinito: lo farò durante la colorazione in modo da adattare al meglio le varie sfumature ed evitare problemi


Passo 6



Iniziamo decidendo i colori da adottare e creiamoci una palette da avere sempre sotto mano; non è detto che durante il lavoro non dobbiamo avere bisogno di altre graduazioni di colore… a volte qualche sfumatura in più vi salverà le chiappe, l’importante che non si noti. Coloriamo un braccio per studiare la colorazione più adeguata: volevo copiare la colorazione da un altro chara ma per svariati motivi ho deciso di farla da 0 seguendo lo schema sottostante



Una sorta di macchia creata a casaccio con un forte contrasto… l’armatura doveva splendere!!!


Passo 7



Ora che abbiamo deciso togliamo i neri dai bordi utilizzando i colori della palette e continuamo colorando altre zone: in questo modo avremo l’idea di come colorare successivamente l’intero chara.

Graduazione scura + intensa luce per il riflesso



Da qui si andrà avanti colorare l’intero chara (il suggerimento di separare il lavoro è sempre valido)


Passo 8



Ecco finita l’armatura colorata seguendo lo schema prefissato. Ora procediamo coi dettagli


Passo 9



Coloriamo con lo stesso procedimento l’aureola, lo scudo, il mantello bianco, la spada (disegnata con il chara) e i vari accessori. Qua è soggettiva la questione e potete sbizzarrirvi (ho messo addirittura una statua incastonata nello scudo) ma ricordate:

- Graduazione scura + intensa luce per il riflesso -

Lo schema di colorazione deve sempre e ripeto sempre seguito altrimenti avrete un lavoro incongruente, percui se adottate materiale preso da altri lavori dovete averne la cura di adattarli.


Passo 10



Vi presento il chara ricomposto di tutte le sue parti e arricchito di dettagli come croci, chiodi e araldiche
Concluderò il tutto inserendo il mantello colorato nella stessa maniera del drappo.


Passo 11



Eccolo finito, il mantello è stato creato a metà per poi essere specchiato e inserito dientro al soggetto


esempio per creare un mantello: basta copiare da un'immagine tipo questa, come vedete basta rispecchiare le zone di luce e le zone d'ombra per creare l'effetto tessuto

Conclusione

Abbiamo visto che per creare un sogetto da 0 non servono grandi abilità nel pixellaggio, basta carta e penna per creare quello che volete, dai personaggi agli sfondi... semplice ed efficace

Questo metodo è adatto anche per la riproduzione di immagini in pixel art

Concluso X)

[Zuppo]

-----------------------------------------------------
Lezione 5 movimenti del corpo lvl1

 

05/11/2007 23:06
Flame
_____________________________________________________________

In questa lezione impareremo il modo più semplice e veloce per dare carattere nei movimenti ai nostri personaggi: le espressioni del corpo
_____________________________________________________________


Per questa lezione utilizzeremo ancora il classico RTP dell'XP




Le Basi

Prendendo il chara base del nostro progetto, possiamo decidere di fargli compiere qualche piccolo movimento, in modo da dare molto più carattere al personaggio. Per questa lezione eviteremo movimenti che ci costringano a ridisegnare il chara da zero, e sfrutteremo la sovrapposizioni di vari pezzi del chara per velocizzarci il lavoro.
Forse non tutti sanno che un procedimento del genere lo si può ottenere anche con il semplice e basilare Paint, che tutti (o quasi) hanno. Infatti il paint ha un'opzione, a sinistra sull'elenco strumenti, che quando noi selezioniamo una parte di immagine ci permette di scegliere se far si che lo sfondo risulti trasparente o meno.

 

 

  Reveal hidden contents

 

Impostare sfondo trasparente su Paint

 

Useremo questa funzione semplicissima, per prendere la testa del nostro chara ed incassarla di più nelle spalle, che enfatizzerà il movimento delle spalle e darà l'impressione che il nostro personaggio pieghi leggermente la schiena, o il collo.


_______________

Separiamo testa e braccia così da poterle spostare dove vogliamo (tenetevi i pezzi grafici da una parte, per comodità, e fate le prove su una copia).

Ok. Ora dobbiamo decidere come si muove il nostro chara. Non servono chissà quante immagini per dare l'idea di un movimento, a noi basteranno 3 frames.
Il primo passo è disegnare grossolanamente ed in maniera molto evidente, dove secondo voi andrebbero le parti di corpo animate. Nell'esempio, eccovi uno studio alla più o meno, di come si muovono le gambe e le braccia in un gesto di sfida. Notare che la testa incassata, nella seconda immagine torna normale.

_____

Ora abbiamo "studiato" come si muove il chara. (Nel caso non avete idea di come rendere un movimento, la cosa migliore è guardarsi allo specchio. Non cè nulla di più vero di un vostro movimento.)
Il passo successivo sarà colorarlo. Beh, ma noi non siamo troppo precisini e prenderemo ciò che è riciclabile, direttamente dal chara iniziale, come ad esempio le manine. Si ritaglia, si reincolla, e lo spazio bianco che avanza lo si colora a mano, seguendo a grandi linee il disegno originale e rispettando la logica della luce e delle ombre. Più è piccolo il chara e più è facile colorarlo, dato che su 3 pixel disponibili, è assai difficile confondersi.

 

(immagini mancanti che mostravano quanto detto sopra. Basatevi molto sul chara originale, dovrete solo emularlo spostando alcuni pezzi e tappando i buchi di pixel.)
_____



Ok. Montiamo il tutto su un chara, mettiamolo su rpgmaker e creiamo un nuovo evento. Programmiamo un movimento dove facciamo cambiare la grafica ad un oggetto a piacere, e tramite il "muovi evento", possiamo costruire l'animazione selezionando di volta in volta la prossima immagine del chara, impostando un tempo a nostra scelta tra i frames.
Tutto questo per verificare sul campo se l'animazione funziona..

OPPURE

Vi prendete un qualsiasi programma per montare le gif, la montate e fate prima..XD come ho fatto io.

 

BENE! La nostra animazione è completa!
Giusto?


NO XD, perchè possiamo dare ancora più carattere a questo omino al quale piace muovere le braccine. Sfruttando la nostra fantasia, possiamo modificargli le espressioni del viso, cambiando totalmente lo scopo dell'animazione.

Combattivo


PS: Un consiglio. Per evidenziare che il personaggio cambia espressione, fate chiudere gli occhi al chara facendoli poi riaprire con l'espressione cambiata. Questo trucco rende molto più chiaro il movimento e viene usato anche negli anime, se ci fate attenzione :P


Sorpreso






Conclusione

Spero che vi sia piaciuta la mia prima lezione, spero vi sia piaciuta MOLTO, perchè da quì a mesi non me rivedrete farne un'altra dato le lezioni che me danno a scuola se non produco XD
See ya NOOBS XD

[Zuppo]

-----------------------------------------------------
Lezione 6 - Animare un Battler 1



13/01/2008 22:43
Flame
_____________________________________________________________

In questa lezione impareremo un metodo ordinato per creare l'animazione intera di un battler, muovendone completamente il corpo ed i vestiti.
_____________________________________________________________


Per questa lezione utilizzeremo un omino creato da zero, dato che in genere i batter non hanno uno standard di grandezza, variano da gioco a gioco.


La bozza iniziale

Come si comincia un'animazione? Inanzitutto bisogna decidere cosa si vuole fare. E' sconsigliato partire già a creare una bozza senza avere almeno una vaga idea se si farà un cavaliere che alza di peso una spada o se la porta al fianco, questo perchè potreste ritrovarvi a cambiare idea durante la stesura dell'animazione ed a modificare gli ultimi frames convinti che vada bene, per poi montare il tutto e notare come in effetti l'animazione manchi di logica. Che qualcosa stona.
Vi dico questo perchè è esattamente ciò che è accaduto a me in questa lezione...XDDDD
Son partito con un idea, son finito con un'altra ed il risultato finale è stato che vi era un frames totalmente stonato, che poi ho eliminato perchè non mi andava di ricominciare daccapo dopo 5 ore di paint. XD

Poi vi farò vedere l'errore.

Ora cominciamo a parlare di cose più concrete. Prendete la vostra bella matita, o del paint o del photoshop o reale, fate voi.
Disegnate molto approssimativamente come pensate debba muoversi quest'animazione. Vi sconsiglio di fare dettagli anatomici o cose simili. Quello che dovete studiare ora è il puro movimento e se vi perdete nei dettagli, perderete anche la dinamicità del gesto. Poche linee, gettate rapidamente, spontanee, ripassate lì dove non vi convincono. Uscirà fuori uno scarabocchio, ma dovete capirvi voi in fondo. Chi preferisce prima crearsi l'idea su carta, che spesso è meglio per chi sa disegnare ma viene mutilato dal mouse, dopo dovrà comunque riportarsi la bozza sul pc. Scelga lui il metodo migliore, se scannerizzare, rimpicciolire, ripassare, oppure osservare e ricopiare.



Il riquadro fatelo solo dopo aver disegnato, perchè potrebbe condizionarvi nel movimento, se per caso lo fate troppo piccolo e l'animazione non vi entra bene, condizionandovi a ristringere i movimenti forzatamente. Createlo solo dopo ed avete risolto ogni problema.

Già, facile fare una bozza. Ma aspettate, cè un piccolo difetto di fondo. Come si fa a fare la bozza di un'animazione senza avere ogni volta sotto, il disegno precedente? Beh per chi è già esperto nel campo può anche azzardarsi a disegnare la bozza senza preoccuparsi di mettere il disegno precedente sotto al foglio, in modo da avere una guida. Ma chi è alle prime armi, o chi vuole fare le cose come si deve, può farlo con un foglio di carta, o nel caso del paint, sfruttando i livelli.
Io come mio solito uso il paint, così elementare da essere perfetto per la mia ignoranza grafica. (Voi credete che so un grafico, ma non capisco lo strumento che cè dopo la matita..XD)

Disegno la mia prima bozza, assicurandomi che almeno in linea di massima, le proporzioni del corpo ci siano. In un "omino" stilizzato, le proporzioni vanno un po' a gusti, così ho cercato di soddisfare il mio gusto.

Ingrandito per i vostri occhietti belli.

Copio questo primo disegno e lo reincollo accanto. Dopodichè prendo un colore vistosamente diverso, ad esempio il rosso sparafleshoso o il blu, e ci disegno sopra il frame successivo.

Tenere sotto il disegno precedente ci aiuta a capire come stiamo muovendo il nostro chara.


Bene, con questo vi ho spiegato come si crea la prima Bozza. Tutto sta nella vostra autocritica del disegno e del movimento. Ah, se non sapete "come diavolo sta una gamba in quella posizione", o "perchè cavolo quel braccio stona", ma non riuscite a farlo meglio, mettetevi davanti ad uno specchio e imitate lentamente il movimento o la posa. Non sentitevi imbecilli, spesso solo questo vi salva dalla tragedia, scoprendo che magari muovevate l'arto con una logica sbagliata. I migliori animatori hanno uno specchio mentre lavorano, per potersi guardare le espressioni facciali o i movimenti. In fondo non si è mandrake che ci si ricorda tutti i movimenti dei muscoli a memoria.

Passiamo al passo successivo.


Rifinitura e correzione

Bene bene bene, cosa abbiamo quì? Una strisci animata da scarabocchi potenzialmente semoventi. Ok, per chi vuole creare un gioco trash stile spongebob, potrebbe anche bastare così. Per chi vuole creare qualcosa di più sensato, deve armarsi di pazienza e cominciare a scontornare ogni singolo frames, levando quei quadretti di troppo.

Quì dunque comincia il lavoro serio. Nulla di drammatico, intendo solo dire che quì si terrà cura dei dettagli.
Cominciate dal primo, rifinitelo e rendetelo più preciso. Quando vi soddisfa, colorate i volumi così da avere più chiara l'idea della figura.
Per figure come armi o oggetti simili, spesso durante i movimenti risulta difficile mantenere i dettagli giusti.


Ad esempio l'elsa di questa spada, se guardata bene, finisce storta. Non è dritta, ne era mia intenzione farla ricurva, ma con i pixel si incappa spesso in problemi di questo genere. Ci si può litigare fino ad un certo punto, ma capito che nelle combinazioni non ce ne è una dritta, allora si sceglie la meno brutta e si continua. In fondo questo è un Frames, e sarà osservato meno di un secondo. Deve rendere il movimento.
Se vi toglierete la curiosità di fare il fermo immagine sui cartoni animati, noterete come i disegni da fermi sembrino sempre un po' bruttini. Il movimento può deformare un po' le linee per enfatizzarsi. Ciò che conta è che le proporzioni rimangano.
________________________

Ok, ora che abbiamo scontornato il primo frames, per gli altri il procedimento è leggermente diverso.
A seconda di quanto avrete fatto precise le bozze, questo procedimento vi servirà di più o di meno.
Prendete il primo frames, copiatelo ed incollateci sopra il secondo, con il bianco in trasparenza.

Osservate se le cose base coincidono. Io in genere prendo i piedi come base di riferimento, arrivando anche a copiarli e reincollarli, modificando e spostando quel che serve. Il frames era venuto storto, dunque ho spostato la bozza in modo che coincidesse circa sui piedi. E' importante che l'animazione appoggi sulla stessa linea, altrimenti traballerà e anche se fatta da dio, sembrerà comunque una ciofeca.



Verificato e sistemato il frames, si può scontornare anche questo, come nella seconda img.

Per chi ha abbastanza cattivo gusto, potrà notare che quest'immagine è decisamente....brutta. Ok che l'animazione distorce un po' le linee per enfatizzare, ma ho come l'impressione che quei piedi..che l'equlibrio del corpo siano decisamente errati. E' una cosa che può tranquillamente capitare quando si fanno le bozze, anche perchè un'animazione è una continua evoluzione. Nel corso di questa lezione avrò cambiato i disegni ogni volta che li prendevo in mano per fare qualche passaggio. E' normale, ci si arriva mano a mano alla versione definitiva. Cè comunque da ricordarsi che pretendere la perfezione sin da subito, e su tutti i frames è
1- presuntuoso e snervante perchè quasi impossibile
2 - anche un po' inutile perchè il frames verrà a malapena percepito
3 - ma se siete perfezionisti o volete entrare nella disney, esercitatevi sin ora a fare le cose con giudizio

Io sono una via di mezzo. A seconda di quanto caffè ho in corpo.

Ok torniamo a noi. Il frames è decisamente brutto. L'idea del movimento cè, il carico della spada anche, ma è disegnato male. Basterà correggerlo.



Ho individuato tre errori maggiori.

1 - Le braccia sono decisamente corte rispetto al primo frames.
2 - L'equilibrio delle gambe è sbagliato, portano troppo avanti il corpo e sembra impossibile che quella figura possa arreggersi, oltre al fatto che so proprio brutte.
3 - La congiunzione con i piedi non è venuta molto bene. Devo adattare meglio i piedi del frames precedente ad i piedi di questo frames, che chiaramente si muovono.


Ok. Aggiustato il grosso. Si potrebbe fare di più ma anche così renderà il movimento.
Come segnalato dalle linee rette a destra, ora l'equilibrio del corpo è più sensato e mantiente un'asse. Se sta tirando su di peso una spada, deve poter spingere la terra con i piedi in maniera efficace, dunque il corpo deve rispettare un'asse quasi perpendicolare. Se avessimo a disposizione più di 4 frames, dovremmo studiare con attenzione il movimento dell'ase del corpo, per evitare di farlo esageratamente rigido (e dunque farlo sempre perpendicolare) ed evitando anche di farlo sbilanciare col rischio che ci cada. (Ovvio che non cade, è un disegno XD ma pensateli vivi e dunque immaginate il movimento. Se vi sembra che sta per cadere, ahi.)

Poi ho alzato leggermente il tallone del piede, così chè non dia più quell'impressione di distorto, stile Megamen, e gli ho allungato di un filo le braccia, migliorando la piega delle gambe e rifinendola.
Come ho detto, il frames potrebbe essere migliorato, potrebbe essere reso più equilibrato ancora e più dinamico.
Ma noi passeremo oltre...XDDD
________________________

Il prossimo frames funzionerà con la stessa logica. Ma per regolarci sulla linea sul quale appoggia, non ci conviene copiare i piedi e reincollarli. No, perchè ora li muove e li allarga. Allora, dato che il vrames precedente gli sta accanto, tracciamo una linea rossa tra il frames precedente ed il successivo, che combacia con la linea di appoggio dei piedi. Ecco, ci siamo Riportati l'altezza di appoggio del personaggio.



Quando le linee di oggetti o vestiti, vi ingombrano e non riuscite a capire bene se avete disegnato correttamente il movimento di quel polso o cosa, semplicemente eliminate l'oggetto incriminato (la spada, nel mio caso) e studiatevi l'animazione che vi interessa. Vi terrete la bozza con la spada salvata altrove e completata la rifinitura del corpo, potete lavorare all'oggetto.

Io prima di mettere anche la spada, ho notato che quella schiena fa un movimento un po' brusco verso la fine, verso il bacino. E' una minuzia, ma sembra che si spezzi quasi, a causa della curva esageratamente accentuata.



A dire il vero ci ho messo 3 secondi a risolvere il problema. Ho spostato 4 pixel contati e già tutto è cambiato. Non sempre servono migliorie drastiche, spesso è solo un gioco di saper mettere pochi pixel in maniera più corretta.

OOk. Ora possiamo mettere la spada. Se volete dare un'idea di vicinanza, quando un oggetto è abbastanza lungo ed è messo in prospettiva, inspessite i contorni più vicini.



Per concludere, dato che quì l'omino sta muovendo la spada con un grande distacco dal frames precedente, per nascondere questo grande scatto e dare un senso di continuità del movimento...si fa la solita linea cinetica alla ragnarock, che è figa, che è comoda, che è una grande fregatura per l'occhio umano XD
Nel caso non vi piaccia, ci sono altri sistemi, oppure fatevi più frames. XD

Più sara corretta la curvatura (che indica che tragitto ha fatto l'arma), e più il movimento non risulterà spezzato bensì fluido.
________________________

Del prossimo frames cè poco da segnalare. Ma è bene segnalarlo.
Inanzitutto dobbiamo sempre tenere conto della linea dei piedi. Se andate a rivedere la bozza, tra il secondo frames ed il terzo, i piedi sono simili ma non uguali. la gamba distesa si sposta, tuttavia la posizione del piede può essere risfruttata, allora risfrutiamola.

Usare i frames precedenti come guida è sempre d'aiuto a creare un'animazione coerente, ma non abbiate timore a modificare i disegni. Devono aiutarvi, non ostacolarvi nel cambiare movimento.
Ora..il Frames andrebbe bene, ma mettendo la spada ho notato un'incoerenza con la posizione delle mani e dell'elsa.
Badate a queste inezie. Questo genere di dettagli non serve tanto a fare figa l'animazione, quanto a renderla comprensibile, infatti allineando le mani con la giusta angolazione dell'elsa, guideremo l'occhio dell'osservatore a capire ad intuito che angolazione ha l'elsa che, effettivamente, è ben poco visibile. Se non spostavo le mani, un osservatore attento poteva dedurre che l'elsa era fatta di gomma e la spada andava per una linea tutta sua. Rendere rigidi gli oggetti non è cosa da sottovalutare, perchè finchè muovi una cosa molle, come la muovi sta bene. Una cosa rigida deve assolutamente rimanerlo, e van tenuti in mente tutti questi dettagli che la differenziano da una cosa molle.



Ok. fatto anche questo dunque. Si rifà l'arma, si fa la curva cinetica, et èst finished.
________________________

Per l'ultimo frames, ho rifinito il tutto, ho curato che la figura fosse proporzionata mettendoci più riguardo rispetto agli altri frames, perchè quest'immagine sarà quella che si vedrà per la maggior parte del tempo. E' la posa da fermo, dunque sarà un'immagine ferma, l'ultima.
Ma andava già bene nella bozza, ho solo aggiustato la posizione del gomito e dei piedi, per il resto stava benissimo così.



Ok. Bene. La base è completata, e questi cosi arancioni potrebbero già muoversi. Anzi, si muovono. L'animazione è scattosa perchè è pensata per un chara Xp, ossia 4 frames a grandezza gigante. (l'animazione comunque è raddoppiata.)



Vi piace? A dire il vero, non è molto professionale (per chi ha visto i chara battler di naruto noterà la differenza di qualità) ma come base è ottima e rende l'idea. Quello per ora è l'importante.
passiamo all'ultima fase di questa lezione ora.



Vestiti in movimento

Potreste tranquillamente creare il gioco dei Folletti Vs Nenè con quest'omino nudo. Ma in genere su rpgmaker servono Battler vestiti. o almeno mi auguro vi servano così...XD
Dunque passiamo allo studio dei vestiti nell'animazione.

Decidiamo che il nostro uomo nudo arancione, in realtà è una specie di cavaliere paladino. Nel mio caso, che ho improvvisato un personaggio da zero, mi sono studiato i componenti del vestito direttamente sull'animazione. In genere comunque si utilizzano dei disegni o dei soggetti già studiati. Vi suggerisco comunque di suddividere il vestito in più pezzi e di vedere come viene, semplificato in pochi pixel.

Ok. Il metodo di vestizione è personale ed è a seconda di come vi gira. In questo caso per rendervi semplice alla vista la lezione, io ho lavorato pochi elementi singolarmente. Altre volte ho fatto l'intero vestito ad ogni frames. Il risultato finale comunque è che deve essere vestito tutto e che ogni singolo pezzo si muova assieme al corpo, ruoti e si inclini in prospettiva, a seconda della necessità. State bene attenti a non disegnare vestiti piatti che non seguono il movimento e la torsione del corpo, o ammazzerete tutta la fatica fatta fino a ora nello studiare 'sto movimento.

Ok ecco la prima stringa.


Ok. Ho cominciato con lo studiare..quel che mi veniva in mente. Le spalline ed un mantello con un simbolo random.
In teoria i vestiti che coprono, come i mantelli, vanno solo all'ultimo, ma dato che non mostra mai la schiena nell'animazione, non vi era problema se lo facevo anche subito.
Come vedete, di un oggetto è il minimo conoscere ALMENO le tre visuali base. Laterale - Alto - avanti. Vedi la spallina.
Per un lavoro serio e completo servirebbe anche lo scorcio ed il sotto, ma al paint veniva complicato disegnarne lo studio. Queste cose potete tranquillamente studiarvele a parte, vi servono a capire come è fatto l'oggetto nella sua piena forma, così da saperlo muovere con realismo.

Il mantello, la cosa più utile da sapere era la sua lunghezza, i possibili decori e la sua larghezza. Questo mantello in effetti è particolarmente stretto, quasi fosse più un drappo decorativo che un vero mantello coprente.

Come potete vedere, la spallina è inizialmente quasi di profilo, poi si piega con la spalla avvicinandosi ad una visuale da davanti, seppure ancora parsialmente laterale (chiamabile dunque scorcio dal basso), poi segue fedelmente il movimento della spalla ruotando con essa.
Dallo studio iniziale della spallina all'effettivo disegno nell'animazione, è quasi impossibile rispettare fedelmente la forma in quanto i pixel sono il vostro peggior nemico, come anche il vostro migliore amico quando volete essere approssimativi.
Cercate di seguire la forma e di ottenere disegni belli. Se poi non sono perfetti a causa dei pixel (ribadisco, a causa dei pixel eh, non fate i paraculi usandola come scusa mo eh XD), allora non allarmatevi troppo. Cercate solo di aggiustare quel che si può.

Il mantello invece compie un movimento ben più evidente. Inanzitutto è un drappo, ed a seconda di come farete rigido o sinuoso il movimento, ne deciderete il tessuto. Una seta ad esempio si sarebbe sollevata notevolmente in un movimento così brusco della schiena e sarebbe ridiscesa con grazia. Una tela o un mantello avrebbe fatto una mossa simile al disegno, per poi ridiscendere con velocità media. Il movimento di un drappo non è una cosa così facile da spiegare..dovete tenere conto sempre di dove è il punto di tiraggio, ossia cosa è che lo tira in una direzione. In questo caso la schiena lo tira con se a sinistra nel momento in cui l'omino agita la spada. La base agganciata del drappo seguirà immediatamente il movimento, mentre tutto ilresto riceverà l'impulso più tardi, creando un effetto onda che potete osservare anche nella realtà. E' un trasmettersi del movimento lungo tutto il tessuto. Cè anche da considerare comunque, che mentre il tessuto esegue il comando, il corpo si muove nuovamente ed il nuovo ordine crea contrasto, dunque il drappo si solleva nella curva dei due movimenti.
Queste cose van sempre studiate dalla realtà comunque, o impazzirete, così come impazzisco io a spiegarvele XD.
________________________



Elmo - Mani - Busto.

In ordine.

L'elmo non è stato molto difficile, è una palla tonda di ferro. E' la visiera la cosa complicata, perchè i pochi pixel presenti han reso molto difficile la resa della curva acuina della visiera. In questi casi cercate la combinazione più giusta ed assicuratevi quantomeno di dare l'idea. Poi all'ultimo frames impazzitevi a farlo bene, così da nascondere questo problema. Comunque per regolarvi su come si muove una visiera simile, o qualunqu ealtro oggetto su una superfice tonda, createvi l'asse, la linea che si muove sul cerchio. Io sfruttando quella linea decretavo la punta della visiera. Poi l'ho anche lasciata come decorazione, così da rendere ancora più chiaro il disegno.

Delle mani cè solo da puntualizzare che quando fare dei disegni con delle linee così vicine, potrà capitarvi che durante l'animazione non riusciate a far entrare tutte le linee. Se un braccio è di profilo o visto che indica verso di voi, chiaramente il numero di linee che vi entreranno saranno molto diverse. Rispettate sempre un ordine visivo ed evitate grandi impiastri, anche se doveste sacrificare una linea in un frames. Comunque è sconsigliato creare trame così sottili con dei chara, in genere questi effetti dateli con le ombre e con le luci. Io non vi farò ora la lezione su come questo omino viene fuori se colorato con un po' di gusto. Ho disegnato tutto così marcato per spiegare l'animazione.

Il busto cè poco da dire, se non che il disegno rigido, si è chiaramente mosso durante l'animazione. Se si voleva essere realistici, un busto in ferro non segue fedelmente il corpo, perchè è un oggetto rigido, ma rischiava di ammazzare l'animazione e poi non era mio interesse fare un busto realistico. Dunque dovete pensare sempre a cosa volete ottenere, cosa volete sacrificare. Ho sacrificato il realismo del materiale per mantenere una dinamicità nel movimento.
________________________



E quì, ho decretato fine a quest'animazione, completandogli le gambe ed aggiungendoci un'ombra alla fine. Potete decidere di fare la classica ombra anonima, ossia un'ellisse sottile sotto il pg, oppure di animare anche l'ombra tenendo conto delle cose più rilevanti, come le spalle e l'arma. Non serve che l'ombra sia fedelissima, basta che renda l'idea delle masse.
Un diverso tipo di ombra può anche dettare un diverso tipo di stile. A voi la scelta insomma.
Cosa dite..? I vestiti son di pessimo gusto?
E' chiaro, così dovrete rifarveli da zero e non li copierete da quì a meno che non vogliate un battler anonimo e orribile XD




Ok, ed ora le conclusioni.
Come avete visto, parlavo di 4 frames durante la lezione, mentre poi nelle ultime figure i frames erano 5. Il 5° frame di troppo (il secondo, nei disegni), è appunto il frame dell'infamia. Fino al secondo frame la mia intenzione era di fare che il personaggio caricasse lo spadone pesante sulle spalle, dunque compisse un semicerchio in alto e non laterale come poi ho deciso di fare. Quando poi ho montato l'animazione assieme, cosa che, chiaramente, ho fatto solo ultimato tutto il materiale (NON FATELO MAI XD VERIFICATE SEMPRE LA BASE PRIMA DI CONTINUARE XDD), ho visto come l'animazione veniva spezzata e senza naturalezza.



L'animazione penosamente innaturale, mi ha lì per lì shockato. Non me l'aspettavo, poi riguardandola bene mi son reso conto che effettivamente, quel 5° frames era un surplus e che l'animazione reggeva benissimo anche solo con i 4 frames base.



Mi è andata di c**lo, ma per questa banalità ho rischiato di dover rifare daccapo quasi tutto il lavoro. Dunque cercate sempre di premeditare almeno un minimo, ciò che volete fare, così da non rischiare di gettare ore di avoro inutilmente.



Ok, ora davvero è finita. Spero che questo papiro greko vi sia utile, e come da prassi, non aspettatevi notizie da me molto presto XD
Ringrazio Baldo per il banner
ProGM per il supporto esistenziale
Zero per la compagnia
ed il pc per la sua pazienza.
Ed ovviamente il paint XD

Commentate e domandate qualunque cosa vogliate. E sorvolate, per cortesia, sugli innumerevoli erroruccioli di distrazione grafica che ho fatto quà e là..XD

[Zuppo]

Lezione 7 - Animare un Battler 2



30/01/2014
Flame
_____________________________________________________________

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.

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.

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.



Diamo una pulitina al tutto.


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.

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.



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:


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.


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.



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)


Ricalchiamo quel che serve e controlliamo se qualcosa non ci convince molto.


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.




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.

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.


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.

  Reveal hidden contents

8D...

Rifiniamo il tutto (cercate di copiare dove sono gli elementi tenendovi vicino, o persino in un livello sotto, le immagini già concluse)

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.

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.




E così, eccoci allo scheletro dell'animazione.


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.

 

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.



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!

[Zuppo]

Lezione 4 espressioni del viso

05/11/2007 15:30
Baldo Ssj2

MSN:wer.jin chiocciola tiscali.it
_____________________________________________________________


In questa lezione impareremo un modo semplice e veloce per dare un tocco di dinamicità nei nostri progetti: le espressioni del viso nei nostri chara

_____________________________________________________________


Per questa lezione utilizzeremo il classico RTP dell'XP



Occhi

Di base i nostri chara non possiedono bocca perciò il più delle volte dovremmo lavorare sugli occhi, il metodo più veloce consiste nella modifica di essi ritoccandone il numero di pixel, il colore o la posizione.

 

Nel primo esempio le ciglia sono state disposte a 45 gradi per ricreare un'espressione seria e decisa, nel secondo le abbiamo proprio eliminate per dare un senso di tristezza, nella terza è stata eliminata la parte bassa per un'espressione curiosa... invece nelle ultime 2 un chiaro esempio di come cambiando posizione lo sguardo muti significato.

ora utilizzeremo un'altro metodo



con le emoticon avremo molte possibilità di scelta, anche molto simpatiche >:3


Bocca

Nel caso volessimo utilizzarla ecco dei semplici esempi



con una semplice riga ecco la nostra bocca, variandone il colore, dimensione o posizione ne varia l'espressione



per una bocca "sbigottita" basta un semplice rettangolo



un'espressione curiosa? un puntino o 2... XD


Fusion!

ora che abbiamo imparato fondiamo le 2 cose assieme per un soddisfacente risultato



ecco alcuni esempi... le combinazioni sono infinite ><



Espressioni isometriche

un chara in movimento che dimostra personalità è il miglior biglietto da visita per il vostro gioco, aiuta ad enfatizzare eventuali scene eroiche o momenti di ilarità



il metodo di realizzazione più semplice consiste nel spostare l'intero "corpo" dell'occhio nel punto che si desidera


Conclusione

Nulla di tecnico questa volta... solo un suggerimento per rendere completi i vostri soggetti ^^

alla prossima

[Zuppo]

Sticko, finchè non metto in ordine la sezione in modo da dare visibilità a tutti.