网页体验链接 / Cocos Store
效果演示：
组件介绍：
全新推出的 SpriteOutline 组件，为您的精灵图片实现更炫酷的描边和发光特效，兼具美观与性能优势。通过实时生成 SDF（有符号距离场）纹理，并结合自定义 Shader，实现更流畅、边缘更柔和的描边动画。
核心原理：
在运行时基于目标贴图生成 SDF 纹理，通过 Shader 使用该纹理即可实现多种视觉特效。以下为 Shader 核心逻辑片段：
float time = cc_time.x;
float sdf = texture(cc_spriteTexture, uv0).a;
float outlineWidth = color.x;
int u_mode = int(floor(color.y * 255.0 + 1e-5));
bool u_breath_ani = abs(color.z * 255.0 - 1.0) < 1e-5;
// 计算边缘距离（>0：边界内，<0：边界外）
float dist = (sdf - 0.5) * 2.0;
float absDist = abs(dist);
if (u_mode == 1 && dist > 0.0) discard;
if (u_mode == 2 && dist < 0.0) discard;
if (u_mode == 0) discard;
// 呼吸动画效果
float pulse = 1.0;
if (u_breath_ani) {
pulse = 0.75 + 0.25 * sin(time * 3.0);
}
float a = (1.0 - smoothstep(0.0, outlineWidth, absDist)) * pulse;
vec4 col = vec4(u_outlineColor.rgb, a);
参数配置：
SpriteOutline 继承自原生 Sprite 组件，设置 spriteFrame，即可自动启用发光效果。
SDF 生成相关参数：
- alphaThreshold：用于透明度二值化处理，将原图透明度按此阈值分为 0 和 255，范围 [0,1]。
- radius：控制生成的 SDF 模糊程度，单位为像素。
- minTransparencyWidth：确保 SDF 边缘最少留有一定空白，必要时自动扩展贴图尺寸，方便描边显示。
Shader 控制参数：
- outlineWidth：控制描边宽度，范围 [0,1]。
- outlineMode: inner内描边，out外描边，both双描边
关于 SDF 纹理
SDF（Signed Distance Field）纹理是一种灰度图，它通过透明度（alpha）来表示每个像素距离图形边缘的远近：
- alpha = 0.5：表示图形边界
- alpha > 0.5：图形内部
- alpha < 0.5：图形外部
相较于传统的像素遍历描边方式，基于 SDF 的方法不仅性能更高、计算量更小，而且视觉效果更加柔和自然，尤其适合用于发光、描边等特效。
SDF 纹理的生成部分参考了 GT 大佬在 此帖 中的思路，并进行了功能模块化，支持在 Cocos Creator 3.x 环境下对任意 Texture2D 进行实时 SDF 转换。我们还提供了一个网页版本的 SDF 在线生成工具，方便开发者预览与调试。
附赠工具：
购买本组件源码，即打包赠送以上 SDF 纹理生成插件！
其他精品推荐：
-
cc_debuger_realtime
强烈推荐的实时调试利器！ -
极简无侵入新手引导
零侵入、易配置的新手引导系统。 -
shader学习之倒水小游戏
值得收藏的 Shader 入门实践范例，应该是市面上许多倒水游戏的母版。论坛地址
码农help码农，请抵制盗版
