网站 建设 价格表中国电子商务中心官网

本节内容，主要学习利用着色器制作水波纹效果，效果如下：

一、搭建新的场景

首先我们新建场景，根节点选择Node2D，命名为Water，给根节点添加两个Tilemap节点，一个命名为Background主要用于绘制地形图，和水中物品；另一个命名为Water，主要用于绘制水波纹。目录结构如下：

Background绘制效果如下：

Water绘制水波纹，将水覆盖的部分全部填满，效果如下：

需要素材的可以在头部点击下载源代码。

二、制作水波纹

1.新建着色器。 选择Water节点，在属性检查器中中找到CanvasItem属性，并在Material->Material后方选择下拉按钮选择新建ShaderMaterial。然后选中新建的材质球，在Shader属性选择新建着色器，如下：

2.编写代码。 在着色器内编写如下代码：

shader_type canvas_item;uniform sampler2D screen_texture:hint_screen_texture;
uniform sampler2D noise_texture:filter_nearest,repeat_enable;
uniform float distortion =0.01;
uniform vec2 speed = vec2(.5,.2);
uniform float wave_strength =0.1;void vertex() {VERTEX.y += sin(TIME);
}void fragment() {vec2 uv = UV+speed*TIME;vec2 noise =2.0 * texture(noise_texture,uv).rg - vec2(1,0);COLOR = texture(TEXTURE,UV + noise * wave_strength);COLOR *= texture(screen_texture,SCREEN_UV+noise * distortion);
}

3.配置参数。 编写完成代码保存后，检查器中会出现一些参数，noise_texture表示水波纹噪声纹理；distortion表示波动距离；speed表示波动速度；wave_strength表示波动强度。我们主要设置noise_texture，其它默认值。
Noise Texturen 选择新建NoiseTexure2D，展开属性勾选Seamless启用，表示纹理无缝连接；Noise属性选择新建FastNoiseLite，在其属性中将frequency设置为）0.001，数值越小产生的噪声越平滑。

这样配置，我们的效果就实现了，如下：