【Unity 实用工具篇】 | Unity中的软遮罩组件 SoftMaskForUGUI 快速上手使用

  • [【Unity 实用工具篇】 | Unity中的软遮罩组件 SoftMaskForUGUI 快速上手使用](#【Unity 实用工具篇】 | Unity中的软遮罩组件 SoftMaskForUGUI 快速上手使用)
  • 总结

前言

在Unity开发中,Mask组件是项目中的高频使用组件。比如在实现ScrollView的滑动功能时,就必须依赖Mask组件来创建遮罩效果。

另一个典型应用场景是制作玩家头像,通常我们会通过添加圆形遮罩来实现圆形头像的显示效果。

然而,标准Mask组件存在一个明显缺陷:其硬边遮罩效果会导致边缘出现生硬的割裂感,这在大多数项目中都是不可接受的。

为此,本文将介绍Mask组件的优质替代方案------SoftMask组件。接下来我们将详细解析该组件的特性及使用方法。


【Unity 实用工具篇】 | Unity中的软遮罩组件 SoftMaskForUGUI 快速上手使用

一、软遮罩组件 Unity UI Soft Mask

1.1 SoftMask组件介绍

SoftMask是Unity中用于实现平滑边缘遮罩效果的第三方组件(非Unity官方内置),常用于UI系统。与Unity原生Mask组件相比,SoftMask能实现渐变透明的边缘效果,避免生硬的裁剪边缘。

组件特点:

  • 兼容性:完全兼容现有的 Mask 组件,可以将现有的 Mask 转换为 SoftMask直接使用。
  • 可调节的可见部分:可以自由调整遮罩的可见部分。
  • 多样的遮罩选项:支持使用 Text、Image、RawImage 作为遮罩图形。
  • 多 Sprite 和 SpriteAtlas 支持:SoftMask 支持多个 Sprite 和 SpriteAtlas。
  • 嵌套软遮罩:支持最多 4 层嵌套软遮罩。
  • ScrollRect 支持:SoftMask 支持 ScrollRect 组件。
  • 全渲染模式支持:支持覆盖、相机空间和世界空间。
  • 软遮罩 UI 着色器:包含一个用于 UI/Dafault 的软遮罩 UI 着色器。
  • 自定义着色器支持:可以通过少量修改使自定义着色器支持软遮罩。
  • 性能/质量调整:可以调整软遮罩缓冲区大小以提高性能或质量。
  • 高效渲染:软遮罩缓冲区仅在需要时更新,以提高性能。
  • 软遮罩缓冲区预览:可以在检查器中预览软遮罩缓冲区。
  • 抗锯齿遮罩模式:如果不需要半透明遮罩,可以使用性能更好的"抗锯齿遮罩模式"。
  • 遮罩形状:可以使用 MaskingShape 组件添加或移除遮罩区域。
  • 反向遮罩:使用 MaskingShape 组件实现反向遮罩。
  • 射线投射过滤:射线投射仅对可见部分进行过滤,适用于防止教程中点击遮罩部分的点击。
  • 立体支持:支持 VR 的软遮罩。
  • TextMeshProUGUI 支持:支持 TextMeshProUGUI,并支持 TextMeshPro v3.2/4.0 (pre-release) 和 uGUI 2.0 (Unity 2023.2+/6.0+)。
  • 更好的编辑器体验:在场景视图中,屏幕外的对象显示为模板遮罩,便于直观编辑。
  • 自动着色器包含和剥离:SoftMaskable 着色器在构建时自动包含,未使用的着色器变体被移除。

1.2 效果展示

1.3 使用说明及下载


二、SoftMask参数

属性 说明
Masking Mode 遮罩模式
Show Mask Graphic(SoftMasking or Normal) 显示与蒙版渲染区域相关联的图形。
Alpha Hit Test: 透明部分无法点击。 当纹理采用压缩格式或不可读格式时,不支持进行 Alpha 折叠测试。仅在必要时启用此功能,因为这将需要更多的图形内存和处理时间。
Down Sampling Rate(SoftMasking only) 软掩膜缓冲区的下采样率。此值越高,软掩膜的质量就越差,但性能会有所提升。
Softness Range(SoftMasking only) 用于软化遮罩的最小和最大α值。这两值之间的差距越大,软化效果就越明显。
Preview Soft Mask Buffer (in editor, SoftMasking only) 在"检查器"中预览软遮罩缓冲区。

Masking Mode

Masking Mode有三种模式可选择

属性 说明
SoftMasking(软遮罩) 带有半透明效果的光滑遮罩。需要为渲染纹理和可软遮罩的着色器分配内存。将渲染纹理用作软遮罩缓冲区。遮罩图形的透明度可以使用。
Anti-Aliasing(抗锯齿) 边缘更平滑的模板遮罩。无需使用渲染纹理或柔光可遮罩的着色器,运行速度更快。消除遮罩图形的锯齿状边缘。遮罩图形不可显示。
Normal 与遮罩组件的遮罩部分相同。

更多详细参数及作用可以去官方文档查阅,这里只介绍写较为常用的。


三、快速上手使用

SoftMaskForUGUI 的核心在于其SoftMaskSoftMaskable两个组件。

前者可以替代标准的Mask组件,后者则用于添加到被遮罩的对象上,使得它们能够响应柔和的遮罩效果。

还支持自定义着色器,只需要简单三行代码就可以让自己的着色器支持软遮罩。

使用该组件的方法与Unity自带的Mask组件基本一致,下面拿ScrollView组件做示例:

1.在场景中添加一个ScrollView组件,将Viewport上面的Image找一张圆形边缘半透的图片替换

此时效果如下,可以看到边缘切割非常生硬的裁剪边缘。

2.将 Viewport节点上的Mask组件替换成SoftMask组件

效果如下,边缘效果明显好了很多,这基本上就是使用SoftMask最大的作用之一了。


四、进阶技巧示例

除了上面提到的边缘渐变软遮罩之外,softMask还提供了一些其他功能,下面演示一个反向遮罩的功能。

使用MaskingShape组件,可以在基础遮罩功能之上,新增一个遮罩剔除和添加的功能,效果如下所示:

使用MaskingShape组件,将Masking Method 设置为Additive ,可以将原本被遮罩盖住的地方按指定图形(根据需求自行切图)重新展示:

同样的,将Masking Method 设置为Subtract ,可以将图片在原有遮罩基础上按指定图形再次遮罩:

MaskingShape组件使用时,其节点放置于SoftMask下即可。

使用这个功能,就可以实现一个放大镜寻物或者探照灯效果,只显示手指滑动到的区域,其他地方隐藏或单独展现。


五、适用场景推荐

  1. 圆形头像平滑裁切
  2. 平滑过渡的UI卡片
  3. 对话气泡的渐变消失
  4. 游戏地图的迷雾效果
  5. 技能冷却的平滑边缘

⚠️ 避免在移动端低端设备上同时使用超过3个SoftMask

通过合理使用SoftMask组件,可显著提升UI视觉效果的专业性,同时保持高性能渲染。建议结合项目需求灵活调整参数,必要时参考插件源码进行深度定制。


总结

SoftMask能够实现更出色的遮罩效果,相比普通Mask,其边缘过渡更加平滑自然,同时还提供了更丰富的遮罩功能。操作简单易上手,非常推荐使用。


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

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

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

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

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

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

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

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

资料白嫖,技术互助

学习路线指引(点击解锁) 知识定位 人群定位
🧡 Unity系统学习专栏 🧡 入门级 本专栏从Unity入门开始学习,快速达到Unity的入门水平
💛 Unity实战类项目 💛 进阶级 计划制作Unity的 100个实战案例!助你进入Unity世界,争取做最全的Unity原创博客大全。
❤️ 游戏制作专栏 ❤️ 难度偏高 分享学习一些Unity成品的游戏Demo和其他语言的小游戏!
💚 游戏爱好者万人社区💚 互助/吹水 数万人游戏爱好者社区,聊天互助,白嫖奖品
💙 Unity100个实用技能💙 Unity查漏补缺 针对一些Unity中经常用到的一些小知识和技能进行学习介绍,核心目的就是让我们能够快速学习Unity的知识以达到查漏补缺
相关推荐
B0URNE10 小时前
【Unity基础详解】(11)Unity核心:输入系统
unity·游戏引擎
世洋Blog12 小时前
Unity开发微信小游戏-减少WASM包体大小
unity·游戏引擎·wasm·微信小游戏
Ayanami_Reii13 小时前
进阶数学算法-取石子游戏(ZJOI2009)
数学·算法·游戏·动态规划·区间dp·博弈论
TO_ZRG14 小时前
Unity 通过 NativePlugin 接入Android SDK 指南
android·unity·游戏引擎
caron415 小时前
C++ 推箱子游戏
开发语言·c++·游戏
顾安r16 小时前
11.29 脚本游戏 单页面格斗游戏模板
前端·javascript·css·游戏·virtualenv
jtymyxmz16 小时前
《Unity Shader》10.2.1 镜子效果
unity·游戏引擎
ellis197016 小时前
Unity打开新项目Package相关报错处理记录
unity
微:xsooop17 小时前
iOS 上架4.3a 审核4.3a 被拒4.3a 【灾难来袭】
flutter·unity·ios·uniapp