【Simple Shader】UGUI的ScrollView邊緣羽化

寫在前面

這個是效果是很久很久以前寫的,可以看一下git的截圖。


上次傳已經(jīng)是六月

真的是拖啊,整整拖了3個月,要不是今天被罵了每天就打游戲,肯定還不知道寫。

實現(xiàn)效果

這里只實現(xiàn)橫向羽化,縱向羽化原理是一樣的,后面再加上去吧。

原理

我們知道一個圖片的坐標在shader中是這樣的:


一個圖片中的坐標

我們就可以判斷一個點在坐標,如果是橫向就判斷x軸的坐標到設(shè)置的邊界長度的距離,縱向就判斷y軸的坐標到設(shè)置的邊界長度距離,得到距離然后比較我們設(shè)定的邊界值即可。

A點

如A點我們就可以判斷根據(jù)0.8跟我們設(shè)置的邊界長度(_AplhaMask設(shè)置為0.9)相減等到一個距離值0.1,然后再做一個插值處理,把我們需要設(shè)置的邊緣羽化范圍(__AplhaBorder為10),距離值除以邊界值然后乘以邊界羽化值。具體公式如下:

col *=saturate(saturate(_AplhaMask-abs(i.x))/_AplhaMask*_AplhaBorder);

這個公式是我慢慢實驗出來的,如果有更好的可以評論挖!

Git地址

最后祝大家
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容