Tutorial parallax mapping

[Dexter]

Parallax Mapping

-Acqua animata-

 

1.Introduzione

 

Autore: Dexter

Tool: Rpgmaker VX

Descrizione: Animare l'acqua a photoshop e importarla in rpgmaker.

Necessita: Photoshop, Script "Modern Algebra's animated parallax"

 

2.Tutorial

 

Per comodità dividerò il tutorial in due parti divise in più passaggi. Ecco a voi la prima parte:

 

STEP 1 -Le risorse-

 

Per questo tutorial useremo photoshop, quindi non so se su altri programmi di grafica il procedimento sarà lo stesso... ma penso che sarà decisamente simile.

 

-Apriamo il nostro Photoshop e creiamo un nuovo file. Come dimensioni trattandosi di vx useremo 544x416px. Impostate la mappa con la trasparenza, fatto questo avete pronto il vostro file. Il file che si crea, visibile nel menù a destra dello schermo Layers lo chiameremo Ground.

 

Per seguire al meglio il tutorial vi posto l'acqua e il terreno da me usato:

 

http://img207.imageshack.us/img207/9894/acqua2.png

http://img535.imageshack.us/img535/3058/acquag.png

 

-Dopo aver creato il nostro Ground prendiamo un pezzo d'erba e ricopriamo il layer in modo da formare una distesa d'erba. Come noterete vi si formereanno parecchi layers, quindi cliccate tenendo premuto shift sul primo layer, poi tasto destro mouse>merge layers, in questo modo otterrete un solo layer.

 

Ora abbiamo pronta la nostra base, ma come creare un fiume o un laghetto, rompendo completamente la cubettosità del vx?

 

Ci arriviamo proprio ora! :D

 

Step 2 -L'acqua-

 

-Prendete il file con l'acqua nel primo step e come avete fatto per il ground prendete un pezzo d'acqua e ricoprite tutta l'erba d'acqua in questo modo si formeranno ancora tanti layers, ripetiamo la stessa operazione di prima e uniamo tutti i layers con l'acqua che chiameremo Water.

 

Ora ci troviamo più o meno in questa situazione:

 

http://img856.imageshack.us/img856/710/immaginehz.png

 

