UGUI之Mask切割图像shader应用

时间:2023-01-05 14:58:21


在我之前的一篇文章写到使用Mask切割图像的方法。具体链接

​http://www.manew.com/thread-93954-1-1.html​


正如一些朋友所说上面这种方法把图放大之后确实存在有边缘出现锯齿的情况。由于我工作项目做的是手机端切割用户头像,手机屏幕小根本看不出来锯齿所以当时就用了这个方法,但追求完美的程序的都想做到无懈可击。看到网上一篇写了用shader配合Mask的方法,由于我对shader的不熟那篇文章又写的十分简洁,所以我不能立刻看懂,经过小小研究终于实现了消除锯齿的这种切割方法。希望我走过的坑可以让大家避免因此我觉得有必要详细的写下每个步骤。废话不说了


重点是看Hieranchy面板里和属性面板。Hieranchy面板里是一个用来切割圆形的图片,同时也作为Mask。而下面那个Image是被切割的方形图片()也就是左侧看到的那个头像)

之后要给被切割图片加上一个新建的材质球,这个材质球目的就是为了放置Shader。

所以接下来就是为材质球贴上shader脚本和一个圆形图片(这个圆形图片就是上面mask那个物体上的那个圆形图)。如下图:


由于我对Shader不熟所以这里直接贴出

接下来就是shader源码:

纯文本查看  复制代码

   Shader 
"ImageEffect/MaskIcon"





{






Properties






{






[PerRendererData] _MainTex (
"Sprite Texture"
, 2D) =
"white"
{}






_Mask (
"Base (RGB)"
, 2D) =
"white"
{}


















_Color (
"Tint"
, Color) = (1,1,1,1)






_StencilComp (
"Stencil Comparison"
, Float) = 8






_Stencil (
"Stencil ID"
, Float) = 0






_StencilOp (
"Stencil Operation"
, Float) = 0






_StencilWriteMask (
"Stencil Write Mask"
, Float) = 255






_StencilReadMask (
"Stencil Read Mask"
, Float) = 255






_ColorMask (
"Color Mask"
, Float) = 15






[Toggle(_UI_ALPHACLIP)] _UseUIAlphaClip (
"Use Alpha Clip"
, Float) = 0






}












SubShader






{






Tags






{






"Queue"
=
"Transparent"






"IgnoreProjector"
=
"True"






"RenderType"
=
"Transparent"






"PreviewType"
=
"Plane"






"CanUseSpriteAtlas"
=
"True"






}












Stencil






{






Ref [_Stencil]






Comp [_StencilComp]






Pass [_StencilOp]






ReadMask [_StencilReadMask]






WriteMask [_StencilWriteMask]






}












Cull Off






Lighting Off






ZWrite Off






ZTest [unity_GUIZTestMode]






Blend SrcAlpha OneMinusSrcAlpha






ColorMask [_ColorMask]












Pass






{






CGPROGRAM






#pragma vertex vert






#pragma fragment frag












#include "UnityCG.cginc"






#include "UnityUI.cginc"












#pragma multi_compile __ UNITY_UI_ALPHACLIP












struct
a2v






{






fixed2 uv : TEXCOORD0;






half4 vertex : POSITION;






float4 color : COLOR;






};












fixed4 _Color;












struct
v2f






{






fixed2 uv : TEXCOORD0;






half4 vertex : SV_POSITION;






float4 color : COLOR;






};












sampler2D _MainTex;






sampler2D _Mask;












v2f vert (a2v i)






{






v2f o;






o.vertex = mul(UNITY_MATRIX_MVP, i.vertex);






o.uv = i.uv;












o.color = i.color * _Color;






return
o;






}












fixed4 frag (v2f i) : COLOR






{






half4 color = tex2D(_MainTex, i.uv) * i.color;






half4 mask = tex2D(_Mask, i.uv);






color.a *= mask.a;






return
color;






}






ENDCG






}






}





}