使用cocos2d-js模擬水流波浪

samael發表於2016-07-07
JS

其實之前就有想過遊戲中那些波浪效果是怎麼實現的, 剛好最近有些功夫了可以去做一個演示的小demo出來瞭解一下原理.

Demo效果

這裡只是實現了基本的表現, 對於增加紋理並是讓相鄰的長條看起來平滑, 還沒有處理, 具體實現可以見參考網址

demo

原理

基本思想

最基本的原理其實是就是積分把水池, 分成N個長條, 每個長條都當成一個彈簧, 根據胡克定律彈簧形變越大, 彈力也就越大.

步驟

  1. 水面某一點受到力時給於對應的長條一個向下的初始速度

  2. 根據預先設定的Spread(傳播速度)對長條的速度進行疊加

  3. 集中渲染, 重新整理每個長條新的高度

程式碼

https://github.com/samael65535/toy_code/blob/master/EffectLab/fluid.js

參考網址

http://gamedevelopment.tutsplus.com/tutorials/make-a-splash-with-2d-water-effects--gamedev-236

原文連線

http://samael65535.github.io/cocos2d-js/2016/07/06/wave-simulate-cocos2d/

相關文章