Unity之ASE实现UI流光效果

这篇具有很好参考价值的文章主要介绍了Unity之ASE实现UI流光效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

之前我们做过UV流动的效果,今天我们来做一个用于UI界面的特效–UI流光效果,先看下效果如下:

Unity之ASE实现UI流光效果

实现步骤

1.创建一个Legacy/Default UI的Shader,这是专门用于UI的shader模板
2.添加一个Templete Parameter节点,作为Image的Sprite Texture贴图
3.然后我们把Sprite Texture输出给一个Texture Sample节点
如下所示:我们就实现了一个简单的Image渲染。
Unity之ASE实现UI流光效果

4.添加流动贴图
如下所示,我们添加一个流动的贴图,然后通过UV的Panner流动,让贴图动起来
Unity之ASE实现UI流光效果

5.让流动图扰动起来
单独的一个流动图上下移动或者左右移动,效果看起来会非常单调,我们不妨给流动图的UV加上一点点扰动,这个前面几篇文章都用到过,效果如下:我们可以看到最终的流动图的边缘已经变得不规则,效果好多了。
文章来源地址https://www.toymoban.com/news/detail-420201.html

到了这里,关于Unity之ASE实现UI流光效果的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • UnityShader基础案例(二)——UI流光,扭曲,外边框,波纹效果

    结果:                   实现需要三张图片,一个便是要显示的主纹理,一个是主纹理的透明通道纹理(用于识别边框),一个是流光纹理。         还有一种UI流光是在外面一直转圈的。         不只是局限于UI,场景中的传送门也可以这样做,加个广告牌技术,

    2024年02月02日
    浏览(59)
  • Unity Shader ASE基础效果思路与代码(一):遮罩、硬边溶解、光边溶解、UV扰动

    效果展示: 思路与代码 :主纹理和遮罩纹理相乘,其中,两个纹理给到UV流动 步骤与详解 :panner节点:平移 效果展示: 思路与代码 :原图和噪声贴图的透明通道混合,改变噪声贴图的透明度即可 步骤与详解 : 在SubShader中关掉深度写入,混合模式为Alpha Blend,Tags设为透明

    2024年02月22日
    浏览(50)
  • Unity UI.Image 六边形+流光 Shader

    效果图 参考代码  

    2024年02月11日
    浏览(47)
  • 纯CSS实现边框流光效果(跑马灯效果)

    首先上一个效果图 有木有发现和夜晚街上的广告牌很像,接下来让我们看看如何使用css实现的吧 首先很明显应该使用一个盒子将文字装起来,并且将文字进行了居中,然后我们看到这盒子的周围围绕了两条光带,那么这两条光带是怎么实现的呢? 其实这是用四个小盒子实现

    2024年02月07日
    浏览(47)
  • SVG+CSS动画实现动效(流光、呼吸等效果)

    绘制流光线条 创建SVG,根据UI给的背景图,定位到图上每条管道(即流光线条的路径)的起始点以及拐点,绘制折线。绘制折线的时候按照下图方框通过class分组,这几组的光线流动是同时出发的。 svg相关知识点:https://www.w3school.com.cn/svg/index.asp 折线样式 让光线动起来 上边

    2024年01月21日
    浏览(63)
  • Unity之ASE实现风格化特效

    我们今天来实现一个像素风的风格化特效材质。效果如下: 先给UV乘上一个Tilling,让UV可以做一个Tilling效果,然后控制Floor节点,让刚才的UV渐变向下取整,最后再除以Tilling得到一个像素风的UV,如下图所示: Floor:Floor 节点将输​​入向下舍入为标量或向量的各个分量的最

    2023年04月08日
    浏览(42)
  • 【Unity】URP屏幕后处理UI模糊效果实现

     这里Canvas(1)设置为Overlay能渲染出指定UI高清,其他UI模糊,然而这做法非常不好,如果此时再打开UI 以及 关闭模糊效果 要将这些置顶UI 恢复到原本Canvas里,也就是要管理2套Canvas Shader代码实现模糊  1个Canvas和2个摄像机 主要以上内容,实际上就是因为Render Pass Event是只能Af

    2024年02月10日
    浏览(39)
  • 【unity插件】Shader实现UGUI的特效——UIEffect为 Unity UI 提供视觉效果组件

    一般的shader无法直接使用在UI上,需要在shader中定义特定的面板参数,今天就来推荐github上大佬做的一套开源的一系列UGUI,Shader实现的特效——UIEffect 为 Unity UI 提供视觉效果组件。 https://github.com/Ankh4396/UIEffect 让我们用效果来装饰你的UI!您可以根据需要从脚本和检查器中控

    2024年02月04日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包