【Unity 实用工具篇】 | UIEffect 实现一系列UGUI特效,灰度、负片、像素化特效

这篇具有很好参考价值的文章主要介绍了【Unity 实用工具篇】 | UIEffect 实现一系列UGUI特效,灰度、负片、像素化特效。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

【Unity 实用工具篇】 | UIEffect 实现一系列UGUI特效,灰度、负片、像素化特效,# Unity 基础知识学习,unity,游戏引擎,UI,UIEffect,UI特效,游戏

【Unity 实用工具篇】 | UIEffect 实现一系列UGUI特效,灰度、负片、像素化特效,# Unity 基础知识学习,unity,游戏引擎,UI,UIEffect,UI特效,游戏


前言

  • 在Unity中 UGUI 的使用几乎是必不可少的,虽然也有NGUI、FGUI等可以使用,但使用UGUI的还是占多数。
  • 而在使用UGUI的过程中,除了一些基础的UI交互页面及逻辑,学习一些UGUI特效的使用也是很有必要的。
  • 接下来会分享一些UGUI中比较简单且实用的特效,供有需要的小伙伴学习使用。

【Unity 实用工具篇】 | UIEffect 实现一系列UGUI特效,灰度、负片、像素化特效

一、UGUI特效插件:UIEffect

1.1 介绍

该插件是在GitHub上一个大佬分享的,经测试之后发现效果很好,且十分轻量、简单易用,所以特此分享一下来学习使用。

该资源一共提供了多种类型的特效,下面将其分类成几个模块,方便按类型学习使用。

UIEffect为Unity UI提供视觉效果组件。

1.2 效果展示

【Unity 实用工具篇】 | UIEffect 实现一系列UGUI特效,灰度、负片、像素化特效,# Unity 基础知识学习,unity,游戏引擎,UI,UIEffect,UI特效,游戏

1.3 使用说明及下载

GitHub下载地址:https://github.com/mob-sakai/UIEffect
CSDN下载地址:UIEffect
白嫖地址:VX搜我名字,回复【素材资源】

使用插件的方式有多种:

  1. 将下载好的UIEffect资源文件直接放到我们的项目Assets文件夹下即可。
  2. 可以通过Unity中的 Window -> Package Manager 中导入,选择添加下载好的插件,或者使用URL直接添加都可以。

【Unity 实用工具篇】 | UIEffect 实现一系列UGUI特效,灰度、负片、像素化特效,# Unity 基础知识学习,unity,游戏引擎,UI,UIEffect,UI特效,游戏

如果想查看资源的示例文件,那就添加UI Effect Demo即可。
【Unity 实用工具篇】 | UIEffect 实现一系列UGUI特效,灰度、负片、像素化特效,# Unity 基础知识学习,unity,游戏引擎,UI,UIEffect,UI特效,游戏


二、组件属性面板

下面来介绍一下,UIEffect组件的属性面板。
【Unity 实用工具篇】 | UIEffect 实现一系列UGUI特效,灰度、负片、像素化特效,# Unity 基础知识学习,unity,游戏引擎,UI,UIEffect,UI特效,游戏

属性 说明
Effect Mode 特效模式
  Grayscale 灰度
  Sepia 棕色
  Nege 负片
  Pixel 像素化
Color Mode 颜色模式
  Multiply 相乘
  Fill 填充
   Add 叠加
  Subtract 相减
Blur Mode 模糊模式
  Fast Blur 快速模糊
  Medium Blur 平衡模糊
  Detail Blur 细节模糊

该组件有三个功能,分别是特效模式、颜色模式及模糊模式,三种类型的功能可以通过选择不同参数进行叠加使用。


三、代码操作组件

using Coffee.UIEffects;
using UnityEngine;

public class UIEffectTest : MonoBehaviour
{
    public UIEffect uieffect;

    void Start()
    {
        //设置特效模式
        uieffect.effectMode = EffectMode.Grayscale;
        uieffect.effectFactor = 0.85f;

        //设置颜色模式
        uieffect.colorMode = ColorMode.Add;
        uieffect.colorFactor = 0.1f;

        //设置模糊模式
        uieffect.blurMode = BlurMode.FastBlur;
        uieffect.blurFactor = 1;
    }
}