(purtroppo non l'ho fatto benissimo io, quindi si vede per ogni fila una righetta più scura blu, ma se lo avete fatto con attenzione il tutto sarà più omogeneo)

 

-Dopo che avete fatto questo, duplicate il layer Water e chiamate il nuovo layer Water top. Fatto questo, scegliete una gomma sfumata con grandezza a piacere, togliete la visibilità al layer Water e sul layer Water top, passate la vostra gomma delineando i contorni del laghetto/fiume.

 

Potreste ottenere una cosa simile:

 

http://img207.imageshack.us/img207/9051/immaginetv.png

 

Per ora direi che possiamo chiudere qua. Il prossimo sarà penso anche l'ultimo tutorial, nel quale tratteremo l'aggiunta dei bordi, l'animazione dell'acqua e importarlo su rpg maker VX.

 

A presto col prossimo tutorial! :D

 

Di seguito scrivete pure per ricevere chiarimenti o per dirmi se tutto è chiaro o se c'è qualcosa da modificare! ^ ^

[Zuppo]

Mi sfugge una cosa. Sostanzialmente metti una mappa di terra sopra all'autitile animato dell'acqua?

[Guardian of Irael]

Ultimamente vanno di moda i tutorial a puntate! XD

^ ^

 

Sembra un buon inizio... il risultato lo avevamo visto (poi posta pure il video! ^ ^)

Bel lavoro! ^ ^

 

  Quote

Mi sfugge una cosa. Sostanzialmente metti una mappa di terra sopra all'autitile animato dell'acqua?

Dovrebbe essere l'acqua sopra la terra mi sa XD

^ ^

[Dexter]

Acqua sopra alla terra Flame! :D

Così si cancella con la gomma attorno al pezzo d'acqua e si riempie la parte di terreno. ^ ^

 

@Guardy: Ok. :P

 

Il risultato che si ottiene alla fine dopo aver animato e importato su rpgmaker potrebbe essere una cosa simile:

 

[Zuppo]

dunque crei una picture di acqua òo e poi la switchi di volta in volta per dare l'effetto animazione, giusto?

Scusa ma non lo hai scritto da nessuna parte.

 

 

(comunque se posti la seconda parte non potrai richiedere ulteriori rens. Ti consiglio di chiedermeli tutti in una botta perchè ora come ora, per quanto sia interessante il tutorial, non è molto chiaro, non ti darei molto.)

[Dexter]

No flame, ma l'animazione è l'ultima cosa e non switcho nulla... si usa uno script! L'acqua la importo come parallax e si capisce trattandosi di parallax mapping.

La prima parte sta nel creare a ps l'acqua con relativo bordo, poi nella seconda vedremo come creare tre frame a ps per importarli come parallax in rpg maker, che poi sono animabili con lo script che ho citato... esattamente qui:

 

  Quote

Necessita: Photoshop, Script "Modern Algebra's animated parallax"

 

Mi sembrava abbastanza chiaro! xD

 

P.S. per i rens chiedo a fine tutorial allora, anche se mi pare che fin ora come spiegazione sia fatta bene... comunque meglio aspettare il tutorial completo! :D

Edited November 6, 2011 by Dexter

[Zuppo]

beh più che altro perchè sto termine parallasse lo avete usato per dire "quando guardi una mappa e la copi". Mo come lo devo reintrerpretare...?XD Che switchi le mappe tramite scripts? Sto cercando de capì come minchia funziona sto affare. XD la parallasse so due cose su un'asse parallela. Non è che capisco bene in che chiave di lettura devo leggere la questione ora. XD

[Dexter]

Cartella parallax... devi leggerlo come immagine! xD

Cioè, quello che faccio io è mettere tre immaggini dell'acqua in tre frame differenti nella cartella parallax, poi mostro il primo frame nell'editor del vx su una mappa. Poi aprendo il test lo script fa il resto, mostrando prima il frame 1, poi il 2, poi il 3.

 

Comunque se aspetti il prossimo tutorial i dubbi sull'rpg maker si risolveranno, ora siamo ancora al photoshop! :P

[Dexter]

Parallax Mapping

-Acqua animata-

 

STEP 3 -Il bordo-

 

Ora che abbiamo creato il nostro laghetto, dobbiamo aggiungerci un bordo.

 

Questo è quello che ho usato io:

http://img210.imageshack.us/img210/548/bordo.png

 

-Prendete il pezzo di bordo e iniziate a incollarlo tutto attorno al laghetto in modo da contornarlo completamente e da formare un nuovo layer che chiameremo Bordo.

 

La situazione che abbiamo adesso è più o meno questa:

http://img207.imageshack.us/img207/8094/bordi.png

 

Fatto questo duplichiamo il layer Bordo e quello che si crea lo chiamiamo Bordo top

 

-Ora togliamo la visibilità al layer Bordo, poi stando sul layer Bordo top prendiamo una gomma e passiamola attorno ai contorni per smussarli e renderli più omogenei.

 

Potreste ottenere un risultato simile:

http://imageshack.us/photo/my-images/526/bordi.png/

 

STEP 4 -Fare l'animazione-

 

Ora dobbiamo creare su photoshop 3 frame per l'animazione.

 

-Duplichiamo il layer Water top per 3 volte, chiamando rispettivamente il layers Frame 1, Frame 2 e Frame 3. Ora togliamo la visibilita ai layers Frame 2 e 3 e al layer Water top e stando sul layer Frame 1 applichiamo il filtro (Filter>Distort) Ocean ripple, sistemato in questo modo:

 

Ripple size: 2

 

Ripple magnitude: 1

 

Fatto questo togliamo la visibilità al layer Frame 1 e rendiamo visibile il Frame 2, così da applicare ad esso lo stesso filtro in questo modo:

 

Ripple size: 4

 

Ripple magnitude: 1

 

Finito questo facciamo la stessa cosa per il terzo frame e applichiamo il filtro in questo modo:

 

Ripple size: 6

 

Ripple magnitude: 1

 

 

 

STEP 5 -Rpg maker-

 

Ora salviamo i 3 frames della nostra acqua come PNG e li chiamiamo M_1, M_2 e M_3.

 

Ora assicuratevi di avere l'apposito script Modern Algebra's animated parallax... per questo tutorial ho usato la versione 1.0, che vi posto di seguito:

 

 

  Reveal hidden contents

#=============================================================
=================
#  Animated Parallax
#  Version 1.0
#  Author: modern algebra (rmrk.net)
#  Date: September 27, 2008
#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
#  Instructions:
#    
#    The script operates by having multiple parallax backgrounds and switching
#   between them at the interval set by $game_map.parallax_animation_frames
#    Thus, if you want to use an animated parallax, you need to do a few things:
#      (a) Make or find the parallax backgrounds you want to use and import 
#        them into your game. Then, label them all the same with the one
#        distinction that at the end of each should have a _1, _2, etc...
#          Example Naming:
#            BlueSky_1, BlueSky_2, BlueSky_3, etc...
#      (b) Set the parallax background to any given map that you want the 
#        animated parallaxes for. Be sure to set it to the first one you want
#        in succession, so BlueSky_1, not BlueSky_2 or _3. If you do set it to
#        BlueSky_2, then it will only animate between images _2 and _3.
#      © Scroll down to Line 36 and follow the instructions for setting 
#        the animation speed
#==============================================================================
# ** Game_Map
#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
#  Summary of Changes:
#    new method - parallax_animation_frames
#==============================================================================

class Game_Map
 #~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 # * Parallax Animation Frames
 #~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 def parallax_animation_frames
   frames = case @map_id
   #++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
   #     EDITABLE REGION
   #``````````````````````````````````````````````````````````````````````
   #  Basically, this method determines how many frames there are between
   # switching parallaxes. So, if you set it to 20, then it will switch
   # to next parallax in the animation every 20 frames. 
   #
   #   To do this, place this code below:
   #     when map_ID then frame_num
   #
   #   So:
   #     when 2 then 20
   #
   #   means that on Map 2, the parallax will switch to the next one 
   #  every 20 frames. There are 60 frames in a second.
   #++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
   # For Map 2
   when 2 then 10
   # For Map 8
   when 8 then 40
   #++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
   #      END EDITABLE REGION
   #++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
   else
     # Default if Map not set and the parallax is animated
     10
   end
   return frames
 end
end

#==============================================================================
# ** Spriteset_Map
#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
#  Summary of Changes:
#    overwritten methods - create_parallax, dispose_parallax, update_parallax
#==============================================================================

class Spriteset_Map
 #~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 # * Create Parallax
 #~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 def create_parallax
   # Initialize with one plane
   @parallax = []
   @active_parallax = 0
   @frame_count = 0
 end
 #~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 # * Dispose of Parallax
 #~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 def dispose_parallax
   @parallax.each { |plane| plane.dispose }
   @parallax.clear
 end
 #--------------------------------------------------------------------------
 # * Update Parallax
 #--------------------------------------------------------------------------
 def update_parallax
   if @parallax_name != $game_map.parallax_name
     @parallax_name = $game_map.parallax_name
     if !@parallax.empty?
       # Delete previous bitmap
       @parallax.each { |plane| plane.bitmap.dispose }
       @parallax.each { |plane| plane.bitmap = nil }
       @parallax.clear
     end
     if @parallax_name != ""
       name = @parallax_name.dup
       loop do
         # Make a new plane
         plane = Plane.new (@viewport1)
         plane.z = -100
         plane.visible = false
         begin
           # Set the bitmap to the name
           plane.bitmap = Cache.parallax (name)
         rescue
           plane.dispose
           break
         end
         @parallax.push (plane)
         if name.slice! (/_(\d+)$/) != nil
           frame = ($1.to_i + 1).to_s
           name += "_#{frame}"
         else
           break
         end
       end
       @active_parallax = 0
       @parallax[0].visible = true unless @parallax[0].nil?
     end
     @parallax_animation_frames = $game_map.parallax_animation_frames
     Graphics.frame_reset
   end
   return if @parallax.empty?
   ox = $game_map.calc_parallax_x(@parallax[0].bitmap)
   oy = $game_map.calc_parallax_y(@parallax[0].bitmap)
   @parallax.each { |plane| plane.ox = ox }
   @parallax.each { |plane| plane.oy = oy }
   return if @parallax.size < 2
   # Animate Parallax
   @frame_count += 1
   if @frame_count % @parallax_animation_frames == 0
     # Switch visible Parallax
     @parallax[@active_parallax].visible = false
     @active_parallax = (@active_parallax + 1) % @parallax.size
     @parallax[@active_parallax].visible = true
   end
 end
end

 

 

Se non lo avete importatelo in rpg maker sotto a Materials. Fatto questo salvate i frame (M_1, M_2 e M_3) nell'apposita cartella parallax. Ora create una mappa di dimensioni standard, impostate il parallax M_1 e rendetelo visibile nell'editor. Ora avviate il test e godetevi la vostra acqua animata.

 

Come postato in precedenza, questo è il video per chi volesse vedere il risultato finale:

 

Grazie a tutti per aver seguito il tutorial, spero che sia stato utile! :D

Edited November 6, 2011 by Dexter

[Guardian of Irael]

Ed ecco l'ultima parte :D

Mmmh un po' perplesso per il bordo inferiore, che data la visuale dovrebbe essere coperto, ma visto che non è proprio ripido ripido dà un po' l'effetto di discesa...

^ ^

 

Pensavo... se al posto dello script usi un processo parallelo con aspetta-cambiabackground alternati... non ottieni lo stesso effetto? :D Lagga oppure ci son altri problemi?

^ ^

[LazyFox]

bel tutorial dex :D devo ancora leggere l'ultimo pezzo, lo ammetto ma mi sembra davvero utile.

 

  Quote

Pensavo... se al posto dello script usi un processo parallelo con aspetta-cambiabackground alternati... non ottieni lo stesso effetto? :D Lagga oppure ci son altri problemi?

^ ^

 

penso che come script è sempre meglio perchè come dici tu di solito laggano con gli eventi paralleli.

scusate se per caso ho detto una cassata

[Dexter]

Ma erro o non c'è un comando per cambiare parallax? O_O

 

O sono nabbo io, ma non mi pare esista! Esiste? X°°Dù

 

 

@Big: grazie! :D

Edited November 6, 2011 by Dexter

[Guardian of Irael]

Ah no, c'è solo nell'XP, nel VX l'hanno tolto allora! O almeno non lo vedo! XD

^ ^

[Dexter]

Va bhe, allora però sappiamo che questo tutorial può essere adattato all'xp tramite eventi. Potrei fare una continuazione di questo tutorial adattandola pure a xp! :D

[Holy87]

Ma non sarebbe più comodo usare le maschere di livello, anzichè le gomme?

[Keroro]

Sono un niubbo totale di photoshop, che strumenti devo utilizzare per riempire il layer 1 di erba e il layer 2 di acqua?

[giver]

Pennelli (abr) o pattern, con qualunque strumento di disegno/riempimento, direi . . .

[Keroro]

Perfetto, non sapevo ci fossero i pattern :O

Resto in difficoltà nell'applicare il bordo, ho provato a definire una selezione del bordo come pennello predefinito, ma me lo stampa nero, non colorato o.o

[Guardian of Irael]

Kero considera che google di tutorial è pieno, se vuoi ottenere un effetto migliore di acqua ed erba ti consiglio di usare uno di quei tutorial, spiegano passo passo, magari ci impieghi di più, ma con un po' di pratica puoi ottenere di più che dà un semplice texture! ^ ^

[giver]

  On 4/10/2012 at 1:22 PM, Keroro said:

Perfetto, non sapevo ci fossero i pattern :O

Resto in difficoltà nell'applicare il bordo, ho provato a definire una selezione del bordo come pennello predefinito, ma me lo stampa nero, non colorato o.o

Probabilmente perchè i pennelli "di solito" sono dei pattern grayscale, dove il nero rappresenta l'opacità piena ed il bianco la "trasparenza" piena, applicati/"addizionati" al colore selezionato per disegnare . . .

 

N.B.: Dovrebbero esistere anche funzioni di riempimento frattale, ma forse poi diventa troppo fotorealistico . . .

I tutorial per Photoshop vanno bene pure per chi, come me, usa The GIMP . . . Va comunque ricordato che nessuno dei due è ideale per la pixel art . . .

[Guardian of Irael]

  Quote

Va comunque ricordato che nessuno dei due è ideale per la pixel art . . .

Più che vero!

In quel caso consiglierei questo qui! ^ ^

[Keroro]

Grazie giver :)

 

