Recréez l'effet d'onde latérale 2D du jeu Worms


11

J'essaie de recréer l'effet vagues / eau de Worms (voir ici http://youtu.be/S6lrRqst9Z4?t=31s ) D'après ce que je comprends, ce n'est pas vraiment un sprite, son généré de manière procédurale par quelque chose comme une onde sinueuse.

Quelqu'un a-t-il déjà créé quelque chose comme ça? ou une idée de la façon dont je procéderais?

Réponses:


14

Oui, vous avez raison, cet effet 2D de l'eau peut être simulé en utilisant la fonction sinus mathématique :

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

entrez la description de l'image ici

  • phase est une constante, mettez ce que vous voulez.
  • définir la tposition horizontale du pixel / sommet que vous traitez:t = x;
  • changer au amplitudefil du temps (ce qui fera monter et descendre les vagues):

    amplitude = sin(t * wave_speed) * wave_height

  • combiner plusieurs vagues pour obtenir un effet plus relastique:

    wave_final = wave0 + wave1 + ... .

    Pour chaque onde, modifiez un peu certains paramètres (ex: phase, fréquence, ...).

Voici un exemple rapide que j'ai fait, en utilisant seulement deux vagues:

http://glslsandbox.com/e#4988.0 (nécessite un navigateur récent et WebGL activé)

REMARQUE: il s'agit d'un shader, mais cela en utilisant des primitives 2D est la même approche.

EDIT: vous ne spécifiez aucun framework ou système de rendu 2D, mais voici comment il pourrait être rendu en utilisant des polygones / bandes triangulaires:

entrez la description de l'image ici


Wow, c'est une réponse impressionnante, merci pour la réponse très complète. Oui, j'utilise l'API HTML5 Canvas pour le rendu. Merci encore pour cela, extrêmement utile !!
Ciarán

Oui, bien que les vagues de Worms ne soient clairement pas simplement sinusoïdales mais plus complexes; très probablement juste des superpositions de sinus.
leftaroundabout

1
@leftaroundabout - Techniquement , chaque fonction d'onde n'est vraiment qu'une superposition d'un nombre infini de sinus. Pratiquement, cela est toujours vrai, mais des approximations plus grossières peuvent vous faciliter la vie.
Fake Name
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.