Tutorial grafici sulla creazione di un tileset

[Artia]

Questi tutorial che sto ancora traducendo sono stati fatti da Gratheo, un utente di RMXP.org

 

ho avuto il suo permesso a postarli dopo averli tradotti, ovviamente ogni merito va a lui.

 

Il breeze template è stato fatto da Green Raven

 

These tutorials which i am still translating are made by Gratheo, a RMXP.org user

 

i had his permission to post them after translating them. All the merit is to him.

 

Breeze template by Green Raven

 

Questi tutorial sono fatti per il Breeze template, ma credo che le tecniche di spriting possano essere utili per tutto.

 

Introduzione

 

Breeze è uno stile semplice da spritare. Questo non vale solo per i charsets, i tilesets sono ugualmente facili da fare. Le linee guida basilari da seguire quando spritate:

-Come sempre, ricordate la vostra sorgente luminosa e dove è. Spritate con questo in mente.

-Breeze è uno stile piuttosto semplicistico – per gli sfondi, io di solito uso palette di 4 o 6 colori, dipende dal dettaglio richiesto

-Non utilizzate effetti di Dither. Non è una regola assoluta, ma i tilesets per Breeze divengono orribili con un Dithering approfondito. Per favore non fatelo

-FCS – Fate Cose Semplici! Non riesco a sottolinearlo abbastanza. Va BENE (relativamente) avere larghe aree senza ombreggiature significanti. Questa non è una buona ragione per ignorare del tutto l’ombreggiatura comunque!

-L’iniziativa è importante. Non limitatevi ad editare quello che c’è già! Andate avanti e fate qualcosa di nuovo! Non importa come appare, l’importante è che avete provato. E insomma, la prossima volta sarà meglio!

-Non ignorate la teoria di base dei colori. Questo parla da se. Solo perché è semplice non vuol dire che non deve apparire bello.

 

Per favore notate che sono solo linee guida, non tutte specifiche per il Breeze. Sono abbastanza importanti, comunque.

 

 

Parte 1: Un muro di mattoni

 

 

Partiamo con qualcosa di semplice: un muro di base, come dovrebbero essere usati nelle strade o nelle aree urbane.

 

Step 1: Inizio

Per questo tutorial userò questa palette:

Cardinal

http://www.colormagix.org/Color%20Palettes/New%20Palette%20Images/Cardinal.png

 

Un muro deve essere largo almeno 3x3 nel tileset.

Dunque partirò con un blocco 3x3

 

http://img514.imageshack.us/img514/6913/step1yn1.png

 

Step 2: Schizzo di base

Ora farò uno schizzo del design di base del muro. Per partire disegnerò il pezzo centrale con il quarto colore della palette, quindi farò il contorno dei mattoni con il sesto.

Attenzione: Fate in modo che gli spigoli del tile si allineino perfettamente, altrimenti potrete avere un muro 3x3, niente di più.

http://img523.imageshack.us/img523/4954/step2tl1.png

 

Step 3: Mattoni

Ora i mattoni. Cercate di farli più o meno uguali tra loro.

http://img213.imageshack.us/img213/1981/step3zt7.png

 

Step 4: Check

Semplicemente controllate che le immagini siano precise e possano essere ripetute.

http://img205.imageshack.us/img205/8342/step4ab3.png

 

Step 5: Base

Qui copierò il tile centrale ai tre tile più in basso. Dunque cancello qualche pixel sul fondo, in modo da dare al muro una base solida.

http://img510.imageshack.us/img510/2574/step5ad3.png

 

Step 6: Lati

Stavolta copierò il tile centrale ai suoi lati.

http://img512.imageshack.us/img512/6701/step6jw0.png

 

Step 7: Parte alta

Again, we'll copy the center tile, and cover the top three rows. Again, delete the extra bit on the top so that there's a solid top of the wall, as well.

Stavolta copierò il tile centrale per coprire i tre tile superiori. Di nuovo cancellate una manciata di pixel.

http://img49.imageshack.us/img49/3338/step7jy9.png

 

Step 8: Ritocco larghezza

Ora si lavora lui lati. Disegnate una linea abbastanza vicina ai bordi con il sesto colore della palette, come qui. Cancellate i pixel in eccesso

http://img337.imageshack.us/img337/4387/step8rd9.png

 

Step 9: Ultimi aggiustamenti

Ora potete notare che alcuni mattoni non sono vicini agli altri per dimensione. Sistemiamoli. Ripassate con il quarto e il sesto colore i mattoni sproporzionati dei 8 tiles ai bordi.

http://img252.imageshack.us/img252/4069/step9ts0.png

 

Step 10: Ombreggiatura

