Unity圖片與文字的漸變遮罩

在做功能時美術有個效果是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方向的裁剪。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章