效果
首先我们看下想要的效果
这是原图片
素材是AssetStore 免费资源
工具
1.UniversalRP 渲染管线
- 2D Light 新的2d光照系统
- Post Processing 屏幕后处理里的 Bloom 效果
实现
1.创建URPAsset 及 2DRedndererData （这个其他文章里有）
2.创建后处理配置选项
在Hierarchy面板 右键--> Volume --> Clobal Volume 保存
然后在配置文件里Add Override 添加 Bloom效果
把相机属性 Post processing 选项打开
添加一张sprite到场景中，新建一个2D光照
调节Bloom里的参数 就会看到效果变化
前置效果实现
2d图片部分高亮效果
这里需要两张图片 原图和高亮区域的图片（高亮部分白色其他区域为黑色，RGB全为1 为白色 ,为零 黑色）
高亮区域是我在 Aseprite软件里简单涂色制作的，所以比较粗糙
由于我们要自定义图片的显示效果所以不需要默认的 Sprite-Lit-Default 带2d光照材质，Create-->Shader-->Universal R
ender Pipeline-->Sprite Unlit shader
在创建的shader上创建 Material
双击使用ShaderForge编辑Shader
MainTex 为原图 （这个命名非常重要，和图片属性里是对应的）
Emission 为高亮区域图
Color 为开启了HDR的颜色选项
通过将高亮区域和颜色相乘 再和原图叠加 就得到我们想要的效果
将场景里的图片材质替换为我们制作的材质
Outline Light 效果
实现理论和 Text 的 Outline 一样通过 在原始图片下叠加4个方向偏移的单色图片 实现外边沿效果 加上 HDR 就得到了外边沿发光效果
现在就通过shader实现这个效果
1.底色偏移
2.x 轴双向偏移叠加 对偏移量进行取反
3.xy轴四向叠加
- 由于叠加可能造成 alpha 值超过一 ，所以使用 Clamp 限制为0~1
image.png
5.通过减法来得到原图纹理和底图纹理的区别---我们就得到了外边沿阴影效果
image.png
6.给阴影叠加HDR效果image.png
7.最后将外边沿叠加到原图上
image.png
就得到我们的游戏效果了
拖入shaderforge 图片空白区域乱码的问题
it's because PNG images store the entire 32-bits of a pixel (RGBA) even if the alpha channel is 0. So random color data that the artist left on the picture is sustained even if the pixel is transparent. It's super easy to fix without additional shader overhead - just pop the spritesheet into any decent image editor (e.g. GIMP) and export it with the "keep transparent pixels color" option deselected. You could also replace all transparent pixels with black transparent pixels instead.
