欢乐水杯(happy glass)中流体的一种实现！图文视频讲解 ! Cocos Creator!

落日映苍穹つ 2023-01-08 08:13 40阅读 0赞

> 使用cocos creator v2.2.2 实现流体效果 ！ 图文+视频讲解！

![1867743-20200328102810169-1565987709.jpg][]

**效果预览**

![1867743-20200328103132088-1685012327.gif][]

**实现原理**

整体思路是参考论坛中的一个[帖子][Link 1]

> 这款游戏中水的粘连效果在Construct3中利用图层很容易实现，就是每个水滴都是挂了两个圆形图片素材，其中一个是水滴本来的蓝色，另一个是其他颜色且素材边缘是半透明的。当几个水滴靠近时让半透明素材边缘相互重叠，这时原本半透明的边缘透明度变低。通过在当前图层中使用Shader，并设定Alpha阈值——小于Alpha阈值部分按全透明处理，大于Alpha阈值部分则按不透明处理——这样一来，一个单独孤立的水滴，其半透明边缘全部被处理成全透明，以此表现一个孤立的水滴，而挤在一起的几个水滴，其重叠的边缘就会处理成不透明，从而形成水滴粘连的效果，代表汇集在一起的水滴，并模拟水的张力。  
> 由于Cocos Creator没有Construct3中的图层Layer概念，不能对一个图层中全部的图片素材整体使用一个Shader，因此上述方法并不适用。  
> 那么问题就是——有没有别的办法让Cocos Creator实现上述水的效果？

上面一段是论坛原文。顺着思路走，这里准备一张特殊的图片。这个图片从内到外`alpha`(不透明度)逐渐变小。

当两张图片靠近时，重叠区域的透明度会变小。小于alpha阈值部分按全透明处理，大于alpha阈值部分则按不透明处理。这样就能实现水滴连接效果了。

![1867743-20200328103152245-1583973551.jpg][]

cocos creator 中已经内置了`ALPHA_TEST`函数。

![1867743-20200328103204631-1625769114.jpg][]

所以我们只要加一个不透明处理就可以了，`shader`的主要代码如下：

ALPHA_TEST(o);
    o.a = 1.0;

现在我们就要让这些水滴在同一个层级上使用这段`shader`。该如何做呢？

我们需要添加一个新的摄像机，让这个摄像机专门拍摄水滴节点，然后再把拍摄好的图片放在一个`sprite`节点，再对这个`sprite`节点作`shader`处理。

![1867743-20200328103212168-907646333.jpg][]

把摄像机绑定在一张图的代码参考如下：

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;

最后，给水滴添加物理组件，在场景内布置一些物理节点，随手写几行水滴生成代码，就可以看到水滴落下的效果了。

![1867743-20200328103220767-1462028222.jpg][]

**[视频讲解][Link 2]**

> 学会思考，拆解需求，解决问题。

以上为白玉无冰使用 `Cocos Creator v2.2.2` 开发`"流体效果"`的技术分享。如果对你有点帮助，欢迎分享给身边的朋友。

--------------------

[1867743-20200328102810169-1565987709.jpg]: /images/20221119/69b73c6d6f82442194d91a2a31457c7f.png
[1867743-20200328103132088-1685012327.gif]: /images/20221119/bfed21ca273e4ddfa1b415f4c1af15a7.png
[Link 1]: https://forum.cocos.org/t/happy-glass/72468
[1867743-20200328103152245-1583973551.jpg]: /images/20221119/0a688ecf3fc24017b90e344a775a8a6b.png
[1867743-20200328103204631-1625769114.jpg]: /images/20221119/7b22b32bb66341319deb470eb08d388e.png
[1867743-20200328103212168-907646333.jpg]: /images/20221119/2f65daaf7aba4a1997649e6cb418a946.png
[1867743-20200328103220767-1462028222.jpg]: /images/20221119/e07d042e0a164b89ace942ecba861b2c.png
[Link 2]: https://www.bilibili.com/video/BV167411X7NG/