Erstellen Sie einen 2D-Side-On-Welleneffekt aus dem Worms-Spiel neu

Antworten:

14

Ja, Sie haben Recht, dieser 2D-Wassereffekt kann mithilfe der mathematischen Sinusfunktion simuliert werden :

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

Geben Sie hier die Bildbeschreibung ein

  • phase ist eine Konstante, setzen Sie, was Sie wollen.
  • Satz tin die horizontale Position der Pixel / Vertex Sie verarbeiten:t = x;

  • im amplitudeLaufe der Zeit ändern (dadurch bewegen sich die Wellen auf und ab):

    amplitude = sin(t * wave_speed) * wave_height

  • Kombinieren Sie mehrere Wellen, um einen relastischeren Effekt zu erzielen:

    wave_final = wave0 + wave1 + ... .

    Ändern Sie für jede Welle einige Parameter ein wenig (z. B. Phase, Frequenz, ...).

Hier ist ein kurzes Beispiel, das ich mit nur zwei Wellen gemacht habe:

http://glslsandbox.com/e#4988.0 (aktueller Browser und aktiviertes WebGL erforderlich)

HINWEIS: Dies ist ein Shader, aber dies mit 2D-Grundelementen zu tun, ist der gleiche Ansatz.

BEARBEITEN: Sie geben kein Framework oder 2D-Rendering-System an, aber hier ist, wie es mit Polygonen / Dreiecksstreifen gerendert werden könnte:

Geben Sie hier die Bildbeschreibung ein

Tigrou
quelle
Wow, das ist eine großartige Antwort, danke für die sehr umfassende Antwort. Ja, ich verwende HTML5 Canvas API zum Rendern. Nochmals vielen Dank dafür, sehr hilfreich!
Ciarán
Richtig, obwohl die Wellen in Worms eindeutig nicht nur Sinus, sondern auch komplexer sind; sehr wahrscheinlich nur Überlagerungen von Sinus.
links um den
1
@leftaroundabout - Technisch gesehen ist jede Wellenfunktion wirklich nur eine Überlagerung einer unendlichen Anzahl von Sinus. Praktisch ist dies immer noch wahr, aber gröbere Annäherungen können Ihr Leben leichter machen.
Gefälschter Name