Cocos Creator 3.8 开发2D水面波纹Shader

使用cocos Creator 3.8做了一个游戏开中常用的2D的波浪水面,把技术点给记录一下，并提供完整的Shader代码。先上效果:

添加图片注释，不超过 140 字（可选）

2D 波浪的基本技术原理

2D 水面波纹的主要原理就是给定一个正选波的边界，在范围内的片元uv就显示，在范围外的片元uv就不显示。同时利用正弦波表达式:

y = A * sin(w * t+offset)

将片元的uv坐标uv.x 带入上面的公式offset，算出y0值。Cocos 的uv 左上角为(0, 0),我们要在图片的上方做水波纹,那么片元的uv.y < y0的片元就丢弃, uv.y >= y0的就正常显示。

对啦！这里有个游戏开发交流小组里面聚集了一帮热爱学习游戏的零基础小白，也有一些正在从事游戏开发的技术大佬，欢迎你来交流学习。

添加图片注释，不超过 140 字（可选）

为了让水波能动起来，我们就要不断的改变同一个位置offset, 对应的y0的值,那么我们加一个 w * t, 角速度*时间。这样随着时间的推移同一个uv(x, y),会得到不同的y0的值。有了不同的边界，这样就会决定不同的片元的显示和丢弃。

具体编写Shader

第001步: 新建一个标准2D Shader 模板,能正常显示图片

Cocos Creator的版本不一样，可能导致以前编写的Shader无法正常运行，这种其实很好解决，我们在开发Shader的时候，基于现在Cocos Creator的版本先创建一个现有的模板出来，然后再将关键代码移植过去。我们做一个2D的Shader,所以复