Parallax Mapping n.1 + New: effetti luce!!

[Dexter]

Tutorial parallax n.1

Introduzione

Autore: Dexter
Tool: Rpg maker VX-Ace (adattabile a tutti i tool)
Descrizione: mappare in parallax partendo da una mappa semplice con le rtp del vx ace
Necessita: rtp vx ace, celianna parallax tiles, photoshop (o qualunque altro programma di grafica)

Tutorial

Creiamo una mappa semplice con il vx ace, ci basterà creare la base su cui poi costruire il vero screen, scegliete il terreno e create il vostro background, che può essere di qualunque tipo, potete rappresentare un'interno o un esterno a vostro piacimento... per questo primo tutorial inizieremo a mappare un esterno, anche perchè oltre al fatto che trovo li trovo più facili da rappresentare possono mettere in mostra meglio le qualità del parallax mapping.

Possiamo partire da una mappa semplice e anche mappata non tanto bene, non serve assolutamente aggiungere dettagli, quello verrà fatto solo dopo su photoshop.

http://img841.imageshack.us/img841/4959/fbkr.png

Io per esempio sono partito da questa mappa, ora la apriremo con photoshop e inizieremo a dettagliarla al meglio... ma prima vengono alcune cose importanti, in primis la grafica da utilizzare (io mi sono servito dei tiles per il parallax fatti da celianna, sono facilmente reperibili in rete) e poi ci sono delle cose tecniche da fare prima di arricchire di elementi questa base.

Create un file 32x32 su PS e con lo strumento matita di un colore bello visibile contornate i bordi, successivamente andate in edit > define pattern e create un pattern che dovrebbe avere più o meno questa grafica:

http://img823.imageshack.us/img823/3453/qm7f.png

ora aprite la vostra mappa su photoshop e con lo strumento per disegnare i pattern (e con il pattern appena creato) riempite un nuovo layer con sfondo invisibile... dovreste trovarvi in questa situazione:

http://img59.imageshack.us/img59/527/xyxb.png

Questo passaggio serve per posizionare i vostri oggetti secondo la scacchiera di rpg maker, in modo che la mappa sia utilizzabile una volta importata nel tool.

Ora possiamo finalmente andare ad aggiungere dettagli... per prima cosa parto aggiungendo degli alberi che faranno da contorno a un piccolo sentiero:

http://imageshack.us/a/img822/2060/m8ft.png

Ancora sembra molto vuota ed effettivamente lo è, ma ora sappiamo che struttura vogliamo dare allo scenario e tutto sarà più facile. Per prima cosa possiamo iniziare ad aggiungere altri alberi di tipo diverso per infoltire e variare un po' la boscaglia:

http://img189.imageshack.us/img189/8899/9kqp.png

Già inizia a diventare molto meglio, ma siamo ancora lontani dall'ottenere un buon risultato... un'idea per variare potrebbe essere quella di cambiare colorazione alle chiome di alcuni alberi, rendendole più arancioni o gialle per simulare le foglie secche. Potete vedere di ottenere l'effetto in vari di modi, ad esempio andando in image > adjustments > hue/saturation (oppure color balance) vedete voi con quale comando vi trovate più comodi, altrimenti potete usare dei pennelli... io per oggi userò il primo metodo.

http://img163.imageshack.us/img163/3645/bw4l.png

Oltre agli alberi ho modificato anche leggermente la colorazione del terreno (sempre con il metodo sopra).
Fatto questo possiamo finalmente passare ad aggiungere altri elementi... per prima cosa penso che aggiungerò nella parte alta vicina all'altura una piccola casa:

http://img196.imageshack.us/img196/5200/xmo.png

La base si può considerare finita, ora andiamo ad aggiungere tutti i vari elementi che mancano per arricchire un bel paesaggio:

http://img855.imageshack.us/img855/6770/hwyi.png

Una volta che siamo convinti del risultato possiamo passare al terreno, bisognerà aggiungere un sentiero e poi arricchire il sottobosto con pianticelle, rocce e moltre altre cosine :3
Per prima cosa creiamo un pattern con la grafica del sentiero che vogliamo usare:

http://img708.imageshack.us/img708/6316/k3oe.png

A questo punto possiamo andare a stenderla con lo strumento pattern sulla base della mappa:

http://img23.imageshack.us/img23/7879/xujp.png

