演示demo：https://gitee.com/szrpf/GlowRim
一、效果演示：
二、功能介绍
首先打开Demo，找到 内外发光/Sprite 节点的GlowRim组件
- 外发光 ：是否显示外发光，勾选后才会显示外发光参数
- 样式 ：外发光样式：纯色描边、透明衰减、明暗衰减
- 颜色 ：外发光颜色
- 宽度 ：外发光宽度
- 内发光 ：是否显示内发光，勾选后才会显示内发光参数
- 明暗度 ：调节原图明暗度，0-最暗 1-正常 5-最亮
可通过代码动态修改以上属性，GlowRim无需import，通过 gi.GlowRim 全局访问
三、如何在自己的项目中使用GlowRim
Step 1：复制Demo中这3个文件到自己项目assets目录下，具体层级不限
Step 2：新建一个Sprite节点， GlowRim.mtl 拖自定义材质， GlowRim.ts 拖组件
Step 3：搞定！编辑器修改参数，也可以在代码中动态修改
注意，修改effect代码后，记得重新导入资源
四、实现原理
计算当前像素 与 图片边缘的最小距离minDis
透明像素是图片外部，非透明像素是图片内部
因此，外发光只需要在透明像素中查找即可
以当前像素为中心，向12个方向画线段，每条线段均匀分布8个点
首先，从中心开始向右遍历8个点
如果发现非透明像素，则找到轮廓边缘，记录中心点与轮廓的距离minDis
以此类推，遍历完12条线段后，得到一个最终minDis，就是该点与轮廓的最短距离
根据minDis给该点设置颜色值：
- 纯色描边
只要minDis < 线段长度，就代表该点在边缘附近，设置改点色值为外发光颜色 - 透明衰减
minDis越小，代表离图片边缘越近，越不透明
minDis越大，代表离图片边缘越远，越透明 - 明暗衰减
透明衰减只衰减alpha，明暗衰减是rgb和alpha一起衰减
内发光同理，只是改成在“非透明像素”中查找
扩展一下，将12和8设置成宏，方便随时调整大小，数值越大minDis越精确，但性能消耗也越大
外发光超出图片范围会被截断，因此：
- GlowRim.effect将图片向中心缩小N倍，确保外发光不超出图片范围
- GlowRim.ts将图片放大N倍，保证图片视觉尺寸与原图一致
五、Snapshot（给所有子节点拍个全家福）
将Spine的材质设置为GlowRim会显示异常
因为Spine是由多张Sprite拼接而成的，而Shader只对单张Sprite生效
给父节点添加Snapshot，就可以将所有子节点渲染到父节点的Sprite上
这样一来，只要将父节点的Sprite材质设置成GlowRim就可以了
使用步骤
Step 1：新建一个父节点，将需要合并渲染的Sprite（或Label）统统设置成子节点
Step 2：给父节点添加Snapshot组件，Sprite组件会跟随Snapshot自动添加
Step 3：设置父节点尺寸覆盖所有子节点
Step 4：设置父节点的Sprite材质为GlowRim.mtl
Step 5：给父节点添加GlowRim.ts组件，设置发光参数，搞定！
注意
- Snapshot原理是离屏Camera，因此编辑器中看不到效果，只能运行后看效果
- Snapshot节点尺寸决定合图的尺寸，如果不想内容被裁剪，就确保节点尺寸能覆盖所有子节点
恭喜你拿到Shader初中毕业证书，拯救世界的任务就交给你了~~
我的Shader是跟着Vajoy大佬的教程学的：https://store.cocos.com/app/detail/7793
对Shader感兴趣的欢迎下单！
原教程地址：https://juejin.cn/post/7526727697499291674
Gitee地址：https://gitee.com/szrpf
EMail地址：27185709@qq.com
推荐链接：
1、【包教包会】CocosShader零基础入门
2、【包教包会】Shader实战——挖洞（战斗迷雾、放大镜、新手引导、转场动画）
4、【包教包会】CocosCreator3.x全局单例最优解
5、【包教包会】节点扩展（支持原生，附引擎源码查询教程、skew翻页教程）
