1. 项目概述从“画个圈”到“智能描边”的进化在游戏开发尤其是2D游戏里给角色、技能范围或者重要道具加个高亮描边是个再常见不过的需求了。新手可能会想“这还不简单让美术同学在图片外面多画一圈颜色不就行了” 确实对于静态、规则形状的图标这招管用。但一旦遇到动态变化的角色轮廓、不规则形状的UI元素或者需要实时根据游戏状态改变描边颜色和粗细时静态贴图就彻底抓瞎了。你总不能为角色的每一个动作帧、每一个可能的轮廓变化都让美术画一套带描边的图片吧那工作量是灾难性的。这就是我们今天要啃的硬骨头用Cocos Shader实现动态不规则图片的描边效果。所谓“动态”意味着描边可以随时开启关闭、改变颜色、调整宽度甚至做出脉动、闪烁等动画。而“不规则图片”则指任何非纯矩形、形状复杂的精灵Sprite比如一个挥舞着武器的角色、一棵枝叶繁茂的树、一个不规则的魔法阵图案。这个技术的核心价值在于它完全通过程序实时计算生成描边解放了美术赋予了策划和程序极大的灵活性。无论是用于标记当前选中的单位还是提示技能的作用范围亦或是营造某种视觉特效都是一个性价比极高的解决方案。我最早是在一个卡牌对战项目里被这个需求逼到墙角的。策划想要一个效果当玩家手指悬停在某张卡牌上时卡牌上的角色立绘要有一个柔和的金色光晕描边。我们的角色立绘都是带透明通道的不规则PNG图。最初尝试用放大Sprite然后叠加一个纯色底图的“土法”结果描边又蠢又钝在角色头发、武器等细节处根本没法看。于是只能硬着头皮研究Shader趟出了一条路。下面我就把这条路上的坑、桥以及沿途风景详细分享给你。2. 核心思路与方案选型为什么是后处理与Sobel实现动态不规则描边主流思路有几种我们需要根据Cocos Creator引擎的特点和项目需求来权衡。2.1 常见方案对比与淘汰方案一多重绘制Multi-Pass这个思路很直观把原始Sprite用不同颜色和轻微放大的尺寸多画几次。比如先画一个放大一点的纯色版本作为描边再在上面画原始图片。优点实现简单不依赖Shader也能用代码组合实现。缺点性能差每多一层描边就多一次Draw Call描边效果生硬特别是对于有尖角或复杂镂空的图形放大会导致描边不均匀、有断点难以实现渐变、模糊等高级效果。对于追求效果和性能的项目这基本是第一个被淘汰的方案。方案二基于几何轮廓的描边在3D模型中很常见即沿着顶点法线方向挤出网格。但在2D精灵这里我们处理的是纹理贴图没有顶点法线信息。虽然可以尝试用网格工具手动为2D图片生成轮廓线但这又回到了静态美术工作的老路无法动态变化不满足我们的“动态”需求。方案三基于后处理的图像边缘检测我们选择的方案这是目前2D游戏实现高质量、动态描边的最主流且灵活的方法。其核心思想是不直接处理原始精灵而是先把整个场景或特定节点渲染到一张离屏的纹理RenderTexture上然后对这个“场景快照”进行图像处理找出所有物体的边缘再将这些边缘信息渲染为描边效果最后叠加回原画面。在Cocos Creator中这通常意味着使用RenderTexture结合自定义RenderFeature或PostProcess后处理流程来实现。2.2 边缘检测算法选型Sobel算子为何胜出边缘检测的本质是计算图像中像素灰度的突变。常见的算子有Roberts、Prewitt、Sobel、Laplacian等。Roberts Prewitt计算简单但对噪声敏感边缘检测结果较粗。Laplacian对边缘的定位更准确但对噪声极其敏感通常需要先做高斯模糊计算量较大。Sobel算子它在Prewitt算子的基础上为邻近像素赋予了更高的权重一个典型的Sobel卷积核是[1, 2, 1]而不是[1, 1, 1]这使得它在抑制噪声方面表现更好检测出的边缘更平滑、连续且计算量适中。对于游戏视觉特效来说平滑连续的描边观感上通常优于锐利但可能断断续续的边缘。因此Sobel算子成为了游戏描边效果事实上的标准选择。它通过两个方向水平Gx和垂直Gy的卷积核来分别检测横向和纵向的边缘最后通过计算sqrt(Gx^2 Gy^2)来得到边缘强度。这个强度值就直接决定了描边的“存在感”。2.3 Cocos Creator中的实现路径在Cocos Creator 3.x版本中引擎渲染架构升级提供了更强大的可编程渲染管线能力。实现后处理描边主要有两种途径自定义RenderFeature这是更底层、更灵活的方式。你可以创建一个继承自RenderFeature的类将其插入到渲染流程的特定阶段通常是透明物体渲染之后UI渲染之前在其中完成抓取RenderTexture、执行Shader、混合输出的全部操作。这种方式性能控制精细但实现复杂度较高。使用PostProcess后处理框架Cocos Creator 3.8 版本逐渐完善了后处理框架。你可以通过添加后处理组件和自定义后处理特效Effect来实现。这种方式更“引擎化”集成相对方便但可能受限于框架本身的更新和功能覆盖。考虑到通用性和理解深度本文将聚焦于自定义RenderFeature的方案。虽然步骤稍多但它能让你彻底掌握从渲染目标抓取到最终合成的完整链条以后做任何屏幕效果都能触类旁通。理解了这种方案使用PostProcess框架只会更轻松。注意无论哪种路径其Shader核心原理——Sobel边缘检测——是完全相同的。我们学习的重点是Shader算法和渲染流程思想。3. 核心Shader解析手写Sobel边缘检测一切的核心在于那段运行在GPU上的着色器代码。我们把它拆开揉碎了看。3.1 着色器输入与参数定义首先我们需要一些参数来控制描边的外观uniform Constants { vec4 outlineColor; // 描边颜色 (RGBA) float outlineThreshold; // 边缘检测灵敏度阈值 (0.0~1.0) float outlineWidth; // 描边宽度 (基于像素偏移) vec2 textureSize; // 输入纹理的尺寸 (width, height) };outlineColor很好理解就是描边的颜色通常alpha值设为小于1.0以得到半透明光晕感。outlineThreshold这是关键参数。Sobel计算出的边缘强度是一个连续值比如0到1。我们需要一个“门槛”来决定多强的边缘才算边缘。阈值设得太低画面中一些细微的纹理变化也可能被误检为描边导致效果“脏”设得太高则可能漏掉一些柔和的边缘。通常需要根据具体美术资源在编辑器里微调。outlineWidth它决定了我们采样像素时的偏移距离。宽度越大采样点离当前像素越远检测到的边缘就越“粗”。注意这个“粗”不是简单变胖而是由更远的像素差异决定的有时会导致描边位置外移。textureSize用于计算每个像素在纹理坐标空间中的实际大小一个纹素对应的UV偏移量即pixelSize vec2(1.0) / textureSize。没有这个我们就无法进行正确的邻域像素采样。3.2 灵魂函数Alpha边缘检测描边只关心物体的轮廓而轮廓信息主要存储在纹理的Alpha通道透明度中。因此我们的边缘检测是基于Alpha值进行的。float sampleAlpha(sampler2D tex, vec2 uv) { return texture(tex, uv).a; // 只取Alpha通道 } float sobelAlpha(sampler2D tex, vec2 uv, vec2 pixelStep) { // 定义Sobel算子卷积核所需的3x3网格偏移 // 左上 中上 右上 // 左中 (中心) 右中 // 左下 中下 右下 float topLeft sampleAlpha(tex, uv vec2(-pixelStep.x, pixelStep.y)); float top sampleAlpha(tex, uv vec2( 0.0, pixelStep.y)); float topRight sampleAlpha(tex, uv vec2( pixelStep.x, pixelStep.y)); float midLeft sampleAlpha(tex, uv vec2(-pixelStep.x, 0.0)); // float midCenter sampleAlpha(tex, uv); // 中心点计算中用不到 float midRight sampleAlpha(tex, uv vec2( pixelStep.x, 0.0)); float bottomLeft sampleAlpha(tex, uv vec2(-pixelStep.x, -pixelStep.y)); float bottom sampleAlpha(tex, uv vec2( 0.0, -pixelStep.y)); float bottomRight sampleAlpha(tex, uv vec2( pixelStep.x, -pixelStep.y)); // 应用Sobel卷积核计算梯度 // Gx (-1, 0, 1) Gy ( 1, 2, 1) // (-2, 0, 2) ( 0, 0, 0) // (-1, 0, 1) (-1,-2,-1) float gx -1.0 * topLeft 0.0 * top 1.0 * topRight -2.0 * midLeft 0.0 * 0.0 2.0 * midRight -1.0 * bottomLeft 0.0 * bottom 1.0 * bottomRight; float gy 1.0 * topLeft 2.0 * top 1.0 * topRight 0.0 * midLeft 0.0 * 0.0 0.0 * midRight (-1.0) * bottomLeft (-2.0) * bottom (-1.0) * bottomRight; // 计算梯度幅度边缘强度 float edgeStrength sqrt(gx * gx gy * gy); // 归一化处理Sobel结果范围可能很大我们将其映射到[0,1]区间。 // 这里的除数8.0是一个经验值对应了Sobel算子可能的最大梯度值近似范围。 edgeStrength clamp(edgeStrength / 8.0, 0.0, 1.0); return edgeStrength; }这段代码是Shader的心脏。它在一个像素的周围3x3区域内采样9个点的Alpha值然后分别与Sobel算子的Gx和Gy核进行卷积。gx反映了水平方向上的透明度变化gy反映了垂直方向上的变化。两者结合求平方和的平方根得到的edgeStrength就代表了该像素点处于边缘的“可能性”强度。实操心得clamp(edgeStrength / 8.0, 0.0, 1.0)这里的除数8.0不是绝对的。它依赖于你outlineWidth缩放后pixelStep的实际大小以及Alpha的对比度。有时你可能需要调整这个除数来让edgeStrength更好地分布在0-1之间以便用outlineThreshold进行调节。一个调试技巧是在Fragment Shader里暂时返回vec4(edgeStrength, edgeStrength, edgeStrength, 1.0)来可视化边缘强度图你会看到一个灰阶图越白的地方边缘响应越强。3.3 片段着色器合成最终效果最后在片段着色器里我们将边缘检测的结果与原始颜色混合。in vec2 v_uv; layout(location 0) out vec4 o_color; void frag() { vec2 pixelStep vec2(outlineWidth) / textureSize; // 计算每个像素的UV步进 float edge sobelAlpha(cc_spriteTexture, v_uv, pixelStep); // 读取原始颜色 vec4 originalColor texture(cc_spriteTexture, v_uv); // 判断如果边缘强度超过阈值则使用描边颜色否则使用原始颜色或混合 if (edge outlineThreshold) { // 完全替换为描边颜色适用于硬边 // o_color outlineColor; // 更常用的方式基于边缘强度进行Alpha混合实现柔和过渡 float blendFactor smoothstep(outlineThreshold, outlineThreshold 0.1, edge); o_color mix(originalColor, outlineColor, blendFactor); // 注意这里直接混合会导致描边覆盖内部区域。更优方案见下文“深度与混合”章节。 } else { o_color originalColor; } }初版Shader可能像上面这样写。但这里有个大问题当originalColor的Alpha很低比如0时mix操作的结果可能仍然带有描边颜色这会导致在物体完全透明Alpha0的区域内部也因为边缘检测而出现了本不该有的描边色块。4. 构建完整的后处理渲染流程仅有Shader是不够的我们需要在Cocos Creator的渲染管线中搭建一个舞台让它运行。4.1 创建RenderTexture与相机首先我们需要一个“摄影师”把需要描边的场景拍下来。创建RenderTexture资产在资源管理器右键创建RenderTexture命名为outlineRT。设置合适的分辨率通常与屏幕或设计分辨率一致。创建专用相机新建一个节点添加Camera组件。清除颜色设为(0,0,0,0)即完全透明黑色。这点至关重要因为我们只需要它拍摄有内容的物体。渲染目标选择刚才创建的outlineRT。这样这个相机渲染的内容就不会直接画到屏幕上而是输出到outlineRT这张纹理里。可见性图层只勾选你需要描边的物体所在的图层例如DEFAULT或自定义的OUTLINE_LAYER。通过图层来控制哪些物体参与描边这是实现“选择性描边”的关键。优先级将这个相机的优先级设为比主相机更高确保它先执行渲染。4.2 实现自定义RenderFeature这是整个流程中最具技术含量的一步。RenderFeature是渲染管线中的一个功能模块。创建RenderFeature脚本新建一个TypeScript脚本例如OutlineRenderFeature.ts继承自RenderFeature。关键生命周期方法initialize: 在这里创建渲染用的Material实例使用我们编写的描边Effect并获取或创建用于全屏渲染的Mesh通常是一个四边形。render: 这是核心。在这个方法里我们需要 a.激活我们的RenderTexture作为渲染目标。 b.设置视口和清屏用透明色。 c.执行一次渲染将outlineRT作为输入纹理传入我们的描边Material并绘制全屏四边形。这一步就是调用GPU执行我们的Sobel Shader。 d.将结果输出到屏幕或另一个RenderTexture。注册到渲染管线你需要修改或创建一个自定义的RenderPipeline在它的initialize方法中将你的OutlineRenderFeature实例添加到pipeline.renderFeatures数组中并确保其顺序正确通常在所有不透明和透明物体渲染之后UI渲染之前。4.3 深度与混合解决“内部描边”顽疾回到之前Shader留下的问题。我们想要的描边应该只出现在物体外部轮廓而不是在物体内部透明区域也画上颜色。问题的根源在于我们的后处理是对整张outlineRT包含了物体和透明背景进行的Sobel算子无法区分“物体内部的透明”和“物体外部的透明”。解决方案利用深度或模板测试进行遮挡。思路是只在不透明物体占据的屏幕区域之外绘制描边。修改专用相机除了颜色让这个相机也输出深度信息depthStencil。修改Shader和渲染流程在OutlineRenderFeature的渲染过程中我们有两张关键纹理outlineRT颜色Alpha和对应的深度纹理。Pass 1: 生成边缘遮罩。运行一个简化版的Sobel Shader只计算边缘强度并输出到一张单通道如R通道的临时RenderTexture中这个纹理可以叫edgeMaskRT。它记录了“哪里是边缘”。Pass 2: 应用描边并合成。再运行一个全屏Shader输入是edgeMaskRT和原始场景颜色sceneColorRT主相机渲染的结果。// 伪代码逻辑 float edge texture(edgeMaskRT, uv).r; // 读取边缘强度 vec4 sceneColor texture(sceneColorRT, uv); // 读取最终场景颜色 float sceneDepth texture(depthTexture, uv).r; // 读取场景深度 // 关键判断只有当当前像素的深度值大于背景深度即当前像素是物体时才考虑描边 // 不更准确的逻辑是我们只在“边缘强度高”且“该像素原本是背景透明或深度值表示背景”的地方绘制描边。 // 一种常见技巧在渲染outlineRT时将不透明物体的深度写入。 // 在合成时检查edgeMask。如果edgeMask阈值且当前合成Pass的像素属于背景则用描边颜色与场景颜色混合。实际操作中更清晰的做法是利用模板缓冲。让主相机渲染不透明物体时写入一个模板值比如1。然后在后处理绘制描边时设置模板测试条件为“不等于1”这样描边就只会画在模板值为1的物体区域之外了完美实现了外描边。踩坑实录深度/模板方案虽然精准但增加了渲染复杂度。对于很多2D游戏所有物体都在一个平面上没有深度交错一个取巧但有效的方案是在Shader中不仅检查边缘强度还检查当前像素的原始Alpha值。如果边缘强度高但原始Alpha也高比如大于0.5说明这个像素很可能在物体内部靠近边缘的地方我们就减弱或取消这里的描边。float blendFactor edge; // 假设edge是0-1的强度 float interiorMask 1.0 - smoothstep(0.3, 0.8, originalColor.a); // 原始不透明度越高interiorMask越小 blendFactor * interiorMask; // 用内部遮罩削弱物体内部的边缘响应 o_color mix(originalColor, outlineColor, blendFactor);这个办法不是物理准确的但通过调节smoothstep的参数在视觉上能很大程度缓解“内部描边”问题且性能开销极小在要求不极端苛刻的项目中非常实用。5. 性能优化与进阶技巧一个基础可用的描边效果做出来了但要放到真实项目中尤其是移动端我们必须考虑性能。5.1 性能瓶颈分析与优化降低采样分辨率全屏后处理对每个像素都要进行至少9次纹理采样Sobel 3x3。一个直接暴力的优化是将outlineRT的尺寸设为屏幕尺寸的1/2甚至1/4。在低分辨率下进行边缘检测然后在合成阶段再上采样到屏幕分辨率。由于描边本身是模糊的视觉效果分辨率降低带来的质量损失在大多数情况下难以察觉但性能提升是线性的像素数变为1/4计算量也约变为1/4。实现创建outlineRT时设置较小的尺寸或者使用相机的renderTarget的width和height属性进行动态设置。优化Shader指令预先计算pixelStep可以在CPU端计算好vec2(1.0/textureSize.x, 1.0/textureSize.y) * outlineWidth作为一个uniform传入Shader减少GPU计算量。使用textureGather指令如果支持一些GPU提供textureGather函数可以一次采样获取2x2区域的四个纹素可以用来优化3x3采样模式减少采样次数。但需考虑兼容性。简化Sobel计算有时为了极致的性能可以放弃精确的梯度计算改用近似公式比如edge abs(gx) abs(gy)省去开方操作。控制渲染范围不是所有东西都需要描边。通过相机的视锥体裁剪和图层遮罩确保只渲染必要的物体到outlineRT。避免UI元素、全屏背景等不需要描边的物体进入这个流程。5.2 动态效果扩展描边不仅仅是静态的。结合游戏逻辑我们可以让它“活”起来。脉动描边在Shader中引入时间变量cc_time.x让outlineWidth或outlineColor的亮度随着正弦函数变化产生呼吸式的脉动效果非常适合用于提示可交互物品或危险区域。float pulse sin(cc_time.x * 3.14159 * 2.0 * pulseSpeed) * 0.5 0.5; // 生成0-1的脉冲波形 float dynamicWidth outlineWidth * (1.0 pulse * pulseAmplitude); // 动态宽度 vec3 dynamicColor outlineColor.rgb * (1.0 pulse * 0.5); // 动态颜色亮度闪烁描边更急促的开关效果可以通过判断时间取整来实现。float blink step(0.5, fract(cc_time.x * blinkFrequency)); // 以blinkFrequency频率在0和1之间切换 vec4 finalOutlineColor outlineColor * blink; // 描边颜色乘以blink实现闪烁距离场描边对于需要非常精确、且可做动态形变如膨胀、收缩的描边可以考虑在预处理阶段为角色生成一张距离场纹理。在运行时Shader中只需要对距离场进行简单的阈值比较就能得到平滑且可动态控制的描边性能极高效果极好。但这需要额外的美术工具链或运行时生成距离场复杂度更高。5.3 与引擎UI的兼容性Cocos Creator中UI组件如Sprite、Label通常由UI渲染批次处理而我们的后处理相机默认可能渲染不到它们。如果你需要给UI元素加描边有几种方法将UI节点放在3D节点下不推荐会破坏UI的渲染顺序和批处理。为UI相机也添加后处理为渲染UI的相机单独复制一套后处理流程但这会显著增加Draw Call。使用内置的UI EffectCocos Creator的UI组件支持自定义Material。你可以编写一个基于Sobel的UI Shader直接赋给需要描边的UI Sprite。这种方法最直接性能影响局限于使用了该材质的UI但每个Sprite独立计算无法做跨物体的边缘处理。我的选择对于需要描边的UI我通常让美术直接出带描边的图或者使用简单的多重绘制对于静态UI性能可以接受。将动态描边技术重点用在游戏世界中动态变化的角色和物体上。分清主次合理选择技术方案。6. 常见问题排查与调试技巧即使按照步骤来你也可能会遇到各种妖魔鬼怪。这里记录几个我踩过的坑和解决方法。问题现象可能原因排查步骤与解决方案屏幕一片黑或纯色RenderTexture未正确清屏或Shader输出错误。1. 检查相机ClearFlags确保清除了颜色Solid_Color且颜色为透明黑(0,0,0,0)。2. 在Shader中先直接返回vec4(1.0, 0.0, 0.0, 1.0)测试Shader是否被执行。再逐步返回纹理采样结果、边缘强度图定位问题阶段。描边位置偏移或错乱textureSize传入错误或pixelStep计算有误。1. 确保textureSizeuniform传入的是outlineRT的实际像素尺寸vec2(rt.width, rt.height)。2. 在Shader中输出pixelStep或基于它计算的UV作为颜色检查其变化是否符合预期。描边太“脏”背景有噪点outlineThreshold阈值过低或原始纹理Alpha通道有噪点。1. 提高outlineThreshold值。2. 在Sobel采样前对Alpha通道进行一次简单的模糊或平滑处理如3x3均值滤波但会增加开销。3. 检查美术资源确保透明区域的Alpha是干净的0而不是接近0的极小数。描边在物体内部出现未正确处理物体内部透明区域与背景的关系。1. 采用上文提到的“内部遮罩”技巧用原始Alpha值来抑制内部描边。2. 升级到使用深度/模板测试的精准方案。3. 检查角色纹理是否在非边缘的内部区域也有Alpha渐变如果是可能需要美术调整或提高阈值。性能开销巨大全屏高分辨率处理或渲染了过多物体到outlineRT。1.立即尝试将outlineRT分辨率减半观察效果和帧率变化。2. 使用渲染统计面板查看增加了多少Draw Call和三角形数量。确保专用相机的裁剪和图层设置正确。3. 考虑是否真的需要每帧都进行描边对于非高频更新的对象可以降低更新频率。在真机上效果异常或崩溃Shader语法或精度问题或RenderTexture格式不支持。1. 检查GLSL ES版本Cocos Creator移动端主要是100 es。避免使用桌面版才支持的特性。2. 明确声明浮点数精度precision highp float;。3. 确保RenderTexture的格式如RGB565, RGBA4444与真机GPU支持格式匹配。通常使用默认的RGBA8更安全。调试利器Frame Debugger 与 Shader输出调试遇到诡异问题不要瞎猜。Cocos Creator的渲染调试器如果版本支持或通过代码临时修改Shader输出颜色是定位问题的两大法宝。颜色调试法在Fragment Shader里暂时将输出改为某个中间变量。比如o_color vec4(edge, edge, edge, 1.0);可以查看边缘强度图o_color vec4(pixelStep.x*100.0, pixelStep.y*100.0, 0.0, 1.0);可以查看UV偏移是否正常。通过颜色你能直观地看到每一阶段的数据状态。简化测试法用一个纯色的、规则形状如圆形的图片进行测试排除美术资源复杂性的干扰。确认基础功能正常后再换上复杂的角色纹理。实现一个鲁棒的动态描边效果就像雕琢一件武器。它需要你对图形学基础卷积、边缘检测、引擎渲染流程相机、RenderTexture、RenderFeature以及Shader编程都有扎实的理解。这个过程可能会反复调试但当看到角色在屏幕上随着你的代码亮起一道流畅的光边并且这个光边还能随着你的心意变化颜色、跳动闪烁时那种成就感是无与伦比的。希望这篇长文能成为你手中一份详尽的“锻造图纸”助你打造出属于自己项目的锋利视觉武器。