四、组件常用方法示例

使用的方法很简单,在需要加特效的UI组件上添加UIEffect脚本,然后根据自己的需求控制上面说到的几种模式和参数即可完成配置。

4.1 使用灰度特效做头像(关卡)选择

【Unity 实用工具篇】 | UIEffect 实现一系列UGUI特效,灰度、负片、像素化特效,# Unity 基础知识学习,unity,游戏引擎,UI,UIEffect,UI特效,游戏

在需要置灰的Image组件上添加UiEffect脚本,并将Effect Mode设置为Grayscale即可观察效果。
【Unity 实用工具篇】 | UIEffect 实现一系列UGUI特效,灰度、负片、像素化特效,# Unity 基础知识学习,unity,游戏引擎,UI,UIEffect,UI特效,游戏

另外几种模式使用的方式都大同小异,三种类型的参数也可以叠加使用,看自己的需求即可。
【Unity 实用工具篇】 | UIEffect 实现一系列UGUI特效,灰度、负片、像素化特效,# Unity 基础知识学习,unity,游戏引擎,UI,UIEffect,UI特效,游戏


总结

系列内容使用的Unity版本皆为 Unity 2020 及以上版本,组件的各项参数可能在不同版本之下略有不同,不过不会影响我们使用及教程的介绍,请放心食用(敏感肌也可以使用哦😁)!


  • 🎬 博客主页:https://xiaoy.blog.csdn.net

  • 🎥 本文由 呆呆敲代码的小Y 原创 🙉

  • 🎄 学习专栏推荐:Unity系统学习专栏

  • 🌲 游戏制作专栏推荐:游戏制作

  • 🌲Unity实战100例专栏推荐:Unity 实战100例 教程

  • 🏅 欢迎点赞 👍 收藏 ⭐留言 📝 如有错误敬请指正!

  • 📆 未来很长,值得我们全力奔赴更美好的生活✨

  • ------------------❤️分割线❤️-------------------------

【Unity 实用工具篇】 | UIEffect 实现一系列UGUI特效,灰度、负片、像素化特效,# Unity 基础知识学习,unity,游戏引擎,UI,UIEffect,UI特效,游戏【Unity 实用工具篇】 | UIEffect 实现一系列UGUI特效,灰度、负片、像素化特效,# Unity 基础知识学习,unity,游戏引擎,UI,UIEffect,UI特效,游戏【Unity 实用工具篇】 | UIEffect 实现一系列UGUI特效,灰度、负片、像素化特效,# Unity 基础知识学习,unity,游戏引擎,UI,UIEffect,UI特效,游戏

【Unity 实用工具篇】 | UIEffect 实现一系列UGUI特效,灰度、负片、像素化特效,# Unity 基础知识学习,unity,游戏引擎,UI,UIEffect,UI特效,游戏

资料白嫖,技术互助

学习路线指引(点击解锁) 知识定位 人群定位
🧡 Unity系统学习专栏 🧡 入门级 本专栏从Unity入门开始学习,快速达到Unity的入门水平
💛 Unity实战类项目 💛 进阶级 计划制作Unity的 100个实战案例!助你进入Unity世界,争取做最全的Unity原创博客大全。
❤️ 游戏制作专栏 ❤️ 难度偏高 分享学习一些Unity成品的游戏Demo和其他语言的小游戏!
💚 游戏爱好者万人社区💚 互助/吹水 数万人游戏爱好者社区,聊天互助,白嫖奖品
💙 Unity100个实用技能💙 Unity查漏补缺 针对一些Unity中经常用到的一些小知识和技能进行学习介绍,核心目的就是让我们能够快速学习Unity的知识以达到查漏补缺

【Unity 实用工具篇】 | UIEffect 实现一系列UGUI特效,灰度、负片、像素化特效,# Unity 基础知识学习,unity,游戏引擎,UI,UIEffect,UI特效,游戏文章来源地址https://www.toymoban.com/news/detail-854210.html

到了这里,关于【Unity 实用工具篇】 | UIEffect 实现一系列UGUI特效,灰度、负片、像素化特效的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包