【unity插件】Shader实现UGUI的特效——UIEffect为 Unity UI 提供视觉效果组件

news2024/11/23 18:52:48

文章目录

前言
地址
描述
Demo 演示
Installation 安装
如何玩演示
用法
使用示例
完结

前言

一般的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 使用任何过渡纹理过渡屏幕。