Menciptakan kembali efek gelombang sisi 2D dari Worms game


11

Saya mencoba untuk membuat ulang efek gelombang / air dari Worms (lihat di sini http://youtu.be/S6lrRqst9Z4?t=31s ) Dari apa yang saya pahami itu sebenarnya bukan sprite, secara prosedural dihasilkan oleh sesuatu seperti gelombang dosa.

Adakah yang pernah membuat sesuatu seperti ini sebelumnya? atau ada ide bagaimana saya akan melakukannya?

Jawaban:


14

Ya, Anda benar, efek air 2D ini dapat disimulasikan menggunakan fungsi matematika sinus :

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

masukkan deskripsi gambar di sini

  • phase adalah konstanta, letakkan apa pun yang Anda inginkan.
  • atur tke posisi horizontal pixel / vertex yang Anda proses:t = x;
  • berubah amplitudeseiring waktu (yang akan membuat ombak bergerak naik dan turun):

    amplitude = sin(t * wave_speed) * wave_height

  • menggabungkan beberapa gelombang untuk mendapatkan efek yang lebih relastik:

    wave_final = wave0 + wave1 + ... .

    Untuk setiap gelombang, ubah beberapa parameter sedikit (misalnya: fase, frekuensi, ...).

Ini adalah contoh cepat yang saya buat, hanya menggunakan dua gelombang:

http://glslsandbox.com/e#4988.0 (memerlukan browser terbaru dan WebGL diaktifkan)

CATATAN: ini adalah shader, tetapi melakukan ini menggunakan primitif 2D adalah pendekatan yang sama.

EDIT: Anda tidak menentukan kerangka kerja atau sistem rendering 2d, tapi di sini adalah bagaimana hal itu dapat dirender menggunakan strip poligon / segitiga:

masukkan deskripsi gambar di sini


Wow, itu jawaban yang luar biasa, terima kasih atas jawaban yang sangat komprehensif. Ya saya menggunakan HTML5 Canvas api untuk rendering. Terima kasih sekali lagi untuk itu, sangat membantu !!
Ciarán

Benar, meskipun gelombang di Worms jelas bukan hanya sinus tetapi lebih kompleks; sangat mungkin hanya superposisi sinus.
leftaroundabout

1
@leftaroundabout - techincally , setiap fungsi gelombang benar-benar hanya superposisi dari jumlah tak terbatas sinus. Secara praktis, ini masih benar, tetapi perkiraan kasar mungkin membuat hidup Anda lebih mudah.
Nama Palsu
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.