ワームゲームから2Dサイドオンウェーブエフェクトを再作成します


11

私はワームから波/水の効果を再現しようとしています(ここ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

  • 複数の波を組み合わせて、より弾力的な効果を得ます。

    wave_final = wave0 + wave1 + ...

    各波について、いくつかのパラメータを少し変更します(例:位相、周波数、...)。

ここに私が作った簡単な例があり、2つの波だけを使用しています:

http://glslsandbox.com/e#4988.0(最新のブラウザとWebGL対応が必要)

注:これはシェーダーですが、2Dプリミティブを使用してこれを行うのも同じアプローチです。

編集:フレームワークや2Dレンダリングシステムを指定しませんが、ポリゴン/三角形のストリップを使用してレンダリングする方法は次のとおりです。

ここに画像の説明を入力してください


うわー、それは素晴らしい答えです。非常に包括的な答えに感謝します。ええ、私はレンダリングにHTML5 Canvas APIを使用しています。本当にありがとうございます。
シアラン

右、ワームの波が明確にされてもいない単なる正弦が、より複雑な。たぶん正弦の重ね合わせ。
leftaroundabout

1
@leftaroundabout- 厳密にはすべての波動関数は、実際には無限数の正弦の重ね合わせにすぎません。実際には、これはまだ当てはまりますが、より粗い概算を使用すると、作業が楽になる場合があります。
偽の名前
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.