第 43 课 · 着色器（Shader）入门

⏱ 预计时长 40 分钟📊 难度进阶📚 模块 第 4 部分 · UI 界面 · 动画 · 特效

🎯 本课学习目标

理解着色器的基本概念
编写第一个自定义着色器
实现闪烁、溶解、波浪等效果

着色器（Shader）是「给 GPU 的指令」，能实现各种炫酷视觉。本课从零入门 Godot 着色器。

📖 详细教学步骤

什么是着色器？概念

着色器是运行在 GPU 上的小程序，逐像素处理颜色：

让精灵「呼吸发光」、被击中「闪白」、死亡「溶解消失」
Godot 用类似 GLSL 的着色器语言
写在 .gdshader 文件里，挂到 ShaderMaterial 上

创建着色器搭建

资源面板右键 → 新建资源 → Shader，命名 glow.gdshader
双击打开着色器编辑器
选中精灵 → 检查器 Material → 新建 ShaderMaterial
把 glow.gdshader 拖到 Shader 属性

第一个着色器：发光呼吸代码

给精灵加一层随时间脉动的发光：

GDSCRIPTshader_type canvas_item;   # 2D 精灵用 canvas_item

uniform float strength : hint_range(0.0, 1.0) = 0.3;

void fragment() {
    // 采样原纹理颜色
    vec4 tex = texture(TEXTURE, UV);
    // 随时间脉动
    float pulse = 0.5 + 0.5 * sin(TIME * 4.0);
    // 混合发光（白色 + 原图）
    vec4 glow = vec4(1.0, 1.0, 1.0, 1.0);
    COLOR = mix(tex, glow, pulse * strength);
}

被击中闪白代码

配合代码切换 uniform，实现闪白：

GDSCRIPTshader_type canvas_item;

uniform float flash : hint_range(0.0, 1.0) = 0.0;

void fragment() {
    vec4 tex = texture(TEXTURE, UV);
    COLOR = mix(tex, vec4(1.0), flash);   # 向白色混合
}

用代码控制 uniform代码

在脚本里修改着色器参数（闪白）：

GDSCRIPT@onready var sprite = $Sprite2D

func flash_white():
    var mat: ShaderMaterial = sprite.material
    mat.set_shader_parameter("flash", 1.0)
    # 0.1 秒后恢复
    await get_tree().create_timer(0.1).timeout
    mat.set_shader_parameter("flash", 0.0)

波浪扭曲效果进阶

让精灵像水一样波动（终极炫酷但吃性能，小图用）：

GDSCRIPTshader_type canvas_item;

uniform float wave_speed : hint_range(0.0, 10.0) = 3.0;
uniform float wave_strength : hint_range(0.0, 0.1) = 0.02;

void fragment() {
    vec2 uv = UV;
    uv.x += sin(UV.y * 20.0 + TIME * wave_speed) * wave_strength;
    COLOR = texture(TEXTURE, uv);
}

着色器调试技巧调试

出错时底部「输出」面板会有着色器编译错误
用 COLOR = vec4(1.0, 0.0, 0.0, 1.0) 强制红色排查采样问题
uniform 加 hint_range 会在检查器出现滑杆，实时调参

⚠️

着色器报错？

最常见：忘记分号、拼错函数名、canvas_item 与 spatial 写错。按底部报错行号检查。

⚠️

改了着色器没效果？

确认材质已挂到节点、着色器已编译通过、uniform 名字与代码 set_shader_parameter 一致。

🧪 动手试一试

🏋️ 课后练习

给主角加「受击闪白 + 呼吸发光」双效果着色器，被敌人碰到时闪白 0.1 秒。

一个 shader 里加 flash 和 pulse 两个 uniform，脚本控制 flash。

💡

uniform 变量可在检查器直接调，是调参神器。

💡

先在官方文档搜 shader 教程，有大量示例可改。

🎓 本课小结

着色器是 GPU 像素级程序：canvas_item 管 2D；uniform 参数从代码控制；mix 做颜色混合，TIME 做时间动画；可做发光/闪白/溶解/波浪。