Cocos Creater 实现水流动特效，附shader源码

下面是一张设计感比普通稍微好一点的游戏背景图，如果你直接弄在小游戏当做静态背景也没什么问题，问题是就是个静态的画面，技术上没什么了不起，看起来就是普普通通，还是设计师牛逼，但没毛技术含量。

图片请看：这里

那么可以利用cocos creator的特效和动画，让背景变的有点不一样，请看下面的视频：

视频请看：这里

具体这里是做了两个点：

1、给水面加上水的流动特效

2、荷叶的上下位移动画

水流特效制作稍微复杂一点，需要用到shader。至于什么是shader，现在一两句话也讲不清楚，下次单独讲。在cocos creator里呢，定义了两种文件，一个是材质文件materials，另外一个是effect文件，effect是写shader脚本的地方，是最终实现特效的地方。materials会依赖effect，图片怎么绘制会依赖选择了哪种material。所以整个过程是这么个逻辑。

下图是水面的图片

图片请看：这里

上面文字说的三个文件都能在下图找到对应的文件。

 

选中water节点，在属性面板的滚动到最下方，可以设置materials，非常简单的。直接运行游戏，就能有水流的特效了。

图片请看：这里

那么荷叶的动画呢，非常简单，只要做一个动作就行了，直接看代码

 

var action1 = cc.moveBy(2, cc.v2(0, 20)).easing(cc.easeQuadraticActionIn());
var action2 = cc.moveBy(2, cc.v2(0, -20)).easing(cc.easeQuadraticActionIn());
this.heyeNode.runAction(cc.repeatForever(cc.sequence(action1, action2)));

 

设定两个移动动作，上下移动20像素，并且以缓动的方式，执行动画的时候呢保持一个队列方式，并且永久重复执行，就这么几行代码搞定。

关注公众号获取源码