歡樂水杯(happy glass)中流體的一種實現！圖文視頻講解 ! Cocos Creator!

使用cocos creator v2.2.2 實現流體效果 ！ 圖文+視頻講解！

效果預覽

實現原理

總體思路是參考論壇中的一個帖子

這款遊戲中水的粘連效果在Construct3中利用圖層很容易實現，就是每一個水滴都是掛了兩個圓形圖片素材，其中一個是水滴原本的藍色，另外一個是其餘顏色且素材邊緣是半透明的。當幾個水滴靠近時讓半透明素材邊緣相互重疊，這時本來半透明的邊緣透明度變低。經過在當前圖層中使用Shader，並設定Alpha閾值——小於Alpha閾值部分按全透明處理，大於Alpha閾值部分則按不透明處理——這樣一來，一個單獨孤立的水滴，其半透明邊緣所有被處理成全透明，以此表現一個孤立的水滴，而擠在一塊兒的幾個水滴，其重疊的邊緣就會處理成不透明，從而造成水滴粘連的效果，表明聚集在一塊兒的水滴，並模擬水的張力。
因爲Cocos Creator沒有Construct3中的圖層Layer概念，不能對一個圖層中所有的圖片素材總體使用一個Shader，所以上述方法並不適用。
那麼問題就是——有沒有別的辦法讓Cocos Creator實現上述水的效果？

上面一段是論壇原文。順着思路走，這裏準備一張特殊的圖片。這個圖片從內到外alpha(不透明度)逐漸變小。

當兩張圖片靠近時，重疊區域的透明度會變小。小於alpha閾值部分按全透明處理，大於alpha閾值部分則按不透明處理。這樣就能實現水滴鏈接效果了。

cocos creator 中已經內置了ALPHA_TEST函數。

因此咱們只要加一個不透明處理就能夠了，shader的主要代碼以下：

ALPHA_TEST(o);
o.a = 1.0;

如今咱們就要讓這些水滴在同一個層級上使用這段shader。該如何作呢？

咱們須要添加一個新的攝像機，讓這個攝像機專門拍攝水滴節點，而後再把拍攝好的圖片放在一個sprite節點，再對這個sprite節點做shader處理。

把攝像機綁定在一張圖的代碼參考以下：

const texture = new cc.RenderTexture();
texture.initWithSize(this.sp_water_show.node.width, this.sp_water_show.node.height);
const spriteFrame = new cc.SpriteFrame();
spriteFrame.setTexture(texture);
this.camera_water.targetTexture = texture;
this.sp_water_show.spriteFrame = spriteFrame;

最後，給水滴添加物理組件，在場景內佈置一些物理節點，隨手寫幾行水滴生成代碼，就能夠看到水滴落下的效果了。

視頻講解

學會思考，拆解需求，解決問題。

以上爲白玉無冰使用 Cocos Creator v2.2.2 開發"流體效果"的技術分享。若是對你有點幫助，歡迎分享給身邊的朋友。