Ho usato una lieve sfumatura del terreno per non dare troppo lo stacco dall'erba, ma in questo modo il sentiero rimane troppo sfumato e non legato, ma non è un probelma, ora userò dei tile d'erba per legare tutto meglio e rendere anche più discontinuo il terreno:

http://img855.imageshack.us/img855/6563/6518.png

Ora possiamo andare ad eleminare le zone d'erba dove vogliamo far risaltare maggiormente il sentiero e poi possiamo passare ad aggiungere tutti gli elementi naturali che mancano per completare lo screen.
Dopo un po' di lavoro potete ottenere qualcosa di simile:

http://img855.imageshack.us/img855/2029/i3wt.png


Il tutorial per ora è terminato, nel prossimo vederemo come aggiungere effetti luce e altre chicche e soprattutto come importare la mappa in rpg maker e renderla funzionante al meglio :D

A presto ^ ^

 

Aggiornamento

Nuova parte del tutorial: http://www.rpg2s.net/forum/index.php/topic/17540-parallax-mapping-n1-new-effetti-luce/?do=findComment&comment=322749
 

Edited August 25, 2013 by Dexter

[Soul Eater]

Ottimo tutorial, bravo!

Molto bello lo screen finale

[Haru]

Bel tutorial ^ ^ Continua ti prego, mi interessa questo genere di mapping. Quanto tempo ci si mette a costruire una mappa di solito? Si possono fare anche mappe più grandi della base?  :smile:

[Lusianl]

Bello veramente.

Peccato che il mapping parallax faccia a botte con il game play.Difficile raggiungere il ponticello eh?

[AsprusT26]

Buon tutorial, Dexteruccio

Ho notato che il forum scarseggia di tutorial per il parallaxing di base, è un problema. Questo è ben fatto

 

 

Bel tutorial ^ ^ Continua ti prego, mi interessa questo genere di mapping. Quanto tempo ci si mette a costruire una mappa di solito? Si possono fare anche mappe più grandi della base?  :smile:

 

Ti posso rispondere io. Il tempo impiegato da mappa a mappa varia, naturalmente, dalla complessità della mappa che vuoi fare. Un oscuro e corroso castello del male inondato di pioggia avrà bisogno di qualche ora ininterrotta. Questa mappa è relativamente semplice, penso che un'oretta sarà andata via nel farla, comunque. 

Mappe più grandi della base sì, si possono fare, purché la grandezza del panorama sia identica alla grandezza della mappa, in pixel, ricavabili con la formula (numero di tile in altezza*32)*(numero di tile in larghezza*32).

[Haru]

Grazie AsprusT26 ^ ^

[Dexter]

Per questa mappa ho impiegato 20 minuti, ma come detto da Asprus tutto dipende dal tipo di mappa e dalla grandezza... di solito quando si mappa in questo modo si preferisce tenere misure di mappe medio piccole perchè sono più facili da riempire e portano via meno tempo, ma nulla vieta di mappare zone più vaste :D

 

Comunque spero che il tutorial sia utile e ne farò altri molto presto ^ ^

[AsprusT26]

Venti minuti! Mi sbagliavo di gran lunga.

Suppongo che se ad un certo punto della tua carriera ne hai fatto qualche centinaio, il procedimento si velocizza (Vero, creatore di Dreams? ).

Beh, l'oretta che ho detto vale per la mia capacità. XDD

[Dexter]

bhe ne ho fatte parecchie per arrivare a metterci tempi decenti effettivamente X°°D

 

Vero, creatore di Dreams?

 

Vi stupiremo ben presto :**

[Guardian of Irael]

Ah ecco il tutorial che non voleva essere postato! XD

 

Magimagnifico, spiega passo passo la parte photoshopposa del parallax con tanto di immaginette, ottimo lavoro! :3

 

In attesa di seconde puntate e...

 

Vi stupiremo ben presto :**

D:

[Dexter]

Effetti luce :3

In questa seconda parte del tutorial vedremo come aggiungere effetti luce al nostro screen e renderlo più gradevole!
Ci sono vari metodi per realizzare discreti effetti luce, oggi inizieremo con un metodo piuttosto semplice ma a mio parere sempre efficace... tutto ciò che ci servirà saper utilizzare sono: i layer di photoshop, lo strumento di selezione poligonale, il secchiello e i gradienti.
 
Eravamo rimasti in questa situazione:
 

