控件与光的结合,原来UI也可以走技术流

1356天前
转载文章 / UI / 动效设计 (本文章为转载文章,如果若您的权利被侵害,请联系管理员删除的)
8232
0
11
 | 
作者:金俊



“游戏中需要引导玩家点击的UI控件上走一些流光,更吸引注意力”


1675863894157590_1.gif


Unity公司最新为手游提供的通用渲染管线URP下,我们可以用ShaderGraph,编辑一些可以既节约资源,又制作简单的Shader来提高效率。


1675863894301442_2.png


以前如果我们想让这个UI图层上走一些流光,我们需要去Ps内先为它制作一张特定的Mask贴图:


1675863894125955_3.png


按照黑透白不透的原理,我们会制作一张类似的贴图,到引擎内部后我们需要用面片让流光在这个Mask的白色部分走流光。以前我们至少需要用到1张面片模型,面数应该最少是2个三角面,还有一张至少是128*128的mask贴图,另外需要一张流光贴图:


1675863894341626_4.png


在新版本引擎中,我们可以使用简单的ShaderGraph编辑一个直接在材质上就解决了这些多余资源的问题,我们不需要模型,不需要mask贴图,也不需要求助前端程序!我们只需要在材质上贴上UI图+流光贴图,这样就可以简单的实现UI走流光的需求。


1675863895958877_5.png


编辑这个材质的主要逻辑是:根据一张贴图,用这张贴图的Alpha来生成一张Mask,让第二张流光贴图在mask上流动。


以上节点中主要部分在于Inver Colors 这个点击主要可以将原贴图转变成一张黑白的图。按照这个思路,我们创建了以上材质节点。简单的说就是,1贴图是我们的UI,获取UI的图后根据图片转成Mask与2贴图的流光纹理在相加,走UV就可以实现。


1675864192637855_0.png


最后我们再来看下效果:


1675864194784601_1.gif


感谢金俊同学的分享,感谢大家支持,欢迎转发!


声明:乐魔UI(Lemooui)内网友所发表的所有内容及言论仅代表其本人,并不反映任何UI(Lemooui)之意见及观点。
举报
收藏
文章-动效设计
8232
0
11
标签
全部评论
发表评论
设置密码
注册会员
我已阅读并接受《乐魔UI协议》
微信登录
二维加载中...

使用微信扫一扫登录

“乐魔UI”

建议反馈
提交取消
举报
提交取消