Tutorial parallax mapping 2

[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.images...9894/acqua2.png
http://img535.images...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.images.../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.images.../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! ^ ^

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:

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

Modificato da Dexter, 06 November 2011 - 16:41 PM.

[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.images...0/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.images.../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.../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:

Spoiler

#==============================================================================#  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  endend#==============================================================================# ** 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  endend

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

Modificato da Dexter, 06 November 2011 - 19:43 PM.

[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.

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

Modificato da Dexter, 06 November 2011 - 20:20 PM.

[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]

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 . . .