Unity UI Masking: Light, Fast Masks for Clean Panels and Menus
AI Summary
Masking in Unity UI is super useful for scrolling areas, inventories, character selection screens, or even gameplay elements. This guide shows RectMask2D, Mask, and Soft Mask in action, step by step, just like in the video. You’ll see how to handle rectangles, rounded corners, and smooth fade-out effects and get tips to keep your UI looking clean and performant across all resolutions.
1. Let’s Dive into Masking in Unity UI
Today we’re checking out masking features in Unity using some simple examples:
- Rectangle mask
- Rounded column mask
- Fade-in mask
Masking is perfect for when you want parts of your UI to show or hide neatly, like a character selection screen or scrollable inventory.
Rectangle Mask Example
Imagine you’re making a character selection screen. You want the legs of characters not to spill outside the selection box.
Steps:
- Select your box in the hierarchy.
- Add RectMask2D.
- Make the characters children of the box.
Rounded Mask Example
Next up: you want a rounded rectangle panel and some texture inside it. RectMask2D won’t work here because it only supports rectangles.
Steps:
- Right-click your rounded rectangle → UI → Image.
- Assign your sprite (stripes or color texture).
- Add the Mask component to the rounded rectangle.
- Put your content inside as a child.
- Disable Show Mask Graphic to hide the outline. Now your rounded panel shows content clipped to the shape.
Problem: Unity’s built-in Mask doesn’t handle alpha smoothly. The edges look jagged.
Solution: Use Soft Mask (external asset by Mob Saka).
Steps for Soft Mask:
- Open Package Manager → Add package from Git URL, paste the Soft Mask URL.
- Add Soft Mask to your rounded rectangle.
- Click Fix and disable Show Mask Graphic.
Result: Smooth rounded edges.
Fade-Out Scroll Mask
Steps:
Create an image with a solid middle and transparent edges.
Make your scroll view a child of this image.
Add the Soft Mask component.
Click Fix and uncheck Show Mask Graphic.
Play the scene—items scroll and fade out smoothly at edges.
Quick Tips for Unity UI Masking
- Use RectMask2D for rectangular panels, tooltips, and inventories—it’s faster than Mask.
- Use Mask for irregular shapes or rounded panels.
- Use Soft Mask for smooth alpha edges or fade effects.
- Keep masked content shallow in the hierarchy for better performance.
- Test across resolutions to avoid clipping artifacts.
Final notes
Masking in Unity UI is a key technique for keeping your panels, tooltips, and scrollable areas clean, organized, and professional-looking. RectMask2D works best for simple rectangles, Mask is ideal for irregular shapes, and Soft Mask allows for smooth edges or fade effects that make your UI feel polished.
To take your Unity UI skills to the next level, consider checking out a master Unity UI course for in-depth lessons and practical examples. You can also follow along with the video provided in this guide to see these masking techniques in action and learn how to apply them to your own projects.
