As a Roblox developer, it is currently impossible to create masks for UI elements. This greatly limits our ability to make good, intuitive designs. This is a feature that has been present in the game development industry for several years, and Roblox has a dire need for it. I think a lot of UI designers can agree that they have to bend themselves in many ways, use hacky methods to achieve some intuitive and good UI.
If Roblox is able to address this issue, it would improve my development experience because masking is an incredible necessary and industry standard tool when it comes to UI designs.
The lack of this feature can cause UI designing to be a great burden. It’s hard to not rely on either static UI sizes (so your image textures don’t morph and deform), and making your UI both scale properly using only 9-slicing can quickly become complicated.
- Completely new and original shapes for UI without needing hacky methods of making them functional
- Circular UI
- Text which is masked onto a background (see top as example)
- Using background images with clipping frames that aren’t rectangular
(Example: This would be impossible without warping the top image when scaling the UI)
This ImageLabel is a background on a Frame that uses standard ClipDescendants. ClipDescendants only uses the bounding box of the object. If you wanted to make the image use the 9-sliced rounded corner frame for clipping, this would be very hard to achieve.
This UI’s functionality was made by @VoidedBlades should ideally be made by adding a mask on the top layer. This is not possible in Roblox, so he had to resort to a different approach. This works for this case as it uses very flat colours, but hacky solutions only go so far.
I know there are thousands of other use cases that others will think of, so please share your thoughts and ideas below as well!