【推荐100个unity插件之11】Shader实现UGUI的特效——UIEffect为 Unity UI 提供视觉效果组件

前言

一般的shader无法直接使用在UI上,需要在shader中定义特定的面板参数,今天就来推荐github上大佬做的一套开源的一系列UGUI,Shader实现的特效——UIEffect 为 Unity UI 提供视觉效果组件。

地址

https://github.com/Ankh4396/UIEffect

描述

让我们用效果来装饰你的UI!您可以根据需要从脚本和检查器中控制参数。AnimationClip 是理所当然的!
在这里插入图片描述
可用效果

元件特征截屏
UI效果结合一些视觉效果。
效果模式:灰度、棕褐色、Nega、像素化。
颜色模式:乘法、填充、加法、减法。
模糊模式:快速、中等、细节。
高级模糊:启用更漂亮的模糊。
在这里插入图片描述
UIShiny将闪亮效果应用于图形。该效果不需要蒙版组件或法线贴图。参数:效果因子、宽度、旋转、柔和度、亮度、光泽度在这里插入图片描述
UIDissolve将溶解效果应用于图形。
边缘颜色模式:乘法、填充、加法、减法
参数:效果因子、宽度、旋转、柔和度、边缘颜色
选项:效果区域、保持效果纵横比
在这里插入图片描述
UIHsvModifier修改图形的 HSV。
目标:颜色、范围
调整:色相、饱和度、值
在这里插入图片描述
UITransition Effect使用单通道纹理应用过渡效果。
效果模式:截止、淡入淡出、溶解
选项:效果区域、保持效果纵横比、过渡纹理
选项:效果区域、保持效果纵横比、过渡纹理
Pass Ray On Hidden:禁用图形的 raycastTarget on hidden。
在这里插入图片描述

以下效果可以与上述组件一起使用。

元件特征截屏
UIShadow为图形添加阴影/轮廓。
性能优于默认的阴影/轮廓组件。
ShadowStyle:阴影、阴影 3、轮廓、轮廓 8
在这里插入图片描述
UIGradient将顶点颜色更改为带有角度和偏移量的渐变。
方向:水平、垂直、角度、对角线
选项:偏移、色彩空间
在这里插入图片描述
UIFlip翻转图形。
方向:水平、垂直、两者
在这里插入图片描述

Demo 演示

WebGL Demo WebGL 演示

Installation 安装

要求

  • Unity 2017.1 或更高版本
  • 不需要其他 SDK

如何玩演示

  • 对于 Unity 2019.1 或更高版本
    打开 Package Manager 窗口,在包列表中选择 UI Effect 包,然后单击 Demo > Import in project 按钮

  • 对于 Unity 2018.4 或更早版本
    从菜单中点击 Assets/Samples/UIEffect/Import Demo
    这些资源将被导入到 Assets/Samples/UI Effect/{version}/Demo .
    打开

用法

1.从 Add Component 检查器或 Component > UI > UIEffect > … 菜单中向 UI 元素(Image、RawImage、Text 等)添加任何效果组件。
在这里插入图片描述
2.在检查器中根据需要调整效果的参数。
在这里插入图片描述
3.您可以从脚本中添加或修改效果。

var uieffect = gameObject.AddComponent<UIEffect>();
uieffect.effectMode = EffectMode.Grayscale;
uieffect.effectFactor = 0.85f;
uieffect.colorMode = ColorMode.Add;
uieffect.effectColor = Color.white;
uieffect.colorFactor = 0.1f;
uieffect.blurMode = BlurMode.FastBlur;
uieffect.blurFactor = 1;

在这里插入图片描述

使用示例

UIEffect 可以很容易地在游戏中的各种情况下使用。

Case描述截屏
锁定/解锁内容使用 UIEffect 应用灰度。向用户指示内容不可用。在这里插入图片描述
剪影使用 UIEffect 填充颜色。在这里插入图片描述
柔和的阴影/外层辉光使用 UIEffect 和 UIShadow 模糊阴影。在这里插入图片描述
彩色阴影使用 UIEffect 和 UIShadow 用颜色填充阴影。在这里插入图片描述
模糊的动态字体使用 UIEffect 模糊文本。
要干净地模糊动态字体,请启用 Advanced Blur 选项。
在这里插入图片描述
带有轮廓和阴影的文本使用两个 UIShadow 添加轮廓和阴影。
与默认的轮廓/阴影相比,过度绘制更少。
在这里插入图片描述
闪亮按钮使用 UIShiny 作为闪亮按钮。
向用户指示您可以按下该按钮。
在这里插入图片描述
屏幕转换使用 UITransitionEffect 使用任何过渡纹理过渡屏幕。在这里插入图片描述

完结

赠人玫瑰,手有余香!如果文章内容对你有所帮助,请不要吝啬你的点赞评论和关注,以便我第一时间收到反馈,你的每一次支持都是我不断创作的最大动力。当然如果你发现了文章中存在错误或者有更好的解决方法,也欢迎评论私信告诉我哦!

好了,我是向宇https://xiangyu.blog.csdn.net

一位在小公司默默奋斗的开发者,出于兴趣爱好,于是最近才开始自习unity。如果你遇到任何问题,也欢迎你评论私信找我, 虽然有些问题我可能也不一定会,但是我会查阅各方资料,争取给出最好的建议,希望可以帮助更多想学编程的人,共勉~
在这里插入图片描述

  • 22
    点赞
  • 43
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
Unity,UGUI的EventTrigger是一个非常有用的组件,它可以用于实现UI拖拽和位置交换的功能。 首先,需要在要实现拖拽和位置交换的UI元素上添加EventTrigger组件。可以通过代码或者在Inspector面板进行操作。然后,需要添加相应的事件触发器,例如拖拽开始、拖拽移动、拖拽结束等事件。 接下来,需要编写拖拽的逻辑代码。可以使用Unity提供的接口来处理拖拽事件,例如OnBeginDrag、OnDrag和OnEndDrag。在OnBeginDrag事件,可以获取到拖拽起始位置,并将拖拽UI元素设置为可拖拽状态。在OnDrag事件,可以实时获取到拖拽的位置,并将UI元素跟随鼠标或手指移动。在OnEndDrag事件,可以获取到拖拽结束位置,并将UI元素设置回初始位置。 要实现位置交换功能,可以在UI元素上添加Collider组件,并根据拖拽的起始和结束位置来计算是否需要进行位置交换。可以使用RaycastHit来判断拖拽位置是否与其他UI元素重合,并记录下交换元素的信息。然后,根据交换元素的信息,可以将两个UI元素的位置进行互换。 最后,为了保证拖拽和位置交换功能的流畅性和用户体验,还可以添加一些动画效果和交互反馈。例如,在拖拽开始时可以添加一些拖拽阴影效果,使拖拽的UI元素看起来更加立体和真实。在位置交换时,可以添加一些过渡动画,使UI元素的位置变换更加平滑和自然。 总之,利用UnityUGUI的EventTrigger组件,结合适当的逻辑代码和交互反馈,可以很方便地实现UI拖拽和位置交换功能。这种功能可以在游戏开发广泛应用,例如拼图游戏、物品交换系统等。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

向宇it

创作不易,感谢你的鼓励

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值