Tutorial creazione sprite [Archivio] - Hardware Upgrade Forum

Jocchan

18-04-2006, 10:26

Quick Links:
Parte 1: prendere confidenza con il tool (http://www.hwupgrade.it/forum/showpost.php?p=12044888&postcount=2)
Parte 2: linee guida per la pixel art (http://www.hwupgrade.it/forum/showpost.php?p=12044888&postcount=3)
Parte 3: sprite di esempio da riutilizzare (http://www.hwupgrade.it/forum/showpost.php?p=12044888&postcount=4)
Parte 4: come animare uno sprite (http://www.hwupgrade.it/forum/showpost.php?p=12044888&postcount=5)

http://lnx.rc6.it/diamonds/varie/tutorial/sprite_tut.jpg

Introduzione
In questo tutorial cercherò di spiegare brevemente in che modo si realizza uno sprite.

Prima di tutto, occorre stabilire quali tool ci serviranno. Fortunatamente, per il lavoro vero e proprio, è solo uno e, ancor più fortunatamente, la versione free ha tutte le caratteristiche che ci servono. Si tratta di Graphics Gale, software giapponese pesantemente ispirato al vecchissimo Deluxe Paint per Amiga (chi se lo ricorda?), la cui versione in inglese può essere scaricata da qui:
http://www.humanbalance.net/gale/us/index.html
Consiglio un bel giro per il sito, giusto per avere un'idea delle funzionalità del programma.

Una volta installato Graphics Gale, se stiamo realizzando un fotogramma chiave (key frame), occorre procurarsi un disegno fatto a mano, raffigurante il frame in questione, e rimpicciolirlo (con un qualsiasi programma di grafica, possibilmente non MS Paint) in modo che il personaggio abbia un'altezza grossomodo equivalente a quelle qui indicate:

Josh - 167 pixel
Ice - 142 pixel
Kathy - 153 pixel
Rock - 181 pixel
Vlad - 159 pixel
N-00B - 170 pixel
Handy - 185 pixel
Sam A. Elroy - 165 pixel

Una volta ottenuta l'immagine con le dimensioni desiderate, è possibile aprirla con Graphics Gale ed iniziare a lavorarci su.

Prima di passare ai fondamentali, è necessario sapere come funziona questo tool, e quali comandi offre. Il file di help (in inglese) fornito insieme al programma è davvero ottimo ma, per chi volesse qualche precisazione o non fosse molto pratico con la lingua, la prima parte di questo tutorial si occuperà di descrivere le funzionalità (per noi) più importanti del programma.

Jocchan

18-04-2006, 10:27

Parte 1: prendere confidenza con il tool

Nota: per quanto la presente guida possa essere accurata, consiglio in ogni caso di consultare il file di help contenuto nel programma. E' fatto molto bene, e spiega nel dettaglio ogni funzione. Consultarlo, e fare pratica a mano con il tool, è un ottimo aiuto per prendere facilmente confidenza con il programma e le sue funzionalità.

Schermata principale
Schermata di base di Graphics Gale (http://lnx.rc6.it/diamonds/varie/tutorial/gg_screen.jpg)

Io personalmente preferisco, piuttosto che avere diverse finestre svolazzanti, settare la schermata principale in modo che abbia l'aspetto visibile cliccando su questo testo (http://lnx.rc6.it/diamonds/varie/tutorial/gg_screen2.jpg). Farlo è semplicissimo, basta trascinare le finestre in questione verso i lati dello schermo (e, viceversa, per tornare alla visualizzazione classica, basta trascinarle verso il centro). In ogni caso, per il presente tutorial, la configurazione che darete alla schermata sarà del tutto ininfluente.

Se lo sprite del personaggio in questione non è ancora stato realizzato (ancora per poco), consiglio di fare qualche "prova colore", imbrattando una copia dell'immagine con un altro programma (Paint Shop Pro va benissimo). Se, come sempre più probabile man mano che andremo avanti, già questo sprite esiste, allora basterà prelevare i colori in questione dagli altri frame, e la "prova colore" non sarà necessaria.

I livelli (layer)
Graphics Gale consente di utilizzare più livelli (layer) separati, un pò come vari fogli di plastica trasparente uno sopra l'altro. Quindi, per semplificarci la vita in fase di animazione, vedremo di disegnare le varie parti del corpo dello sprite su livelli separati, mantenendo il disegno originale in quello più in basso per avere un punto di riferimento.

http://lnx.rc6.it/diamonds/varie/tutorial/gg_layerwindow.jpg

Per creare un nuovo livello, basta cliccare sul pulsante a forma di freccia rivolta verso il basso, in alto a sinistra nella finestra Layer (http://lnx.rc6.it/diamonds/varie/tutorial/gg_layerwindow01.jpg), e cliccare su Add.
Ogni livello ha tre pulsanti: di questi useremo solo il primo, per renderlo visibile o nasconderlo, ed il terzo, per settarne le opzioni (può essere utile modificarne temporaneamente la trasparenza, o lasciarla al 75% per lo spirito che protegge Josh). Talvolta può esserci utile unire insieme più layer, ma ricordiamo di lasciare SEMPRE separati i livelli con la grafica delle varie parti del corpo dello sprite, e di dar loro dei nomi significativi per poter individuare subito il layer voluto.

La palette
http://lnx.rc6.it/diamonds/varie/tutorial/gg_palettewindow.jpg

Altra finestra di cui è fondamentale comprendere il funzionamento, è quella della Palette, mostrata qui sopra.

http://lnx.rc6.it/diamonds/varie/tutorial/gg_palettewindow01.jpg

La parte superiore contiene la palette (tavolozza di colori) vera e propria. La casella con il bordo più spesso è quella del colore attualmente in uso, mentre quella sbarrata rappresenta un colore secondario, che può essere utilizzato al posto di quello primario con un click, e che può essere comodo avere subito a portata di mano.
Cliccando col tasto sinistro, si sceglierà il colore primario. Cliccando col destro, quello secondario. Con un doppio click, invece, verrà aperta una finestra che consente di modificare il singolo colore all'interno della tavolozza, a seconda delle esigenze, variando i tre valori R, G e B che compongono ogni colore.
Il bianco puro, posizionato in basso a destra nella palette e con R, G e B tutti e tre a 255, viene considerato come colore trasparente, per cui disegnare con questo colore equivale a cancellare parte dell'immagine.
Se vogliamo utilizzare il bianco, basta crearne uno con R,G e B tutti a 254, ma senza eliminare il bianco "trasparente": la differenza visiva sarà nulla, e l'efficacia massima.

http://lnx.rc6.it/diamonds/varie/tutorial/gg_palettewindow02.jpg

La parte centrale della finestra contiene l'ormai familiare pulsante per le opzioni, utile per varie funzionalità di cui le più importanti sono quelle per caricare, salvare o ripristinare la palette di default, più altre feature molto interessanti.

Immediatamente a destra del pulsante per le opzioni, è possibile selezionare la dimensione della penna che utilizzeremo per disegnare: per il 99% utilizzeremo quella più piccola, ma talvolta può essere utile usarne di più grandi.

Subito più in basso, invece, troveremo vari pattern di riempimento (righine e retini puntinati vari), che verranno applicati automaticamente man mano che disegnamo. Quasi sicuramente non li utilizzeremo mai nel corso del nostro progetto, ma può essere utile sapere che si trovano qui.

Sulla destra, invece, troviamo due quadrati che rappresentano, rispettivamente, il colore primario e quello secondario in uso. Cliccando sulla X vicino ai due quadrati, è possibile passare istantaneamente dall'uno all'altro. La comodità di questa feature, davvero elevata, può essere notata solo con la pratica.

http://lnx.rc6.it/diamonds/varie/tutorial/gg_palettewindow03.jpg

Questa sezione della finestra Palette, invece, consente di modificare i valori R, G e B dei colori primari e secondari, senza modificare la palette. Per selezionare il colore da modificare basta cliccare su uno dei due quadrati descritti poco fa.
Selezionando la tab HSL in basso, invece dei valori RGB si potranno modificare hue (tonalità), saturation (saturazione, ovvero intensità del colore) e lightness (luminosità).

Le barre degli strumenti (toolbar)
http://lnx.rc6.it/diamonds/varie/tutorial/gg_toolbars.jpg

Mentre i menu in alto possono essere autoesplicativi, e comunque sono ben descritti nel file di help di Graphics Gale, è più utile avere una visione d'insieme delle tre barre degli strumenti, posizionate in alto nella finestra, e qui numerate da 1 a 4 per maggiore praticità.

1. Base toolbar: questa barra contiene i comandi base del programma, e consente di creare un nuovo file, aprirne uno, salvare o, tramite il comando Browse (l'icona con la lente d'ingrandimento), di frugare tra le cartelle del disco fisso, alla ricerca di immagini.
Le due freccine a destra del comando per salvare, Undo e Redo, servono rispettivamente ad annullare le ultime azioni effettuate e, se si cambiasse idea, a ripeterle.
Seguono poi i classici Cut, Copy e Paste (Taglia, Copia e Incolla) e, comando utilissimo, Paste as a New Image, utile per incollare su una nuova immagine e conservare più copie del proprio lavoro.
Segue ancora la percentuale di Zoom, che mostra a che livello di ingrandimento è visualizzato il frame attuale (attenzione! la dimensione dell'immagine rimane la stessa, cambia solo il modo in cui questa è visualizzata, per consentire di lavorare con maggiore precisione), e poi utilissimi comandi riguardanti le griglie.
Il primo mostra o nasconde una griglia con caselle grandi 1 pixel, utile per regolarsi con le dimensioni in pixel di ogni linea. Il secondo consente di visualizzare o nascondere griglie di dimensioni qualsiasi, anche definibili dall'utente, utili per regolarsi con le proporzioni. Il terzo, chiamato Snap, rende queste griglie "magnetiche", in modo che l'utente, disegnando, le segua. Questo può servire per disegnare linee dritte o seguire certe porzioni di sprite con precisione, e la sua importanza non va sottovalutata.
Ultimo comando, e uno dei più interessanti, è Onion Skin. Verrà usato solo quando ci occuperemo delle animazioni, e consente di mostrare, in semitrasparenza, il fotogramma precedente e/o quello successivo, in modo da poter animare il tutto con maggiore cura e precisione.

2. Paint tools: sono tanti, ma utilizzeremo soprattutto Magnifier per zoomare, Move Hand per muoverci (senza modificare nulla) nell'immagine molto ingrandita, Rectangular e Oval Selection per selezionare parti rettangolari ed ellittiche dello sprite e spostarle/copiarle/incollarle/ridimensionarle, Lasso per selezionare porzioni qualsiasi, Magic Wand per selezionare zone adiacenti con pixel di colori uguali (o simili, a seconda del valore impostato nel suo attributo Tolerance), Selection by Color come una Magic Wand che funziona per tutti i pixel dell'immagine, anche se non sono adiacenti, Pen per disegnare e cancellare, Connect Line e Spline Curve per disegnare rette o curve (per terminare una curva basta cliccare col tasto destro), Rectangle e Oval (sia Filled che non) per disegnare figure rettangolari e ovali, sia piene che solo i bordi, e Flood Fill per riempire istantaneamente di un singolo colore una qualsiasi zona chiusa. Gli ultimi due pulsanti non ci serviranno mai.

3. Animation toolbar: i comandi di questa toolbar consentono di creare, duplicare ed eliminare frame, di muoversi avanti e indietro tra di essi, di modificarne le proprietà, tagliarli, copiarli e incollarli e eseguire il playback (o mettere in pausa) l'intera animazione.

4. Layers toolbar: l'ultima toolbar consente di aggiungere, duplicare, eliminare e unire i livelli, di muoversi tra di essi e di modificarne le proprietà. Visto che praticamente tutti questi comandi sono già disponibili nella finestra Layers, la sua utilità è relativa.

Terminata questa visione d'insieme delle caratteristiche del programma, possiamo arrivare al punto: come si crea uno sprite.