http://img545.imageshack.us/img545/9923/30z.png

 
Ora ci basterà creare un altro layer, ma prima di partire in quarta con gli effetti luce dobbiamo decidere bene se vogliamo rappresentare uno screen diurno o notturno e dobbiamo decidere l'intensità degli effetti. In questo tutorial realizzerò sia degli effetti luce per la notte che per il giorno e vedremo la differenza.
 
Giorno:
 
Riempiamo il nuovo layer con il secchiello utilizzando un colore giallo/arancione, successivamente impostiamo l'opacità del layer su 10% o 15% massimo, dipende da quanto volete rendere intensa la luce.
In questo modo dovreste ottenere qualcosa di simile:

http://img547.imageshack.us/img547/3455/kojh.png

Ora dobbiamo decidere da dove far provenire i raggi del sole e io ho optato per farli venire da in alto a sinistra... ora ci basterà con la selezione poligonale tracciare il contorno dei nostri raggi:

http://img547.imageshack.us/img547/896/fy5t.png

Poi su un nuovo layer con lo strumento per i gradienti tracciate la sfumatura che volete per il raggio dentro ai confini della selezione, ovviamente potete ripetere il procedimento per tutti gli altri raggi e potreste ottenere qualcosa di simile:

http://img824.imageshack.us/img824/6972/wtcs.png

Ora potete abbassare l'opacità dei raggi a seconda dell'intensità che volete dargli, io di solito uso tra il 50% e il 70%, ma questa è una scelta personale... comunque fatto questo, la luce emanata dai raggi è ancora molto grezza, quindi con una tattica molto semplice rendiamo la luce più diffusa.
Andiamo in filter > blur > gaussian blur e impostate la sfocatura che volete, in questo caso la migliore dovrebbe essere tra 3,5 e 4,5... vedete un po' voi l'effetto come rende.

Ecco ora che abbiamo ottenuto una luce più tenue e diffusa il tutto è quasi completo:

http://img856.imageshack.us/img856/3377/tqa3.png

Ora potete decidere se lasciare così i raggi o se modificarli ulteriormente in due modi possibili...
prima di tutto cliccate col tasto destro sul layer con i raggi di luce e andate in blending options, qui avete due comandi utili potete decidere se spuntare outer glow o inner glow. Il primo renderà molto più luminosi i vostri raggi mentre il secondo li schiarirà leggermente, vedete voi quale fa al caso vostro.

Qui per esempio ho impostato un outer glow con opacità 55%:

http://img62.imageshack.us/img62/2541/n8eu.png

Però non osate pensare che la pacchia sia finita... ora come minimo dobbiamo aggiungere delle ombre degne degli effetti luce, almeno agli oggetti più grandi e visibili. Non è necessario che tutti gli oggetti abbiano un'ombra adeguata alla direzione dei raggi ma quelli che risaltano più agli occhi sicuramente sì. Quindi partiamo con l'ombra della casa, andiamo a riprendere il layer in cui avevamo creato la nostra casetta, duplichiamolo (tasto destro > duplicate layer), e spostiamo il layer doppione subito sotto il layer degli effetti luce.

Adesso tasto destro sul layer doppione > blending options > color overlay, spuntate l'opzione e impostate il colore sul nero.
 
Ora sempre rimanendo su questo nuovo layer andate su edit > trasform > flip horizontal a questo punto sempre sulle trasformazioni cliccate su rotate e posizionate l'ombra della casa nella posizione che preferite, ovviamente seguendo il più possibile la traiettoria dei raggi... vi dovrebbe uscire una cosa simile:
 

http://img46.imageshack.us/img46/2844/5dhq.png

 
Adesso fate tasto destro sul layer > convert to smart object e siete pronti a cambiare l'opacità del layer per rendere visibile il terreno sotto... io l'ho impostata su 30% ma vedete voi. A questo punto spostate il layer sotto la casa e sotto a tutti quegli oggetti che devono essere scuriti dall'ombra e l'effetto che potrete ottenere è qualcosa del genere:
 
http://img90.imageshack.us/img90/6733/qud.png

Ecco il risultato ;D
Spero che il tutorial vi sia piaciuto e a presto con quello notturno ^ ^

Comunque grazie a tutti per i complimenti vari, speriamo che qualcuno utilizzi i miei tutorial per i propri progetti perchè sono qui apposta :*

[Final Andrea]

Ottimo! Davvero un bel tutorial, complimenti.

[Testament]

ma i chara, a tutto questo, come reagiscono? ombre e luci vanno messe come picture SOPRA ai chara o tutto rimane schiacciato sul panorama?

