Воссоздайте 2D эффект боковой волны из игры Worms

11

Я пытаюсь воссоздать эффект волн / воды от червей (см. Здесь http://youtu.be/S6lrRqst9Z4?t=31s ) Из того, что я понимаю, на самом деле это не спрайт, а процедурно генерируемый чем-то вроде синусоидальной волны.

Кто-нибудь создал что-то подобное раньше? или есть идеи как мне это сделать?

Ciarán
источник

Ответы:

14

Да, вы правы, этот 2D эффект воды можно смоделировать с помощью математической функции синуса :

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

введите описание изображения здесь

  • phase константа, ставь все что хочешь.
  • установить tгоризонтальное положение обрабатываемого пикселя / вершины:t = x;
  • изменяться amplitudeсо временем (это заставит волны двигаться вверх и вниз):

    amplitude = sin(t * wave_speed) * wave_height

  • объедините несколько волн, чтобы получить более эффектный эффект:

    wave_final = wave0 + wave1 + ... ,

    Для каждой волны немного измените некоторые параметры (например: фаза, частота, ...).

Вот быстрый пример, который я сделал, используя только две волны:

http://glslsandbox.com/e#4988.0 (требуется недавний браузер и включенный WebGL)

ПРИМЕЧАНИЕ: это шейдер, но для этого используются 2D примитивы.

РЕДАКТИРОВАТЬ: вы не указываете какие-либо рамки или 2d системы рендеринга, но вот как это может быть визуализировано с использованием полигонов / треугольных полос:

введите описание изображения здесь

tigrou
источник
Вау, это потрясающий ответ, спасибо за очень полный ответ. Да, я использую HTML5 Canvas API для рендеринга. Еще раз спасибо за это, очень полезно!
Ciarán
Правильно, хотя волны в червях явно не просто синусы, а более сложные; очень возможно просто суперпозиции синусов.
leftaroundabout
1
@leftaroundabout - Технически , каждая волновая функция на самом деле является просто суперпозицией бесконечного числа синусов. Практически это все еще верно, но более грубые приближения могут облегчить вашу жизнь.
Поддельное имя