Rounded edges of a ViewportFrame

Here, in this GUI, I have a background frame as so:
Screen Shot 2020-02-21 at 12.53.40 PM
In the game this will be the background for a GUI Avatar of the player, as you can see here:
Screen Shot 2020-02-21 at 12.54.26 PM
However, if you didn’t notice already, with the addition of the ViewportFrame player, the bottom edge has become flat. If I scale down the ViewportFrame, then there’s another sharp edge where the player’s avatar disappears, and this is not desirable. See here:
Screen Shot 2020-02-21 at 12.55.45 PM
Is there a workaround to this? Can I get the ViewportFrame to have the rounded 25px edges of the background frame? Or do I just have to pray no one gets OCD from the bottom edge being flat?

2 Likes


I think that might help you smmdndbk

2 Likes

EDIT: Misunderstood what he wanted. Nope, Roblox can’t do this (yet?)

Yup, my module is great for this!

local ImageMask = require(script.ImageMask)

local ImageID   = "https://www.roblox.com/headshot-thumbnail/image?userId="..game.Players.LocalPlayer.UserId.."&width=420&height=420&format=png"

local ClippedImage, ClipperPart = ImageMask.new(ImageID, "RoundedSquare")
	ClippedImage.Size = UDim2.new(1,0,1,0)
	ClippedImage.Parent = GUI_FRAME
	ClipperPart.Transparency = 0
	ClipperPart.Color = Color3.fromRGB(79,88,97)

These aren’t the player’s direct avatars however, these are randomly generated in-game ones.

Then you’re stuck, sorry. Roblox doesn’t have real clipping masks, and my hacky workaround only works on uploaded images.

I would recommend you to make a border in the rounded frame, if you need more help, ask me then

I think I have an idea that might help, however it cannot be implemented but hopefully will be supported in the future (look out for that).

But to be honest, you’re image with the flat bottom is pretty clean - it fits well and you can use that to your advantage if you are working with edges of the screen. I know it’s not what you are going for, but it’s something to consider.

The future method - it’s already difficult to use UI gradients to round off corners, and UI gradients themselves are restricted to rectangular geometry. If radial and other patterns are supported in the future, you can expect to be able to round off the corners of your GUIs using transparency. In fact, this will probably end up as the replacement for Roundify modules since it should be pretty easy to implement in theory, and is a lot more customizable and easier to access and change.

I’m sorry there’s nothing really that can be done (other than taking infinite frames and UI Gradients for all rotations and rounding things out - don’t do this). Hopefully we get new support and implementation for UI Gradients so things like your project become possible.

This solution wouldn’t work for OP, since he wants it to be alpha masked. Your module is convenient for when you are masking something with a background on it.

For now, what OP wants is not possible with Roblox right now. I hope it’s something they are planning on implementing sometime soon, because it is very much needed.

Fill out the Roblox survey and put masking as a high priority if it’s something you want/need in future GUI features!

1 Like

Correct, I originally misunderstood his intentions.

I came to the same conclusion as you in my last reply:

1 Like