Ability to make/edit clipping masks for UI elements in Studio

[TheEldritchDreamer]

As a Roblox Developer it’s currently impossible to cut an implemented GUI properly within studio, meaning that making rounded corners or filling a background layered underneath a custom GUI border is frankly impossible.

I think it’d be very nice to be able to cut pieces off by using a lasso tool while in-studio. Not only should this be possible for image-related GUI but Frames and such as well.

Example Scenario

Imagine you made this GUI and put it in Roblox. You intended to have a profile picture inside the bigger circle using the new VierportFrame.

You realize, however, that it won’t fit because the corners of the image will stick out.

With this new feature, you’d be able to round these corners off by cutting the corners using this lasso tool. This tool shouldn’t only allow free-hand selection but also things like polygon-lasso, circle & rectangle selection. The ability to feather the removal and invert the selection would be nice as well.

This would result in a fine profile picture within a frame!

It would remove the need to make multiple images with identical or different boundaries in 2D editors. It’ll make things more convenient for developers who prefer using the Frames without having to use a preset like ‘RobloxButtonDefault’ (because you can’t really edit them!). Hopefully people think the same way

[BanTech]

Your example could probably be solved with the presumably easier feature of being able to set ImageLabel as a circle/ellipse rather than rectangle.

I imagine it would be a bit simpler than doing free lasso as there’s only 1 setting instead of unlimited amounts of points.

[Corecii]

A more common alternative that accomplishes the same thing is a mask. A mask is a grayscale image where white represents fully visible, black represents hidden, and gray represents transparency.

If Roblox implemented image masks, you would just make an image with a white circle where the head goes, then apply it as a mask.

Image masks would likely take less work than drawing out points and image masks are more supported outside of Roblox.

[buildthomas]

So understanding correctly, this would basically be the tooling (Studio) part of this feature request: (it needs that one implemented in order to work)

AlphaMask property for Image Gui objects

An AlphaMask would be an additional image that multiplies the original image’s alpha channel with the alpha channel of the AlphaMask. As an example, lets say we want to display a headshot of the character’s avatar inside of a circular display. [image] The problem here is that the headshot doesn’t have a circular crop. Now if we were to have an AlphaMask that looks something like this: [image] Then it would take the alpha channel of this image and then it would be applied to the original i…

i.e. clipping masks, but then this feature request is for having a way to edit those masks in Studio, rather than uploading them.

EDIT: adjusted title of thread