【Simple Shader】UGUI的ScrollView边缘羽化

C#

浏览数:424

2019-8-30

写在前面

这个是效果是很久很久以前写的,可以看一下git的截图。


上次传已经是六月

真的是拖啊,整整拖了3个月,要不是今天被骂了每天就打游戏,肯定还不知道写。

实现效果

这里只实现横向羽化,纵向羽化原理是一样的,后面再加上去吧。

原理

我们知道一个图片的坐标在shader中是这样的:


一个图片中的坐标

我们就可以判断一个点在坐标,如果是横向就判断x轴的坐标到设置的边界长度的距离,纵向就判断y轴的坐标到设置的边界长度距离,得到距离然后比较我们设定的边界值即可。

A点

如A点我们就可以判断根据0.8跟我们设置的边界长度(_AplhaMask设置为0.9)相减等到一个距离值0.1,然后再做一个插值处理,把我们需要设置的边缘羽化范围(__AplhaBorder为10),距离值除以边界值然后乘以边界羽化值。具体公式如下:

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

这个公式是我慢慢实验出来的,如果有更好的可以评论挖!

Git地址

最后祝大家

作者:黒可乐