1. 为什么需要动态不规则图片描边在游戏开发中我们经常会遇到需要突出显示某些不规则形状物体的需求。比如角色选中状态、技能范围提示、可交互物品高亮等场景。传统的矩形边框显然无法满足这些需求这时候就需要用到不规则图片描边技术。我最早接触这个需求是在开发一款卡牌游戏时。卡牌都是不规则形状当玩家选中某张卡牌时需要给它加上金色描边效果。最初尝试用UI组件的outline属性发现根本不管用——它只能给整个矩形区域加边框完全不符合卡牌的实际轮廓。后来经过多次尝试最终通过自定义Shader完美解决了这个问题。实测下来Shader方案不仅效果精准还能轻松实现动态调整描边宽度和颜色变化比如实现呼吸灯式的闪烁效果。下面我就把这个踩过坑才掌握的方案分享给大家。2. Shader描边的核心原理2.1 透明度边缘检测实现不规则图片描边的核心思路是通过检测纹理的透明度边缘来确定描边位置。具体来说就是对每个像素点检查其周围8个方向的相邻像素如果当前像素不透明但相邻像素透明那么这个位置就应该被描边。这就像我们用荧光笔标记书本重点时会沿着文字边缘描画一样。Shader中的实现原理也类似bool checkIsMakeOutline(vec2 pos){ float alpha 0.1; vec4 color texture(texture, pos); if(color.a alpha || outlineWidth 0.0) return false; // 检查8个方向的相邻像素 color texture2D(texture, pos vec2(0, outlineWidth)); if(color.a alpha) return true; // 其他7个方向检查省略... }2.2 描边宽度控制描边宽度通过outlineWidth参数控制这个值表示在UV坐标系中的偏移量。比如0.01表示向四周扩展1%的纹理宽度。在实际项目中我通常会把值控制在0.005到0.05之间具体取决于纹理分辨率。需要注意的是太小的值会导致描边不连续太大的值又会使描边过于粗犷。经过多次测试我发现0.01-0.02是最常用的范围。3. 完整Shader代码解析3.1 顶点着色器部分顶点着色器主要负责坐标变换这部分比较常规CCProgram vs %{ precision highp float; #include cc-global #include cc-local in vec3 a_position; in vec4 a_color; out vec4 v_color; #if USE_TEXTURE in vec2 a_uv0; out vec2 v_uv0; #endif void main () { vec4 pos vec4(a_position, 1); #if CC_USE_MODEL pos cc_matViewProj * cc_matWorld * pos; #else pos cc_matViewProj * pos; #endif #if USE_TEXTURE v_uv0 a_uv0; #endif v_color a_color; gl_Position pos; } }%3.2 片段着色器核心逻辑片段着色器是描边效果的关键主要做了三件事采样当前像素颜色进行边缘检测根据检测结果决定是否绘制描边void main () { vec4 o vec4(1, 1, 1, 1); #if USE_TEXTURE o * texture(texture, v_uv0); #endif o * v_color; ALPHA_TEST(o); if(checkIsMakeOutline(v_uv0)){ o vec4(1, 1, 0.7, 1); // 描边颜色 } gl_FragColor o; }4. 动态效果实现技巧4.1 实时调整描边宽度要让描边效果动起来最简单的方式就是动态修改outlineWidth。在Cocos Creator中可以通过Material的setProperty方法实现// 获取材质实例 let material sprite.getMaterial(0); // 动态设置描边宽度 material.setProperty(outlineWidth, 0.02); // 实现呼吸效果 this.schedule(() { let width 0.01 Math.sin(Date.now() * 0.001) * 0.005; material.setProperty(outlineWidth, width); }, 0.016);4.2 描边颜色变化同样的原理也可以应用到描边颜色上。首先需要在Shader中添加颜色uniformuniform InputData{ float outlineWidth; vec4 outlineColor; // 新增描边颜色参数 };然后在片段着色器中使用if(checkIsMakeOutline(v_uv0)){ o outlineColor; }这样就可以在脚本中动态改变描边颜色了比如实现警告闪烁效果// 红黄闪烁 let isRed false; setInterval(() { isRed !isRed; material.setProperty(outlineColor, isRed ? new Color(255, 0, 0) : new Color(255, 255, 0)); }, 500);5. 性能优化建议5.1 控制检测精度默认的8方向检测虽然效果精准但在低端设备上可能会有性能压力。可以根据实际情况减少检测方向// 简化为4方向检测 color texture2D(texture, pos vec2(0, outlineWidth)); if(color.a alpha) return true; color texture2D(texture, pos vec2(outlineWidth, 0)); if(color.a alpha) return true; color texture2D(texture, pos vec2(0, -outlineWidth)); if(color.a alpha) return true; color texture2D(texture, pos vec2(-outlineWidth, 0)); if(color.a alpha) return true;5.2 使用预乘Alpha对于静态描边效果可以考虑在纹理导入时设置预乘AlphaPremultiply Alpha这样可以减少运行时的透明度计算在Cocos Creator的纹理属性中勾选Premultiply Alpha选项5.3 批量处理优化如果场景中有大量需要描边的对象建议将这些对象的渲染批次合并。可以通过以下方式实现使用相同的材质实例控制纹理图集的使用合理安排渲染顺序6. 实际应用案例6.1 游戏角色选中效果在RPG游戏中当玩家选中某个角色时可以用动态描边来高亮显示// 角色选中逻辑 onCharacterSelected(character) { // 移除之前选中角色的描边 if(this.selectedChar) { this.selectedChar.getComponent(Sprite).material null; } // 为新选中角色添加描边 let material new Material(); material.copy(this.outlineMaterial); // 使用预创建的材质模板 character.getComponent(Sprite).material material; // 设置初始描边颜色为蓝色 material.setProperty(outlineColor, new Color(0, 150, 255)); // 保存当前选中角色 this.selectedChar character; }6.2 技能范围提示对于不规则形状的技能范围提示描边效果也非常实用// 技能范围提示 showSkillRange(skill) { let rangeSprite this.skillRangeNode.getComponent(Sprite); rangeSprite.spriteFrame skill.rangeTexture; let material rangeSprite.getMaterial(0); // 根据技能类型设置不同颜色 switch(skill.type) { case attack: material.setProperty(outlineColor, new Color(255, 0, 0)); break; case heal: material.setProperty(outlineColor, new Color(0, 255, 0)); break; } // 脉冲动画效果 let width 0; tween(material) .to(0.5, { outlineWidth: 0.03 }) .to(0.5, { outlineWidth: 0.01 }) .repeatForever() .start(); }7. 常见问题解决7.1 描边出现断裂这个问题通常有两个原因outlineWidth值设置过小纹理边缘Alpha过渡不自然解决方法适当增大outlineWidth在图像处理软件中检查纹理边缘确保Alpha通道过渡平滑在Shader中调整alpha检测阈值7.2 性能消耗过大如果发现使用描边后帧率明显下降可以尝试减少同时使用描边的对象数量使用更简单的检测算法如4方向检测对不重要的对象降低更新频率7.3 移动端兼容性问题在某些低端移动设备上可能会遇到精度问题导致描边不均匀不支持某些Shader特性解决方案在Shader开头使用precision mediump float;降低精度要求添加特性检测和降级方案针对不同设备使用不同的outlineWidth值
Cocos Shader 实现动态不规则图片描边效果
发布时间：2026/5/19 16:51:28
1. 为什么需要动态不规则图片描边在游戏开发中我们经常会遇到需要突出显示某些不规则形状物体的需求。比如角色选中状态、技能范围提示、可交互物品高亮等场景。传统的矩形边框显然无法满足这些需求这时候就需要用到不规则图片描边技术。我最早接触这个需求是在开发一款卡牌游戏时。卡牌都是不规则形状当玩家选中某张卡牌时需要给它加上金色描边效果。最初尝试用UI组件的outline属性发现根本不管用——它只能给整个矩形区域加边框完全不符合卡牌的实际轮廓。后来经过多次尝试最终通过自定义Shader完美解决了这个问题。实测下来Shader方案不仅效果精准还能轻松实现动态调整描边宽度和颜色变化比如实现呼吸灯式的闪烁效果。下面我就把这个踩过坑才掌握的方案分享给大家。2. Shader描边的核心原理2.1 透明度边缘检测实现不规则图片描边的核心思路是通过检测纹理的透明度边缘来确定描边位置。具体来说就是对每个像素点检查其周围8个方向的相邻像素如果当前像素不透明但相邻像素透明那么这个位置就应该被描边。这就像我们用荧光笔标记书本重点时会沿着文字边缘描画一样。Shader中的实现原理也类似bool checkIsMakeOutline(vec2 pos){ float alpha 0.1; vec4 color texture(texture, pos); if(color.a alpha || outlineWidth 0.0) return false; // 检查8个方向的相邻像素 color texture2D(texture, pos vec2(0, outlineWidth)); if(color.a alpha) return true; // 其他7个方向检查省略... }2.2 描边宽度控制描边宽度通过outlineWidth参数控制这个值表示在UV坐标系中的偏移量。比如0.01表示向四周扩展1%的纹理宽度。在实际项目中我通常会把值控制在0.005到0.05之间具体取决于纹理分辨率。需要注意的是太小的值会导致描边不连续太大的值又会使描边过于粗犷。经过多次测试我发现0.01-0.02是最常用的范围。3. 完整Shader代码解析3.1 顶点着色器部分顶点着色器主要负责坐标变换这部分比较常规CCProgram vs %{ precision highp float; #include cc-global #include cc-local in vec3 a_position; in vec4 a_color; out vec4 v_color; #if USE_TEXTURE in vec2 a_uv0; out vec2 v_uv0; #endif void main () { vec4 pos vec4(a_position, 1); #if CC_USE_MODEL pos cc_matViewProj * cc_matWorld * pos; #else pos cc_matViewProj * pos; #endif #if USE_TEXTURE v_uv0 a_uv0; #endif v_color a_color; gl_Position pos; } }%3.2 片段着色器核心逻辑片段着色器是描边效果的关键主要做了三件事采样当前像素颜色进行边缘检测根据检测结果决定是否绘制描边void main () { vec4 o vec4(1, 1, 1, 1); #if USE_TEXTURE o * texture(texture, v_uv0); #endif o * v_color; ALPHA_TEST(o); if(checkIsMakeOutline(v_uv0)){ o vec4(1, 1, 0.7, 1); // 描边颜色 } gl_FragColor o; }4. 动态效果实现技巧4.1 实时调整描边宽度要让描边效果动起来最简单的方式就是动态修改outlineWidth。在Cocos Creator中可以通过Material的setProperty方法实现// 获取材质实例 let material sprite.getMaterial(0); // 动态设置描边宽度 material.setProperty(outlineWidth, 0.02); // 实现呼吸效果 this.schedule(() { let width 0.01 Math.sin(Date.now() * 0.001) * 0.005; material.setProperty(outlineWidth, width); }, 0.016);4.2 描边颜色变化同样的原理也可以应用到描边颜色上。首先需要在Shader中添加颜色uniformuniform InputData{ float outlineWidth; vec4 outlineColor; // 新增描边颜色参数 };然后在片段着色器中使用if(checkIsMakeOutline(v_uv0)){ o outlineColor; }这样就可以在脚本中动态改变描边颜色了比如实现警告闪烁效果// 红黄闪烁 let isRed false; setInterval(() { isRed !isRed; material.setProperty(outlineColor, isRed ? new Color(255, 0, 0) : new Color(255, 255, 0)); }, 500);5. 性能优化建议5.1 控制检测精度默认的8方向检测虽然效果精准但在低端设备上可能会有性能压力。可以根据实际情况减少检测方向// 简化为4方向检测 color texture2D(texture, pos vec2(0, outlineWidth)); if(color.a alpha) return true; color texture2D(texture, pos vec2(outlineWidth, 0)); if(color.a alpha) return true; color texture2D(texture, pos vec2(0, -outlineWidth)); if(color.a alpha) return true; color texture2D(texture, pos vec2(-outlineWidth, 0)); if(color.a alpha) return true;5.2 使用预乘Alpha对于静态描边效果可以考虑在纹理导入时设置预乘AlphaPremultiply Alpha这样可以减少运行时的透明度计算在Cocos Creator的纹理属性中勾选Premultiply Alpha选项5.3 批量处理优化如果场景中有大量需要描边的对象建议将这些对象的渲染批次合并。可以通过以下方式实现使用相同的材质实例控制纹理图集的使用合理安排渲染顺序6. 实际应用案例6.1 游戏角色选中效果在RPG游戏中当玩家选中某个角色时可以用动态描边来高亮显示// 角色选中逻辑 onCharacterSelected(character) { // 移除之前选中角色的描边 if(this.selectedChar) { this.selectedChar.getComponent(Sprite).material null; } // 为新选中角色添加描边 let material new Material(); material.copy(this.outlineMaterial); // 使用预创建的材质模板 character.getComponent(Sprite).material material; // 设置初始描边颜色为蓝色 material.setProperty(outlineColor, new Color(0, 150, 255)); // 保存当前选中角色 this.selectedChar character; }6.2 技能范围提示对于不规则形状的技能范围提示描边效果也非常实用// 技能范围提示 showSkillRange(skill) { let rangeSprite this.skillRangeNode.getComponent(Sprite); rangeSprite.spriteFrame skill.rangeTexture; let material rangeSprite.getMaterial(0); // 根据技能类型设置不同颜色 switch(skill.type) { case attack: material.setProperty(outlineColor, new Color(255, 0, 0)); break; case heal: material.setProperty(outlineColor, new Color(0, 255, 0)); break; } // 脉冲动画效果 let width 0; tween(material) .to(0.5, { outlineWidth: 0.03 }) .to(0.5, { outlineWidth: 0.01 }) .repeatForever() .start(); }7. 常见问题解决7.1 描边出现断裂这个问题通常有两个原因outlineWidth值设置过小纹理边缘Alpha过渡不自然解决方法适当增大outlineWidth在图像处理软件中检查纹理边缘确保Alpha通道过渡平滑在Shader中调整alpha检测阈值7.2 性能消耗过大如果发现使用描边后帧率明显下降可以尝试减少同时使用描边的对象数量使用更简单的检测算法如4方向检测对不重要的对象降低更新频率7.3 移动端兼容性问题在某些低端移动设备上可能会遇到精度问题导致描边不均匀不支持某些Shader特性解决方案在Shader开头使用precision mediump float;降低精度要求添加特性检测和降级方案针对不同设备使用不同的outlineWidth值
