สร้างเอฟเฟกต์คลื่นไซด์ 2 มิติจากเกม Worms


11

ฉันพยายามสร้างคลื่น / ผลกระทบน้ำจาก Worms ใหม่ (ดูที่นี่http://youtu.be/S6lrRqst9Z4?t=31s ) จากสิ่งที่ฉันเข้าใจว่าไม่ใช่สไปรท์จริงๆมันสร้างขึ้นโดยกระบวนการเช่นคลื่นบาป

มีใครสร้างบางอย่างเช่นนี้มาก่อนหรือไม่ หรือความคิดใดที่ฉันจะไปเกี่ยวกับเรื่องนี้?

คำตอบ:


14

ใช่คุณพูดถูกเอฟเฟกต์น้ำ 2D นี้สามารถจำลองได้โดยใช้ฟังก์ชั่นคณิตศาสตร์ไซน์ :

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

ป้อนคำอธิบายรูปภาพที่นี่

  • phase เป็นค่าคงที่ใส่สิ่งที่คุณต้องการ
  • ตั้งค่าtตำแหน่งแนวนอนของพิกเซล / จุดสุดยอดที่คุณกำลังประมวลผล:t = x;
  • เปลี่ยนแปลงamplitudeตลอดเวลา (ซึ่งจะทำให้คลื่นเคลื่อนที่ขึ้นและลง):

    amplitude = sin(t * wave_speed) * wave_height

  • รวมคลื่นหลายลูกเข้าด้วยกันเพื่อให้ได้เอฟเฟ็กต์ relastic มากขึ้น:

    wave_final = wave0 + wave1 + ... .

    สำหรับแต่ละคลื่นให้เปลี่ยนพารามิเตอร์เล็กน้อย (เช่น: เฟส, ความถี่, ... )

นี่คือตัวอย่างด่วนที่ฉันทำโดยใช้คลื่นเพียงสองคลื่น:

http://glslsandbox.com/e#4988.0 (ต้องใช้เบราว์เซอร์ล่าสุดและเปิดใช้งาน WebGL)

หมายเหตุ: นี่เป็น shader แต่การทำเช่นนี้โดยใช้วิธีดั้งเดิม 2D เป็นวิธีการเดียวกัน

แก้ไข: คุณไม่ได้ระบุกรอบงานหรือระบบการเรนเดอร์แบบ 2d แต่นี่คือวิธีการแสดงผลโดยใช้รูปหลายเหลี่ยม / แถบสามเหลี่ยม:

ป้อนคำอธิบายรูปภาพที่นี่


ว้าวนั่นเป็นคำตอบที่ยอดเยี่ยมขอบคุณสำหรับคำตอบที่ครอบคลุมมาก ใช่ฉันใช้ HTML5 Canvas api สำหรับการแสดงผล ขอบคุณอีกครั้งสำหรับสิ่งนั้นมีประโยชน์มาก !!
Ciarán

ถูกต้องแม้ว่าคลื่นใน Worms จะเห็นได้ชัดว่าไม่เพียง แต่มีความซับซ้อน อาจเป็นเพียงการทับซ้อนของไซน์
leftaroundabout

1
@leftaroundabout - Techincally , ฟังก์ชันคลื่นทุกเป็นจริงเพียงซ้อนจำนวนอนันต์ของไซนส์ ในทางปฏิบัติสิ่งนี้ยังคงเป็นจริง แต่การประมาณที่หยาบกว่าอาจทำให้ชีวิตของคุณง่ายขึ้น
ชื่อปลอม
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.