How to Develop a Game
Mask
PublishDate: 2025-06-01 | CreateDate: 2025-06-01 | LastModify: 2025-06-01 | Creator:ljf12825

遮罩,用于实现遮挡效果,控制子物体的显示区域

MaskPanel

Mask

Mask用于裁剪UI子元素的显示区域,通常搭配图片、Scroll View、头像裁剪等使用

核心功能和行为

特点说明
子物体只在 Mask 图像区域内显示超出部分不可见(不销毁,只裁剪)
遮罩区域基于 Image 的透明度非透明部分就是显示区域
不支持软遮罩(软边缘)默认是硬裁剪,想要软遮罩需用 Shader 或 UIEffect 等插件

使用方法

MaskParent(Image + Mask)
|___Content(Text / Image /等UI)

常见用途

场景使用方式
ScrollView 滚动列表Viewport 挂 Image + Mask,内容只显示在视窗中
圆形头像裁剪使用圆形 Image + Mask 裁剪方形头像图片
进度条遮罩遮罩下滑动另一个图片或文字,实现“擦除”或“揭示”效果
文字遮挡/选中效果对文字进行遮罩只显示一部分或高亮部分

裁剪区域

Mask裁剪的区域由挂载Mask的GameObject的Image的Alpha通道决定

Image 类型Mask 效果
Sprite (Alpha通道)透明处裁剪,实色处显示
Sprite (无 Alpha 通道)整张图片为裁剪区域
没有 Image 组件Mask 不起作用(它依赖 Image

Image的Raycast Target设置不影响裁剪,但影响事件响应

Rect Mask 2D

RectMask2D是Unity UI中专为矩形区域裁剪而设计的遮罩组件,功能和Mask类似,但更高效、轻量,只适用于矩形裁剪

特性RectMask2DMask
遮罩形状只能是矩形任意形状(基于 alpha 通道)
性能高效相对较低(使用 Stencil Buffer)
软遮罩支持不支持也不支持(需 Shader 实现)
需要 Image 吗不需要必须有 Image(带 alpha)
ScrollView 默认用谁?RectMask2D不是默认组件
RectMask2D.softness = new Vector2(x, y);
分量含义
x左右边缘的模糊像素距离
y上下边缘的模糊像素距离

结构示例:聊天滚动列表

Scroll View
|——Viewport(RectMask2D)
      |__Content(垂直布局 + 自动扩展)

工作原理

Sprite Mask

Sprite Mask时Unity中专为2D精灵系统设计的遮罩组件,用来让某些Sprite按遮罩的形状显示或隐藏,相比UI中的传统MaskRectMask2D,它属于2D渲染层级遮罩机制,用于SpriteRenderer渲染对象的裁剪

Sprite Mask是一个形状遮罩,允许受控的Sprite只在遮罩区域内渲染,超出部分将不可见

它通常用于:

使用结构示例

SpriteMask (Mask 控制区域)
└── SpriteA (Renderer 被遮罩)

或者平行结构也可以

SpriteMask
SpriteA (设置受 Sprite Mask 控制)

使用方法

1.添加Sprite Mask

2.被遮罩的Sprite设置:
Sprite Renderer上:

参数含义
Sprite遮罩形状,使用 Sprite 的 alpha 通道
Alpha Cutoff判定透明与非透明的阈值
Custom Range设置可见层范围(Sorting Layer 和 Order)
Sprite Sort Point以哪个点作为Sprite的排序基准点

示例

地图探索雾系统

地图遮罩 (SpriteMask:黑色圆形)
角色头顶 (Sprite:Visible Inside Mask)
→ 角色周围区域可见,其余为黑

裁剪头像

头像边框 (圆形 SpriteMask)
头像图片 (SpriteRenderer:Visible Inside Mask)

潜行效果

遮罩外隐藏角色: