UI动效:材质球自动识别image的图素做一些通用循环或者流光效果

1114天前
转载文章 / UI / 技术分享 (本文章为转载文章,如果若您的权利被侵害,请联系管理员删除的)
10392
3
17
 | 
转自B站的一个视频效果网址为: https://www.bilibili.com/video/BV1N34y1i7MF/?spm_id_from=333.788&vd_source=30d9a7758b2cdaf478adcb735e7a70c6

我们在做动效当中往往想加一些扫光效果或者循环类的选中效果,按照我们以前的办法是在上边叠一层半透面片或者粒子片
在我们的shader里边有一种办法更为简便比如一些循环效果

首先创建一个image给上我们的UI图标,在创建一个ASE的shader


image.png

命名UI的shader文件,我们属性保持默认

image.png

创建材质球,指定shader,给我们的UI图上

image.png


image.png


在回到我们的shader里创建一个节点,这个节点就是可以自动识别到我们imgae里的图,创建节点以后他会自动变成SpriteTexTure这个节点,在创建一个TexTure采样器,把它们二个关联上,我们可以看到属性面板的PrepertyName识别到了_MaintexTex,这样我们识别图素就成功了

image.png

image.png

我们创建一个流光图贴图加到我们的采样器上,再把流光图和流光图的流动速度开放到外边,同时采样器需要设置Black,设置这一步是为了保证在不添加贴图的时候默认不添加任何数值,不然不加贴图就变成了白色

image.pngimage.png
我们再把创建的节点串联到一起应用一下
image.png

image.png

流光图给一张图以后我们会发现图素变得不正确了

image.png

 这个时候我们需要回到我们回到我们shader里,添加一个append首先把A通道脸上,在去链接RGB,这点很重要,如果不按照我这操作可以尝试下会出现什么问题,出了问题概不负责,嘿嘿嘿嘿嘿,出了啥问题可以留言讨论一下,操作完我们在应用下。

image.png

会发现UI图识别正确了

image.png

我们可以尽情换我们的贴图做一些循环效果

Honeycam 2023-10-08 21-24-57.gif

也可以在shader的流光图在乘以一个颜色去修改我们的流光图的颜色,扰动之类的效果,有需要的同学可以自己加一下试试


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

使用微信扫一扫登录

“乐魔UI”

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