新网个人网站备案,网站开发项目流程,荣县网站开发,医院网站管理办法本小节#xff0c;我将自学用用着色器#xff08;shader#xff09;实现溶解效果#xff0c;最终效果如下#xff1a;
一、进行shader初始设置
首先我们进入Player场景#xff0c;选择AnimatedSprite2D节点#xff0c;在检查器中找到CanvasItem属性#xff0c;并在M…本小节我将自学用用着色器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将会进入溶解效果。最后效果如下
