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.
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.
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.
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.
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.
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.
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.
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.
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.
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
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.
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.
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.
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.
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.
I think this should be implemented via canvas groups. Perhaps it could be set up so that canvasgroups have a “mask” property, and that mask can be another canvasGroup or imageLabel
that way I’d no longer have to script my way out using a spritesheet that will be scaled down horribly anyway