【界面UI】自定义 Shader 与粒子特效：技能视觉的 Lua 接入与预算控制

完整课程入口：996 全套课程体系 ｜ Lua 学习路径 ｜ 幂尔框架 mirs.cn

实战应用：用在哪里

技能特效三件套：自定义 Shader（流光、熔解、扭曲）、粒子系统（火球拖尾、冰爆碎片）、粒子与骨骼动画的混合播放。Lua 侧通过 Cocos 绑定接口接入这些效果，难点不在"能不能做"，而在"同时出现时帧率还剩多少"。本文给接入方法与特效预算控制。

自定义 Shader：流光武器效果

给武器贴图叠加一条随时间移动的高光带，GLSL 片元着色器约 20 行，Lua 侧加载并绑定到精灵：

local glProgram = cc.GLProgram:createWithFilenames("shader/flow.vert", "shader/flow.frag")
local state = cc.GLProgramState:getOrCreateWithGLProgram(glProgram)
state:setUniformFloat("u_time", 0)
glProgram:setUniformLocationWith1f(state:getUniformLocation("u_time"), 0)
sprite:setGLProgram(glProgram)
-- 帧回调里更新 u_time，让高光带流动

预算规则：带自定义 Shader 的节点每屏至多 3 个（同屏每多一个 Shader 节点，DrawCall 至少 +1 且合批被打断），只给核心武器与 Boss 使用。

粒子特效：数量与生命周期控制

粒子系统用引擎 ParticleSystemQuad 加载 plist 配置。三项实测有效的控制：发射速率按画质档位缩放（高配 1.0、中配 0.6、低配 0.35）；生命周期结束立即释放发射节点；同屏粒子总量超过 600 时新特效降级为贴图动画。某技能冰爆特效优化后粒子数从 480 降到 190，视觉差异在快节奏战斗里难以察觉，低端机帧耗时减少 2.7ms。

特效预算表

给每个技能标注三项预算：粒子峰值数量、Shader 数量、动画时长。预算表进策划交付清单，超出预算的特效回炉。验证方法：战斗最密集场景（20 人团战）实测帧耗时，特效改动前后各测一次，涨幅超过 1.5ms 即回退。特效系统的性能问题几乎都是"叠加"出来的，预算表是唯一的护栏。

Shader 源文件进版本库并与构建流程串起，低端机加载失败的降级路径要写死：Shader 编译失败时自动回退为无特效贴图渲染，玩法不受影响。粒子配置文件改动后在高、中、低三档设备各录一段实测视频存档，作为画质基线对照。