웜 게임에서 2D side-on wave 효과 재현


11

나는 Worms에서 파도 / 물 효과를 재현하려고 노력하고 있습니다 ( http://youtu.be/S6lrRqst9Z4?t=31s 참조 ) 실제로 이것이 스프라이트가 아니라는 것을 이해 한 것에서 절차 적으로는 sin wave와 같은 것에 의해 생성됩니다.

전에 이런 식으로 만든 사람이 있습니까? 또는 내가 어떻게 그것에 대해 갈 생각이 있습니까?

답변:


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 렌더링 시스템을 지정하지는 않지만 다음은 다각형 / 삼각형 스트립을 사용하여 렌더링하는 방법입니다.

여기에 이미지 설명을 입력하십시오


와우, 그것은 훌륭한 답변입니다. 매우 포괄적 인 답변에 감사드립니다. 예, 렌더링에 HTML5 Canvas API를 사용하고 있습니다. 다시 한번 감사드립니다.
Ciarán

오른쪽, 웜의 파도가 분명히 있습니다 만 하지 단순히 사인 그러나 더 복잡한; 죄의 중첩 일 가능성이 높습니다.
leftaroundabout

1
@leftaroundabout - Techincally , 모든 파동 함수는 정말 사인의 무한한 수의 단지 중첩이다. 실제로 이것은 여전히 ​​사실이지만 더 조잡한 근사치로 인해 인생이 더 쉬워 질 수 있습니다.
가짜 이름
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.