Tạo lại hiệu ứng sóng phụ 2D từ trò chơi Worms


11

Tôi đang cố gắng tạo lại hiệu ứng sóng / nước từ Worms (xem tại đây http://youtu.be/S6lrRqst9Z4?t=31s ) Từ những gì tôi hiểu nó không thực sự là một sprite, nó được tạo ra theo cách tương tự như một sóng hình sin.

Có ai đã tạo ra một cái gì đó như thế này trước đây? hoặc bất kỳ ý tưởng làm thế nào tôi sẽ đi về nó?

Câu trả lời:


14

Vâng, bạn đã đúng, hiệu ứng nước 2D này có thể được mô phỏng bằng hàm sin toán học :

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

nhập mô tả hình ảnh ở đây

  • phase là một hằng số, đặt bất cứ điều gì bạn muốn.
  • đặt thành tvị trí ngang của pixel / đỉnh bạn đang xử lý:t = x;
  • thay đổi amplitudetheo thời gian (điều đó sẽ làm cho sóng di chuyển lên xuống):

    amplitude = sin(t * wave_speed) * wave_height

  • kết hợp nhiều sóng để có được hiệu ứng đáng tin cậy hơn:

    wave_final = wave0 + wave1 + ... .

    Đối với mỗi sóng, thay đổi một số tham số một chút (ví dụ: pha, tần số, ...).

Đây là một ví dụ nhanh tôi đã thực hiện, chỉ sử dụng hai sóng:

http://glslsandbox.com/e#4988.0 (yêu cầu trình duyệt và kích hoạt WebGL gần đây)

LƯU Ý: đây là một shader, nhưng thực hiện điều này bằng cách sử dụng các nguyên hàm 2D là cách tiếp cận tương tự.

EDIT: bạn không chỉ định bất kỳ hệ thống kết xuất khung hoặc 2d nào, nhưng đây là cách nó có thể được hiển thị bằng cách sử dụng các đa giác / dải tam giác:

nhập mô tả hình ảnh ở đây


Wow, đó là một câu trả lời tuyệt vời, cảm ơn vì câu trả lời rất toàn diện. Phải, tôi đang sử dụng api HTML5 Canvas để kết xuất. Cảm ơn một lần nữa vì điều đó, vô cùng hữu ích !!
Ciarán

Phải, mặc dù sóng trong Worms rõ ràng không chỉ đơn thuần là tội lỗi mà phức tạp hơn; rất có thể chỉ là chồng chất của tội lỗi.
leftaroundabout

1
@leftaroundabout - Về mặt kỹ thuật , mọi chức năng sóng thực sự chỉ là sự chồng chất của vô số tội lỗi. Trên thực tế, điều này vẫn đúng, nhưng các xấp xỉ thô hơn có thể làm cho cuộc sống của bạn dễ dàng hơn.
Tên giả
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.