Ora le ombre.

Il Breeze non usa un sistema molto complicato per le ombre. Di solito un oggetto ha 4 colori di palette: outline, riempimento, ombra e luce.

Questi sono i colori che uso io, secondo la palette prima mostrata:

Outline – 6

Riempimento – 4

Ombra – 5

Luce – 3

 

Ora andremo ad usare le ombre e le luci per completare il muro.

Sul lato sinistro di ogni mattone (attaccato all’outline), fate una linea di un pixel verticale usando il colore di ombra.

Ecco un ingrandimento del tile centrale una volta completato.

 

http://img252.imageshack.us/img252/7110/step10mb7.png

 

Step 11: Luci

Ora useremo il colore di Luce per illuminare il mattone. Di solito faccio così.

Di nuovo c’è una immagine ingrandita per la vista del tile centrale.

http://img204.imageshack.us/img204/8481/step11lx1.png

 

Step 12: Completare

Ora per a parte più lunga e più dispendiosa in termini di tempo. Mettete ombra e luce ad ogni mattone. Non siate scoraggiati dal tempo che richiede!

http://img250.imageshack.us/img250/5886/step12jb9.png

 

Step 13: Bel lavoro! Però…

Ora abbiamo un bel muro. Comunque non dovremmo fermarci qui. Facciamo i bordi laterali e un fondo a questo muro! Questo è il motivo per il quale non abbiamo fatto estendere il muro per 96 pixel in altezza e larghezza.

 

Prima di tutto partiamo con i lati. Assicuratevi di lavorare su un altro livello se avete un programma che ve lo consente, altrimenti salvate il vostro lavoro finora.

 

Ora dovete estendere il riquadro che state usando circa al doppio di quello che è. (almeno 5 tiles in altezza e 3 in larghezza)

http://img250.imageshack.us/img250/2451/step13of4.png

 

Step14: Lati

Ora i lati. Io di solito li faccio larghi 4 pixel. Qualsiasi larghezza voi adottiate fate in modo che la vostra immagine somigli a questa.

http://img522.imageshack.us/img522/5798/step14xa5.png

 

Step 15: Editing

 

Ora riempite tutto con il colore di riempimento tranne gli angoli dei lati che hai appena fatto. Fate in modo che i lati si uniscano senza cuciture al muro principale.

http://img250.imageshack.us/img250/1046/step15ql7.png

 

Step 16: Luci

Ora seguite le illuminazioni che dovrebbero essere vicine il muro laterale. (Esempio il muro sinistro dovrebbe avere il colore come luce il colore dell’ombra, il muro destro il colore di luce.)

http://img250.imageshack.us/img250/493/step16in5.png

 

Step 17: Retro del muro

Ora il retro. Abbiamo quasi finito, aspettate solo un attimo.

Alla sommità dell’immagine fate una sezione di alta quanto la larghezza dei muri laterali. Riempitela con il colore 4 e fate l’outline con il colore 6, accertandovi che non ci siano buchi vuoti.

http://img511.imageshack.us/img511/9660/step17io7.png

 

Step 18: Oscurità

Ora riempite il rettangolo centrale con un colore simile al nero.

Importante: non usate il nero puro!!!

Io uso valori RGB (3,3,3). Altrimenti usate un altro colore scuro.

http://img259.imageshack.us/img259/4900/step18ib7.png

 

Finito!

 

Ed ora avete finito! Aggiungete il muro ad un tileset per usarlo.

 

 

 

Presto aggiungerò gli altri tutorial sempre sullo stesso argomento, il tempo di tradurli ^^

Edited January 9, 2008 by Artia

[:Mahun:]

Non capisco il perchè sconsiglia il dithering...

[Artia]

Perchè essendo gli sprite molto piccoli (il breeze è bassetto come template) il dithering rovina solo la qualità dell'immagine. Meglio pixellare a mano

[Gratheo]

Hi. Ciò è me, Gratheo. Il mio italiano non è così buon, in modo da sto utilizzando un traduttore. Ecco perchè è il senso che è. Vorrei ringraziarlo per l'invio del questo, Artia. Il mio lavoro che è abbastanza interessante affinchè qualcuno occorra tempo tradurlo è molto nuovo a me. Inoltre, per chiunque che desideri, potete vedere il resto delle lezioni private qui: http://www.rmxp.org/forums/index.php?topic=28541.0

[Timisci]

Useful tutorial, good job Gratheo ^^

[Tio]

Your tutorials are simply amazing! :0

Bravo anche Artia che ha avuto una buon'idea e ha tradotto bene! ^^

[Artia]

Posto un nuovo messaggio perchè non mi permette di inserire tutte le immagini nel primo post.

 