Aver imparato in un giorno ad usare i livelli, i pattern, la gomma e la maschera di livello mi sembra un grande passo avanti XD

Il mio obiettivo attuale è imparare ad usare photoshop/gimp per creare panorami e questo sembra il tutorial adatto.

@Guardian. Per la pixel art sono negato, quel tutorial l'ho seguito anni fa, tante ore buttate nel nulla.. (Ieri sera ho installato graphic gales e sono venute fuori delle robe orribili XD)

Tornando in tema, ho capito che il bordo lo devo piazzare copia-incollando e spostandolo, adesso cerco con quale strumento è possibile ruotarlo, l'unica cosa che non mi torna è: basta solo la gomma per far amalgamare il bordo?

[Guardian of Irael]

Capisco per la pixel art! D: E va beh tutto photoshoppato è bello uguale! XD

Per il bordo intendi quello di varie texture accostate insieme che deve rimanere uniforme senza tagli? Mmmh non so se solo con la gomma riescia d ottenere un buon effetto, ci vorrebbe un lavoro a mano per far quadrare il tutto! ^ ^

[Dexter]

Allora, intanto sono contento che il tutorial ti sia d'aiuto! :D

 

Per il tuo problema riguardante il bordo:

 

Io personalmente copio e incollo attorno alla parte delineata dall'acqua e fatto questo usando gomme di diversa grandezza/sfumatura smusso gli angoli rendoli omogenei agli altri layers. Non sto nemmno a girarli, mi limito a riempire seguendo i contorni che ho disegnato con l'acqua.

Purtroppo però io non sono esperto di programmi di grafica, diciamo che quello che ho fatto l'ho fatto ad inventiva, insomma ho provato ad arrangiarmi... se cerchi su google o siti stranieri troverai di certo tutorial più specifici. ^ ^

[HumHayAru]

Bene, bene, bene! Non mi ero accorto di questo tutorial! xD

 

Mi sembra ben fatto, è scritto abbastanza chiaro. Pensare che lo screen che ho postato nell'ultimo screen contest l'ho fatto tutto in parallasse cercando di capire quali potessero essere gli strumenti e i metodi da usare xD in quanto non sapevo (e non so) usare PS. L'avessi visto prima, ci avrei messo giusto 4-5 ore in meno

 

Volevo chiederti una cosa, visto che comunque tu l'hai scritto nel tutorial, come rendo l'immagine visibile anche durante l'editor? Perchè a me comparivano i quadrati neri e blu e ho dovuto piazzare i chara uno a uno avviando sempre il test per capire dove li avessi messi.