[Dexter]

Tutto va messo sopra ai chara, quindi si possono inserire come picture oppure esistono script che creano delle sorte di layer in rpg maker e tu puoi decidere in che layer sopra o sotto l'eroe inserire determinate cose ^ ^

[Guardian of Irael]

Ah ecco il secondo sulle luci! ^ ^

 

Due cose:

1. non sarebbe male consigliare tali script e spiegare un attimo la questione layer per avere le luci sopra.

2. link nel primo post al messaggio con la seconda parte.

^ ^

[Dexter]

Ovviamente spiegherò tutto per bene di come va usato in rpg maker, ma piano piano si fa tutto, prima lavoriamo sulla resa in photoshop poi passo alla parte che riguarda il tool :D

 

Dopo infilo il link nel primo post XD

[AsprusT26]

Si può impostare tramite evento sul tool che se il PG va a finire sopra l'ombra della casa, la sua grafica viene cambiata con una più "oscurata".

Il problema rimane quello dei raggi di luce, tuttavia. Una picture dei raggi, che sono "sfumati" con lo sfondo, ha questo problema: il PG che ci cammina sotto, cammina sotto anche alla parte di terreno mostrata nella picture. Cosa penseresti vedendo il tuo PG con una striscia di erba che gli passa sopra?

 

Naturalmente, questo è un problema che sussiste soltanto nelle versioni vecchie del tool (il mio povero 2k3 ç_ç)

Con i nuovi tool, il problema è risolto via script e blah blah.

[Dexter]

No ti sbagli... crei una picture con raggi e effetti luce e basta che mostri nella mappa sopra a tutto, il parallax invece è incollato a terra, quindi il pg sta sotto solo alla luce e questo vale per qualunque tool, non sono necessari script ^ ^

[Guardian of Irael]

Ah ottimo, credevo fossero solo 2 parti! XD

^ ^

[AsprusT26]

No, non hai capito. I raggi sono "sfumati", no? Quindi, i loro bordi si confondono con il terreno sottostante, una volta appiattiti tutti i layer (e questo è indispensabile per il 2k3, che non legge immagini con multi-layer, che io sappia). Ora, a meno che i tuoi raggi non abbiano i bordi "rigidi" non sfumati, inevitabilmente la tua picture dovrà avere anche quella parte in cui i bordi dei raggi sono sfumati col terreno. E sotto quella parte, il tuo PG deve camminare.

Per capirci, ecco come dovresti importare la tua immagine sul 2k3:

 

http://imageshack.us/a/img27/8772/uuqy.png

 

(Grezza per forza, l'ho fatta in due secondi)

In questo caso è il sentiero che è nella picture, e sotto quello il PG camminerà. Se non ci fosse quella parte, i raggi non sarebbero "sfumati" e sarebbero più grezzi e inguardabili.

 

In questo caso, nel 2k3 si risolve così:

 

http://imageshack.us/a/img35/6477/lnv.png

 

Ossia, con una picture SENZA trasparenza, bloccata a 160*120, con un'opacita sopra al 50%, non spostabile su mappa ma che segue il PG. Così i raggi solari seguono sempre il PG e si risolve la questione. In questo caso, non si devono fare i raggi solari nel panorama, ma solo le ombre.

[Dexter]

Quello che intendo è esattamente il secondo metodo, mi spiego meglio... fai un panorama senza alcun effetto luce che appiccichi sulla mappa di rpg maker, sopra alla mappa mostri invece una picture diversa con i raggi e l'effetto luce che in questo modo sta sopra al panorama e all'eroe. Per quel che riguarda il 2k3 devi importare come dici la picture senza trasparenza e modificarla dal tool, ma alla fine il procedimento è quello.

 

Edit per Guardy: Andrò avanti ad aggiornare il tutorial in continuazione finchè non è ben chiaro il mapping in parallax di base, poi magari inizierò con tutorial su cose più complesse, magari creare una mappa completamente in parallax senza affidarsi al programma o comunque a fare paesaggi più articolati ecc.ecc. insomma tante belle robine :3

Edited August 25, 2013 by Dexter

[AsprusT26]

Ah, ho capito.

[Haru]

Ottimo ^ ^ è già uscita la seconda parte ^ ^

[KenzaMe92]

aspetto la parte più interessante, quella pratica sul tool.

[Zuppo]

Dex, ti capiterà di continuare questo tutorial o mi sono già perso la seconda parte :3?