Відновіть 2D-бічний хвильовий ефект із гри Worms


11

Я намагаюся відтворити ефект «хвилі / вода» від «Черв’яків» (див. Тут http://youtu.be/S6lrRqst9Z4?t=31s ). З того, що я розумію, його насправді не спрайт, його процедурно породжений чимось на кшталт хвилі гріха.

Хтось створював щось подібне раніше? або будь-яка ідея, як я б про це пішов?

Відповіді:


14

Так, ви праві, цей двовимірний ефект води можна змоделювати за допомогою функції математичної синусоїди :

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-рендерінгу, але ось, як це могло бути відображено за допомогою полігонів / трикутників:

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


Нічого, це приголомшлива відповідь, дякую за дуже вичерпну відповідь. Так, я використовую HTML5 Canvas api для візуалізації. Ще раз дякую за це, надзвичайно корисно !!
Ciarán

Правильно, хоча хвилі у Черв'яків явно не просто синуси, а складніші; Можливо, просто супозиції синусів.
близько

1
@leftaroundabout - Технічно , , кожна хвильова функція дійсно просто суперпозиція нескінченного числа синусів. Практично це все-таки так, але більш грубі наближення можуть полегшити ваше життя.
Підроблене ім’я
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.