Godot Shader特效:2D 溶解效果

效果图如下

效果图

准备工作

• 一张png的角色图片

  
  角色图片

• 一张噪声图片，这次使用的是Godot自动生成噪声图片，当然你也可以使用Gimp等第三方工具制作的噪声图片

步骤

• 添加一个Sprite命名为mario并且给mario指定图片

• 为mario新建ShaderMaterial,再为这个ShaderMaterial新建Shader

• 在资源视图中新建一个NoiseTexture类型的资源，命名为dissolve_noise.tres
  

  新建NoiseTexture

• 编辑dissolve_noise.tres，将其大小设置为和角色图片相同大小(128×128)，然后在Noise属性那里新建一个OpenSimplexNoise

新建OpenSimplexNoise

• 将这个dissolve_noise.tres资源在编辑器中指定给下面代码中的noise就可以了

提示
为uniform指派值的位置在下图所示Shader Param中

`Shader Param`中指派`uniform`值

代码如下

shader_type canvas_item;
uniform sampler2D noise;

void fragment(){
    vec4 color = texture(TEXTURE,UV);
    float n = texture(noise,UV).x;
    color.a = n > cos(TIME) ? .0 : color.a;
    COLOR = color;
}

小结

• 只有变色没有形变所以只用到了fragment函数。
• 噪声的作用是取对应点的一个分量作为阈值,不同的噪声纹理可以得到不同的溶解走向。
• 加上TIME就可以实现动画效果了，并且不同的时间曲线也可以获得不同的溶解效果。
• 实际上3D溶解的原理也是类似的。