Ngui Mask 效果

项目中可能需要用到类似Flash中蒙板效果的功能,功能看起来比较小,但是在网上关于蒙版效果的资料介绍却不多,为此,下面就来看下NGUI蒙版效果的实现,一起来看看吧。

第一步:创建一个UIPanel

第二步:在UIPanel下面创建一个UITexture

第三步:给UITexture附一个材质图片

第四步:选中UIPanel,如果只需要方形的遮罩蒙版效果,则可将UIPanel的Cliping属性改为Soft Clip,如下图。遮罩范围可直接在编辑器中拖动紫色方框调整大小,也可在Cliping选项下面的Size处设置遮罩区域大小及位置。Softness选项为遮罩边缘透明过度区域宽度。

如果遮罩区域需要特定的不规则形状,则UIPanel的Cliping选项可选则Texture Mask选项,即材质蒙版。通过判断赋给UIPanel的材质的Alpha值来为Texture做遮罩处理。如下图。

当然,这里的UITexture只是为了介绍蒙版功能,其实任何UIPanel下面的的显示对象都会被遮罩处理,如下图。

需要注意的是材质遮罩是循环平铺的,而Soft Clip方形遮罩是没有循环效果的。如下图。

NGUI的UI边框流光效果可以通过使用UIHollowedTexture组件来实现。UIHollowedTexture是对UITexture进行魔改得到的组件,可以设置边框贴图,并且支持UV滚动。\[1\] 要实现流光效果,可以通过修改shader的参数来实现。在NGUI的渲染机制中,当渲染时会合并DrawCall,合并的是使用同一材质球的元素。NGUI会新建一个Material,并且在渲染时调用onRender回调函数,将这个新建的Material传递给我们,方便我们进行自定义操作。\[3\] 因此,我们可以在onRender回调函数中修改shader的参数,来实现流光效果。具体的实现方法可以参考相关的教程或者文档。\[3\] 需要注意的是,NGUI在维护以前的Unity项目时仍然很重要,所以对NGUI的了解也是有必要的。\[2\] #### 引用[.reference_title] - *1* [NGUI通用边框流光](https://blog.csdn.net/lzdidiv/article/details/88740159)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [NGUI相关----UITexture图片边缘流光效果](https://blog.csdn.net/blinkseed/article/details/48393501)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [NGUI的流光shader解决方案(一)(支持UITexture和使用图集的UISprite)](https://blog.csdn.net/jw5678/article/details/55002983)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值