【Godot4自学手册】第四十四节用着色器（shader）实现溶解效果

本小节，我将自学用用着色器（shader）实现溶解效果，最终效果如下：
请添加图片描述

一、进行shader初始设置

首先我们进入Player场景，选择AnimatedSprite2D节点，在检查器中找到CanvasItem属性，并在Material->Material后方选择下拉按钮选择新建ShaderMaterial。然后选中新建的材质球，在Shader属性选择新建着色器，在弹出框内进行如下设置：
请添加图片描述

然后创建保存。

二、编写代码

我编写如下代码：

shader_type canvas_item;  //表示2D类型的着色器
uniform sampler2D nosise_texture;  //声明一个名为 noise_texture 的纹理采样器（sampler2D）。这个声明告诉编译器，`noise_texture` 是一个用于从 2D 纹理中提取颜色值的采样器。
uniform sampler2D burn_texture;
uniform float intergrity:hint_range(0.0, 1.0)=1.0;//声明一个float参数，取值范围0到1，用于燃烧进度
uniform float burn_size:hint_range(0.0, 1.5)=1.3;//声明变量，表示燃烧大小范围
//inverse_lerp函数是线性插值（lerp）的反函数，用于计算目标值在指定范围内对应的索引位置。
float inverse_lerp(float a,float b,float v){return(v-a)/(b-a);
}void fragment() {float noise = texture(nosise_texture,UV).r;//从名为 noise_texture 的纹理中，根据当前的 UV 坐标采样颜色值，并从采样的颜色值中提取红色通道（.r）的值，将其赋给名为 noise 的浮点变量。简而言之，它是在使用纹理生成噪声值。vec4 base_color = texture(TEXTURE,UV) * step(noise,intergrity);//会从TEXTURE指定的纹理中，根据UV提供的坐标，采样一个颜色值。//step() 函数是一个阶跃函数，如果其第一个参数小于第二个参数，则返回 0，否则返回 1。vec2 burn_uv = vec2(inverse_lerp(intergrity,intergrity*burn_size,noise),0.0);//- 计算 noise 在 [integrity, integrity*burn_size] 值域中的位置。
将这个位置值作为vec2向量的第一个分量。将0.0作为vec2向量的第二个分量。这个表达式可以用于创建各种效果，vec4 burn_color = texture(burn_texture,burn_uv)*step(noise,intergrity*burn_size)*texture(TEXTURE,UV);//从burn_texture指定的纹理中采样颜色值。将这个颜色值与step(noise, integrity * burn_size) 的结果相乘。然后，从TEXTURE指定的纹理中采样另一个颜色值。最后，将这两个颜色值相乘的结果作为最终的颜色值。COLOR = mix(burn_color,base_color,base_color.a);
//从burn_texture指定的纹理中采样颜色值，并将这个颜色值存储在burn_color变量中。从base_texture指定的纹理中采样颜色值，并将这个颜色值存储在base_color变量中。使用mix函数burn_color 和base_color按base_color.a的比例混合。将混合后的颜色值存储在 `COLOR` 变量中，这个值将被用于后续的渲染过程。
}

重要知识点说明：
inverse_lerp 函数会返回一个介于 0 和 1 之间的值，这个值表示目标值在值域中的位置。假设你有一个连续的值域 [0, 100]，并且你想知道一个目标值 60 在这个值域中的位置。你可以使用 inverse_lerp 函数来找到这个位置。inverse_lerp 返回的值可能是 0.6，这意味着目标值 60 在值域 [0, 100] 中的位置是 60% 处。

三、代码中调用

首先进入项目设置中添加一个快捷键“diss”，与t对应。在键盘上按下t就表示diss。
请添加图片描述

切换到player的代码中
在顶部输入“@onready var animated_sprite_2d = $AnimatedSprite2D”获取AnimatedSprite2D节点。在_physics_process函数中添加如下代码：

if Input.is_action_just_pressed("diss"):var tween = get_tree().create_tween()		tween.tween_property(animated_sprite_2d.material,"shader_parameter/intergrity",.0,.8)

运行游戏，单击字母t，将会进入溶解效果。最后效果如下：
请添加图片描述