Ricreare l'effetto wave laterale 2D dal gioco Worms


Risposte:


14

Sì, hai ragione, questo effetto acqua 2D può essere simulato usando la funzione seno sinusoidale :

wave = sin(phase + t * frequency) * amplitude

inserisci qui la descrizione dell'immagine

  • phase è una costante, metti quello che vuoi.
  • impostato tsulla posizione orizzontale di pixel / vertice che si sta elaborando:t = x;
  • cambia amplitudenel tempo (che farà muovere le onde su e giù):

    amplitude = sin(t * wave_speed) * wave_height

  • combina diverse onde per ottenere un effetto più elastico:

    wave_final = wave0 + wave1 + ... .

    Per ogni onda, modificare un po 'alcuni parametri (ad es. Fase, frequenza, ...).

Ecco un breve esempio che ho fatto, usando solo due onde:

http://glslsandbox.com/e#4988.0 (richiede browser e abilitazione WebGL recenti)

NOTA: questo è uno shader, ma farlo usando primitive 2D è lo stesso approccio.

EDIT: non si specifica alcun framework o sistema di rendering 2d, ma ecco come potrebbe essere renderizzato usando poligoni / strisce triangolari:

inserisci qui la descrizione dell'immagine


Wow, questa è una risposta fantastica, grazie per la risposta molto completa. Sì, sto usando l'API HTML5 Canvas per il rendering. Grazie ancora per quello, estremamente utile !!
Ciarán,

A destra, anche se le onde a Worms sono chiaramente non soltanto seni ma più complesso; molto probabilmente solo sovrapposizioni di seni.
circa il

1
@leftaroundabout - Tecnicamente interviene , ogni funzione d'onda è in realtà solo una sovrapposizione di un numero infinito di seni. In pratica, questo è ancora vero, ma approssimazioni più grossolane potrebbero semplificarti la vita.
Nome falso
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.