Masking for UI Elements

[DevBuckette]

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.

Use Cases

• 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!

[TheCarbyneUniverse (Carbyne)]

Full support. Even if Roblox allows us to create custom masking shapes using only four vertices, that covers 90% of our use cases! I mean come on, now they cannot say that the engine is simply unfit for this, not after they release FiB3 and UICorners with pixel-precision mouse inputs. There have been feature requests with hundreds of likes just sitting there for years and yet this feature has not been acknowledged.

I hate that we need to do workarounds for basic things like a health bar if we want to do anything but a boring old rectangle. In other sectors, the possibility of hitting an engine barrier is significantly less than in UI. It’s sad that we don’t even have the functionalities that a kid’s typical basic online drawing app has, let alone masking.

I don’t want to discourage the team or anything, and if they’re working on this right now, great! But if not, please reprioritize because 80% of the features you push out are useful 20% of the times when it should be the other way around.

We don’t even have a fully developed 2D UI system, so there goes any feature requests that ask for 3D UI (sadly).

An easy way to mask something automatically can be via alpha channels of an image. Most of the time, with material UI at least, the buttons are often solid-colored with distinct transparent and opaque areas, in which the mask can envelop the opaque area so that any object inside (with parent ClipsDescendants on) can properly be hidden.

I guess this is on the to-do list of Roblox UI:

• masking <—
• blur frames
• higher quality images
• basic shapes in-built

100+ things

no lol

Anyways, I’ve been recently using off-Roblox things like Python and CSS, so I may see more faults in the engine that I should, but that’s my take on this.

[boatbomber]

The lack of proper masking is extremely annoying.

I’ve created an open source module that uses hacky and roundabout methods to mask an image, and it continues to be used constantly. Dev Rel even promoted this module because we all know that masking is something we seriously need. This module only handles simple images, and is not enough to really use it to mask professional UI.

Image Clipping Module

One of my smaller projects, but useful enough to share. This module is used to quickly create an image with a clipping mask. It works using ViewportFrames, MeshParts, and Decals. [image] The module gives you those top images. With a tiny tweak, I made it show what it’s doing on the bottom row. It places your image as a Decal onto a MeshPart, and puts that into a ViewportFrame. Once it’s done, nothing ever moves, so it’s roughly the same performance as ImageLabels. API: local ImageMask …

---

For a simple animated logo intro, we had to make everything solid color. There is nothing but black and white, allowing us to hide the seams between the various elements. There’s frames for their .ClipsDescendants ability, and images with various cutouts to act as shaped masks (only possible since everything else is black).

This is overcomplicating what should be a simple procedure.

[Ex_Bla (GroupHolder)]

100%. I’m a UI Designer and I’m forced to use other programs like Photoshop to create nice UIs. I want to be able to make the same quality UIs I make in photoshop using Roblox I think that’d be great.

[Eternalove_fan32 (FrostDracony)]

I am not a UI Designer, but i can say at 100% that this is true. Ok, i could understand that it is really hard to make masks, but i think Roblox still should look to add this in their to-do list.

[Snowdesa (Boopbot)]

While I’m not a UI Designer, I absolutely see how this is an issue and a feature that needs to be added. I was unfamiliar with what the term masking was until I watched a few videos on the topic and it boggles my mind that Roblox hasn’t already added such. Especially considering the videos I watched were quite old- how many years have we been missing out on this?

We shouldn’t need to use finicky workarounds that aren’t supported, causing headaches later should issue arise. Rather it’d be amazing to have things made so much simpler by having a feature like UI Masking added.

[Xx_FROSTBITExX (Frosty)]

I can definitely see this useful and helpful for many use-cases. I fully support this feature
and many have asked several times before. Currently there is a large limitation for masking, and implementing this would also allow for the functionality of cool tweens such as tear on vehicles, ect. I really hope that this feature is added.

[Modyfyed]

I 100% support adding masking. I am running into this issue right now trying to make an XP meter. I like to make fancy shaded UI with lots of gradient and shadows, and it’s so tedious to do without masking.

[Crykee]

A necessary feature for the quality of our games to increase.
UI design on Roblox is very limited to rectangular shapes without the ability to create complex shapes using masking.

[Wynntur]

It’s very important that we do get UI masking at some point in the future. What makes development thoroughly difficult is optimizing it. But when it comes to UI and having to go through round-a-about methods as well as having more than what’s needed in a single frame…it starts to get really annoying. I honestly vouch for this wholeheartedly.

[TheEldritchDreamer]

I certainly agree with this topic!
Everything GUI is more complicated on Roblox than it’s supposed to be.
Masking is key to efficient & quality GUI design and I think implementing such a thing would be a great relief to all GUI designers here on Roblox.

I have done some past GUI work and it was a big burden to get it right.
To give a prime example:

This is a portrait frame asset I made for a game concept of mine.

If possible, creating an API for masking GUI would be interesting too! Could be used to make some special effects or something.

While we’re at it, perhaps it would be a great idea to introduce animated GUI as well such as HQ .gifs or similar. that way I’d no longer have to script my way out using a spritesheet that will be scaled down horribly anyway

[Sentross]

100% support. I can’t even make a list of the number of times I’ve needed this feature unless I want to live in that list. A lot of UI features are needed, and this is a big one. The comprises developers have to make because of the lack of this feature is unbelievable, and overall, I am just wasting time dealing with these issues.

[GameDevSky]

As a UX and UI designer myself, I think that this feature should be added as it will be useful feature for many people who design UIs on Roblox.

As @TheCarbyneUniverse has said, there isn’t even fully developer 2D UI system. UI designers who use Roblox Studio for designing their user interfaces lack many features such as UI masking, drop shadows (there is a plugin called uiDesign Lite created by @Stelrex that you can use to create drop shadows for your UIs. There is another plugin called uiDesign Plus that has also been created by @Stelrex. This plugin just has more features in it. A DevForum tutorial on how to use the plugins can be found here), being able to add on other effects on UIs such as blurs.

There’s also much more that can be added to the Roblox Studio 2D UI system such as being able to create linear and radial gradients as well as having a new way to create gradients as how we are able to do so in Roblox Studio should be upgraded and made better. I’ve created an #platform-feedback:engine-features topic on this feature, and I hope to this feature to come as well. You can view more information in the topic. Here’s the #platform-feedback:engine-features request topic: Change Up How The Gradients Work On Roblox

---

It is great that Roblox has all these constraints and all, but I would like to see UI masking as well as other features like I have mentioned above.

[grif_0 (not_grif)]

I totally support this.

I feel like there’s a ton lacking from the UI components of studio, which masking and blur frames and a 2d particle system would be super useful for.

Im not able to pay for photoshop, so making much higher qualities is hard for me, and UI masking would greatly improve it. Not just for me, but for everyone who cant afford external programs like photoshop, even the people who have photoshop.

[IlyasTawawe]

This features would highly improve UI/UX design a lot and makes our life lot easier!

[Neutron_Flow]

YES. This would be so nice. A while ago I had an idea for a UI element which required this. It was essentially a custom shaped progress bar similar to the last example you showed. I didn’t know it was called masking or that it’s a common feature elsewhere, but I knew I needed it.

[skasine (valiant)]

There are two things we need to ultimately make UI design on Roblox better, and that’s to provide an in-built masking functionality, and responsive resizing to accompany masks. This way, not everything will have to be nine-sliced.

This makes programming interfaces much simpler because the thing with UI design on Roblox is that there is only so much you can do, because the interaction with assets cannot accompany it. It would be a lot more seamless without any third-party code having to complete the job for you.

[tyridge77]

Definitely has been a strong need for us for as long as I can remember.