Notifications
Article
利用Shader实现Sprite Outline的效果
Published 3 months ago
12
0
z
利用Shader实现Sprite Outline的效果
2D Outline效果一般可以通过对原图进行上下左右四个方向的偏移绘制来实现。用Shader实现也是基于这个思想。
首先拿Unity自带的Sprites-Default.shader,基于此,增加4个Pass。分别来进行上下左右四个方向偏移的渲染。
首先定义变量:
float4 _MainTex_TexelSize; //magic var float _OutlineSize; //outline size fixed4 _OutlineColor; // outlie color
“_MainTex_TexelSize” 是Unity Shader环境中的自带变量,定义如下:
Vector4(1 / texWidth, 1 / texHeight, texWidth, texHeight)
在frag函数中,对纹理进行采样时,我们可以利用“_MainTex_TexelSize”对UV进行固定方向的偏移,从而实现Outline的效果。
//下偏移渲染 fixed4 frag(v2f IN) : SV_Target { fixed4 texColor = SampleSpriteTexture (IN.texcoord + fixed2(0,_MainTex_TexelSize.y * _OutlineSize)) * IN.color; //采样时,将采样坐标向上偏移_OutlineSize个像素 fixed4 c = _OutlineColor * texColor.a; //取_OutlineColor进行纯色渲染 return c; }
其他三个方向的渲染也是用类似方法实现。


不过这个方法也有如下一些限制:
  1. Sprite的MeshType必须是FullRect。
  2. Sprite贴图四周必须为Outline留好空白。
  3. outline的厚度无法超过Sprite最细窄区域的厚度。(例如枪扳机下方的细条)

Github项目链接已经附带

z
zilch
Programmer
1
Comments