2D特效之水波

2021-06-09 05:29:37 字數 1588 閱讀 6902

2d特效之水波

水波特效在遊戲當中也比較多見,波紋實時生成演算法很多,這裡介紹一種快速演算法。之所以說它是一種快速演算法,是因為它的計算既沒有用到sin、cos函式也沒有用到sin、cos函式的查表演算法,它只是根據波的傳播原理,通過少量的加減、位移運算來完成。如要多了解一些波的知識,趕快去翻書哦,現在去學或複習還來得及。當然快速的代價是記憶體的消耗,這一點我們曾在文章裡也提到過,為了追求更高的效率,往往可採取犧牲部分記憶體這樣一種手段來達到目的。

在開始之前我們先作一些假設,同時你可參考左面的圖。首先假設波是從右往左傳播,0為波在當前時刻的波形,1為前1/8週期時的波形,2為前1/4週期時的波形。設波的週期為t。圖中向下的箭頭是各點處的振動速度,箭頭線長表示振動速度的大小。

現設有任一點x(y方向暫不考慮),它在三個波形上分別對應點p0、p1和p2,三點在振幅方向的偏移量(含方向)分別為d0、d1和d2。設波形函式為d0 = sin(2*pi/t*t+b),則d1 = sin(2*pi/t*(t-t/8)+b),d2 = sin(2*pi/t*(t-t/4)+b),我們下面來證明21/2*d1 = d0+d2:

設2*pi/t+b=a,則

d0 = sin(a),d1=sin(a-pi/4),d2 = sin(a-pi/2) ==》

d0+d2 = sin(a)+sin(a-pi/2)

=2*sin((a+(a-pi/2))/2)*cos((a-(a-pi/2))/2)

=2*sin(a-pi/4)*cos(pi/4)

=21/2*d1

利用這一特徵我們就可以來計算波形了,我們可以以1/8個週期為一顯示幀,然後用兩個緩衝區來保留前兩幀的波形,用上述公式就可以依次推算出後續波的波形。這裡需要做一些優化,首先將21/2放大為2,則有d0=2*d1-d2,計算後的d0會偏大一些(相當於波能加大),這樣的波會越振越厲害,不停地振動下去永不止,所以要將d0的值減少一部分,辦法是減去1/n個d0,將n值取成2的5(或其它?)次方,這樣就可以用移位來計算:d0-=d0>>5,最後要處理的是波的傳播了,一般我們在某一點給出乙個干擾源(波源),這一點的能量要向四周傳播出去我們才能看出波的抖動,否則光乙個點上下抖動看起來是不會象水波的,我們用平均演算法來傳遞波能,每一點的波形都是其前後左右各點的平均值。如右圖,若藍點是波源,則它由綠、黃、紅依次向外傳播,各位注意不要被此圖所誤導,波形絕不是如圖示那樣呈菱形向外傳播,這個圖只不過是為了說明波的傳播次序,因為即使是顏色相同的點其能量(或者說偏移)都不會是相同的。

由上面所分析我們有如下的波傳播**:

最後一步就是根據計算出來的波形做渲染了,我們可以隨便選一幅點陣圖來作為我們的渲當背景(紋理)。由於我們的緩衝區是各點的偏移(偏離水平面的高度),所以我們可以將當前點前後和左右兩個落差作為光折射後的偏移量來計算光的折射。為了讓紋理圖看起來更象水,可將圖的藍色加深。**如下:

在作渲染的同時不停的加入波源,你們會發現無論波源的多少,其運算速度是一樣的快捷,事實上這可從**中看出來,演算法與波源的多少是無關的。

使用 2D 方法實現倒影特效

倒影特效可以為 ui 帶來絢麗的視覺效果,本文以乙個瀏覽器的 gridview 的例,介紹了一種以 2d 方法實現倒影特效的方法,給出了演算法的 片段。簡介 倒影可以為 ui 介面帶來立體感,是乙個常用的 ui 特效。下圖是乙個瀏覽程式的 gridview5,該 view 的倒影特效為 ui 介面增...

2D遊戲中的技能特效

在我們的2d圖形遊戲中不可缺少大量的光影 技能特效,像diablo ii中的魔法效果的實現,幸好我們擁有強大的cpu來為我們實現alpha混合與色彩飽和混合,接下來讓我們來討論一下如何用這些方法來實現我們遊戲中所需要的技能特效。一 alpha混合特效 alpha混合可以讓我們讓我們將一張圖象按一定程...

2D遊戲中的技能特效

在我們的2d圖形遊戲中不可缺少大量的光影 技能特效,像diablo ii中的魔法效果的實現,幸好我們擁有強大的cpu來為我們實現alpha混合與色彩飽和混合,接下來讓我們來討論一下如何用這些方法來實現我們遊戲中所需要的技能特效。一 alpha混合特效 alpha混合可以讓我們讓我們將一張圖象按一定程...