独立游戏吧 关注:53,372贴子:302,492
  • 19回复贴,共1

[UGUI] Mask边缘线性模糊

只看楼主收藏回复

先上效果图

新的UI系统里有个Mask的组件,可以根据Image组件的图片透明通道创建蒙版。
但是有个问题,这个Mask的工作原理其实就是在alpha<0.01的地方剪掉了像素(在编辑器那里就是颜色的A值小于2.55,这也是在使用Mask如果将A值设置小于2.55会使所有子节点都消失的原因,因此Mask那里才有一个“Show Mask Graphic”勾选项),矩形的还好,如果需要弧形的边缘就会出现难看的锯齿。

而且有时也会需要逐渐模糊消失的效果,Mask就无法满足了。
最近在公司做的项目刚好需要模糊的边缘,所以做了这个东西。
与Mask类似,可以使子节点中的Image和Text都进入一个矩形蒙版中(目前只有矩形线性的渐变)
使用方法:
将SmoothMask类丢到Canvas之下的对象上,将Canvas对象放到CanvasRect中
在带有SmoothMask类的对象上创建子物体,如果发现蒙版并没有起作用,对SmoothMask点右键,选择
Flush Child Material Array
修改OffsetRect和SmoothRect数值调整边缘效果。

问题:
做完之后我加了一个ScrollRect的组件,发现这时ScrollRect接受点击拖拽的响应区域超出了ScrollRect的区域,结果就是无奈的又加了一个Mask来使其正常……
如果发现蒙版并没有起作用,对SmoothMask点右键,选择Flush Child Material Array(因为很重要,所以又说一遍)。
PS:
在这些东西之上还可以继续加入各种曲线的边缘消失方式,还可以使用贴图来获取Alpha通道数据来实现任意形状的逐渐消失的边缘。
但我现在用不上,所以不管了。


SmoothMask.unit
大小:16.44KB下载:572次转存:151次
文件已失效
IP属地:加拿大1楼2015-07-13 17:43回复
    你这效果图也太不明显啊,我都不知道到底是干嘛的。。。


    IP属地:浙江2楼2015-07-15 04:43
    收起回复
      哦哦噢噢噢噢!!!!这个好啊!之前用渐变透明都是透明度低于某个值都不显示,高于的都显示的状态,根本没法用图片做渐变,这个可解决大问题了!赞!


      3楼2015-07-15 06:09
      回复
        楼主,我引入了你的包,但是SmoothMask下的子物体都直接不显示了。加入新的图片,按了Flush Child Material Array之后也没有反应,我用的是Unity5.3。


        IP属地:北京5楼2016-01-11 10:58
        收起回复
          其实要解决LZ的这个问题主要是alphatest造成的,alphatest的原理就跟LZ所说的,小于或大于某个指定alpha阀值的像素就直接剔除,这自然会引擎锯齿,因为像素之间失去了过渡。
          但要解决这个问题完全用不着去用模糊边缘的算法,而应该把渲染状态的绘制方式切换成alphablend,并在phtotoshop里对所要用的贴图的alpha通道的边缘处羽化下,最后在引擎里渲染出来的就是平滑的效果.
          alphablend本身就专门处理这些不同层之间,层与背景之间的融合问题,blend的公式有许多,但共同点是,最后屏幕最终绘制的像素都要取决于:所要绘制贴图的像素会与绘制前背景的像素,比如常用的alphablend公式:src_clolr*alpha+dst_color*(1-alpha),意思就是:最终的屏幕像素颜色=当前正要绘制的像素颜色×当前正要绘制的像素的alpha值+绘制前背景的像素颜色×(1 - 当前正要绘制的像素的alpha值),这只是blend混合中其中一种公式,你可以随意在pixelshader里设定自己的blend公式,另外因为贴图的alpha本身在PS里做了线性过渡,所以混合出来的结果自然是平滑的。
          真正的边缘模糊其实并不是LZ所说的这个,边缘模糊许多时候用在 抗锯齿上,比如MSAA(现在的硬件功能都有这个),十分消耗性的东西,大致的过程都是1.查找边缘像素 2.模糊,复杂而且消耗性能,
          所以楼主用的方式其实本质上依然是blend,不过线性过渡的过程,LZ直接用线性公式计算,但我这里建议直接对贴图本身的 alpha通道修改,就省去了引擎里用线性公式算的步骤。


          6楼2016-01-11 14:27
          收起回复
            这个好啊,原来我一直都是自己叠image来模拟这个渐变边缘的。终于可以有简便靠谱的方法了。顺便一问楼主是怎么改的UGUI的渲染的,我一直以为那都是他引擎作死的改不了。


            IP属地:北京来自Android客户端7楼2016-01-12 13:45
            回复
              在哪下载啊


              IP属地:天津8楼2016-10-27 16:21
              回复
                这个将canvas的Render Mode改为Screen Space-Camera,然后就什么都看不到了,要怎么处理


                IP属地:陕西9楼2018-10-16 16:02
                收起回复