As a Roblox developer, it is currently too hard to create UI elements with arbitrary shapes or apply an image-based alpha mask to dynamic UI content.
ClipsDescendants is useful for restricting UI content to a GuiObject’s bounds, but it is fundamentally limited to the rectangular bounds of the object. When a design requires a custom shape, developers have to rely on pre-composed images, overlays, multiple UI elements, or custom workarounds that become increasingly difficult to maintain as the UI becomes more dynamic.
For example, consider a UI element displaying a player’s dynamically generated avatar. If the avatar needs to appear inside a custom shape, there is currently no straightforward way to use that shape as a mask while keeping the avatar itself dynamic.
Use cases
- Displaying dynamically generated images (with frames, viewports, etc..) inside arbitrary shapes.
- Circular or irregularly shaped profile pictures and avatars.
- or even animated frames with flipbooks for something more customizable
- Creating custom-shaped buttons without baking the shape into the button’s image.
- Applying a custom shape to a collection of UI elements.
- Creating minimaps with arbitrary boundaries.
- Creating progress bars or meters with non-rectangular shapes.
- Clipping
ViewportFramecontent to an arbitrary shape. - Creating UI designs where text, images, and other GUI objects share the same mask.
The current workarounds generally require developers to either bake the desired shape into their assets, place opaque/transparent images over other UI elements, or implement custom systems that replicate masking behavior (aka editable images). These approaches can increase UI complexity, memory usage and make dynamic interfaces considerably harder to build and maintain (or even impossible, depending on what you have in mind).
If Roblox is able to address this issue, it would improve our development experience because I could create complex, responsive UI designs using dynamic content without having to build additional layers of UI or prepare pre-composed assets for every use case. It would also make Roblox’s UI system much more capable of handling designs that are common in other modern UI frameworks and game engines.
Ideally, the mask would use the alpha channel of an image to determine the visibility of the content underneath it, with fully transparent pixels hiding the underlying content and opaque pixels allowing it to render normally. The mask should be applicable to a group of UI descendants rather than being limited to a single ImageLabel.
This would be especially useful when the masked content itself is dynamic, such as player avatars, text, ImageLabels, or ViewportFrames.
example with mutliples frames and a complex alpha image
functional concept: the AlphaMask/ImageMask is an instance similar to an ImageLabel combined with a CanvasGroup. You assign an Image to it (AlphaMask.Image), and that Image defines the opacity of each pixel of the element’s children.
All of the element’s children will be clipped according to its alpha channel.
supporting updates in real time so you can, for instance, animate a modal with a background