Tutorial 2: Una casa estremamente semplice.

 

 

Step 1: Pianificazione

Prima di tutto dobbiamo pianificare come vogliamo la casa. La casa dovrebbe essere strutturata con un ambiente in mente: se è un luogo dove piove molto, la casa avrà un tetto spiovente; in un deserto il tetto sarà probabilmente fatto di paglia, e così via.

Dimensioni: per la casa dobbiamo farla grande abbastanza da avere varietà e, ovviamente, farla ripetibile. Per quello che sto facendo ora sceglierò dimensioni 3x7 tiles. La casa sarà in stile moderno, avrà un tetto piatto (utilizzabile come area extra per i pg).

http://img220.imageshack.us/img220/2042/house1xm9.png

 

Ora dobbiamo prendere le nostre palette di colori. Per questo tutorial userò Dewkist e il Blue Berry.

http://www.colormagix.org/Color%20Palettes/New%20Palette%20Images/Dewkist.png

http://www.colormagix.org/Color%20Palettes/New%20Palette%20Images/Blue_Berry.png

 

Step 2: Muro Frontale

Per iniziare disegnamo il muro frontale. Dovrebbe essere 3x3. In questo modo abbiamo piena ripetibilità in tutte le direzioni.

Dunque riempiamo i 9 tile più in basso con il colore di riempimento del Dewkist.

http://img521.imageshack.us/img521/3966/house2vb0.png

 

Step 3: Bordi

Ora dobbiamo fare un bordo per I muri. Sto facendo il mio spesso circa 5 pixel . Riempite i lati e il fondo con il colore che volete. Fatene i contorni dunque. Dovrebbe somigliare a questo.

http://img232.imageshack.us/img232/7899/house3rk2.png

 

Step 4: Ombreggiatura

Quando il muro si avvicina ai bordi che abbiamo appena creato diverrà più scuro. Fate ombreggiata l’area vicina ai bordi, 1 pixel di spessore per l’ombra. Nota: fate questo solo sui bordi. Vi sarà un ombra dal soffitto. Fate questa proporzionalmente a quanto il soffittò sporgerà dal muro e dai bordi della casa: se è molto fate l’ombra di circa 5 o 6 pixel; se sporge di poco di 1 o 2 dovrebbe bastare. Non fate molto caso adesso alle dimensioni, le rifiniremo dopo se non sono adatte.

http://img527.imageshack.us/img527/2321/house4al3.png

 

Step 5: Fare uno schizzo del tetto

Per iniziare di solito riempio i restanti 12 tiles con il mio colore di riempimento alternative. Dopo di questo dovreste fare i contorni del tetto. Ora abbiamo lo scheletro della casa!! Ancora non sembra bella però. Fate l’ombra ai bordi del muro della stessa distanza che avevate fatto per il muro.

http://img216.imageshack.us/img216/1065/house5rn8.png

 

Step 6: Pendenza

Ora dobbiamo dare al tetto una certa pendenza ai bordi. Faremo un bordo con il colore alternativo per le ombre. Il mio è largo 5 pixel. È importante che il bordo sia dello stesso spessore per tutta la lunghezza dei bordi.

http://img183.imageshack.us/img183/4382/house6ci8.png

 

Step 7: Terminare lo step 6

Ora dobbiamo usare il colore dei bordi alternativo sul tetto. Fate linee diagonali e un bordo interno. Non è meglio?

Se già così va meglio, contate che non abbiamo ancora preso in considerazione la fonte luminosa. Come al solito la fonte luminosa è circa in alto a sinistra. Dunque schiariremo il lato sinistro, il fronte e il retro del tetto, mentre lasciamo scuro il lato destro del tetto. Usiamo il colore di luce per il lato sinistro, quello normale di riempimento per fronte e retro e quello di ombra per il destro.

 

Step 8: Ritoccare

Ho appena notato che la parte più bassa non è davvero bella. La cambierò per far sì che i bordi del muro siano tre pezzi separate, con le parti laterali messe sopra il pezzo orizzontale.

Ho cambiato i bordi per fare quello che avevo detto, ho inoltre ombreggiato il pezzo orizzontale verso i bordi. È un po’ meglio. Comunque abbiamo ancora qualcosa da migliorare. La pendenza frontale e quella posteriore non dovrebbero sembrare uguali, giusto? È la prospettiva. Allargheremo di poco la sezione frontale e ridurremo quella posteriore, come nell’immagine.

http://img241.imageshack.us/img241/7369/house8uy0.png

 

Ed eccola, una casa estremamente semplice. Potete usarla come base per case più dettagliate e sofisticate.