在做功能時美術有個效果是UGUI的漸變透明,實現上可以用遮罩,但是Unity提供的遮罩RectMask2D是硬裁剪,即超出遮罩範圍就alpha直接設爲0,沒有過渡,所以我就要給這個圖片設一個自定義shader讓它能支持alpha漸變。
其實就是修改下Unity的UI Default shader,但注意Unity在下載時每個版本都提供了內置着色器,所以你還要選擇對應的Unity版本的內置着色器代碼。
將UI Default shader的UnityGet2DClipping(IN.worldPosition.xy, _ClipRect);替換爲自定義函數,UI Default代碼不放了,要從對應版本的Unity(官網)下載,我一開始從網上找了個UI Default shader可能因爲接口對不上,連遮罩都不成功。
從Unity的安裝目錄下找到CGIncludes/UnityUI.cginc
inline float UnityGet2DClipping (in float2 position, in float4 clipRect)
{
float2 inside = step(clipRect.xy, position.xy) * step(position.xy, clipRect.zw);
return inside.x * inside.y;
}
clipReect傳入的是float4,clipRect.xy是左上遮罩的裁剪位置,clipRect.zw是右下遮罩的裁剪位置.
step()用法:https://developer.download.nvidia.cn/cg/step.html
step - implement a step function returning either zero or one
step(clipRect.xy, position.xy) * step(position.xy, clipRect.zw)
即position.xy >= clipRect.xy返回1,同樣position.xy < clipRect.zw返回1,雖然參數是float3,但傳fix/fix2/fix3/fix4, half~half4, float~float4都可以cg內部幫我們做了轉換。
step的操作減少了gpu做比較運算的消耗,gpu不適合做<這類運算,那是cpu擅長的。
通過這一步,可以判斷這個世界座標在clipRect內否,不滿足在內部,則直接設置alpha=0,剛好step() * step()計算後在clipRect外的返回值爲0.
SoftUnityGet2DClipping軟裁剪
使用的是雨松momo的裁剪,https://www.xuanyusong.com/archives/4650,momo還用UGUI的方式裁剪了模型,我做的功能倒不需要裁剪模型。
float _ClipSoftX;
float _ClipSoftY;
inline float SoftUnityGet2DClipping(in float2 position, in float4 clipRect)
{
float2 xy = (position.xy - clipRect.xy) / float2(_ClipSoftX, _ClipSoftY)*step(clipRect.xy, position.xy);
float2 zw = (clipRect.zw - position.xy) / float2(_ClipSoftX, _ClipSoftY)*step(position.xy, clipRect.zw);
float2 factor = clamp(0, zw, xy);
return saturate(min(factor.x, factor.y));
}
做裁剪區域判定時,添加了類似下面的代碼,將裁剪內的座標alpha添加一個除法,除以我需要軟化的邊緣像素值,比如
(position.xy - clipRect.xy) / float2(_ClipSoftX, _ClipSoftY)
_ClipSoftX=15,position距離clipRect 15座標單位的點,其alpha爲距離/15。
clamp - returns smallest integer not less than a scalar or each vector component.
factor是在距離左上和右下邊距裏,取個離邊距最近的alpha值。
saturate - returns smallest integer not less than a scalar or each vector component.
Returns x saturated to the range [0,1] as follows:
https://developer.download.nvidia.cn/cg/saturate.html
最後將輸出值規範化爲0~1區間內的值。
效果:
TMP直接提供了漸變參數,在Debug Settings-Softness X,放在RectMask2D裏會軟化左右X方向的裁剪。