Shader Graph制作2D Sprite描边

1、制作原理

主要是参考GUI的Text的描边原理。实际上就是复制四个纹理在上下左右方向各平移N个像素

2、制作流程

因为不需要光照效果，所以使用Unlit Master节点输出。整体结构如下：

设置了3个参数，分别控制图片纹理，描边颜色，描边宽度。我没有像GUI那样用X,Y控制描边，而是使用宽度统一调整，如果需要可自行添加。

图中左边部分主要控制纹理的UV坐标分别上下左右位移。如下图所示：

LineWidth本身和取反作为四个参数，分别填入四个Vector2的x和y，再使用Tiling And Offset节点进行位移。分别得到四个位移过的纹理。然后对获取到的纹理的A通道互相相加获得一个扩大边缘的纹理，这里注意要使用Clamp节点将获取到的A通道值先知道0-1的范围内。最后减去原纹理的A通道就获得了描边纹理。再将纹理描边和color相乘，就可以获得颜色的描边。

3、注意事项

1. 要将扩大纹理反色连接到，使用原纹理会使描边被截掉。
2. 没有透明区域的纹理不会显示描边，超过图形范围会被截掉。
3. 有些棱角的图形，显示不完美。

 

由于本人也是刚开始使用Shader Graph，写这些只是为了能让自己更加巩固Shader Graph的用法，所以有些地方可能会出错，如果你有更好的方法或者我有什么错误，请帮忙指正，万分感谢。