Here, in this GUI, I have a background frame as so:
In the game this will be the background for a GUI Avatar of the player, as you can see here:
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:
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
3 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
Hi @marfit, i know that it maybe not can help you further, but have you tried see how this game has made it? It was using ViewportFrames, only 3D, but as this was a SurfaceGUI you can make the same only 2D. Else try to check out this property of GUIs.
I’m pretty sure the way they do it is by emulating the wall in the ViewportFrame as well. This is not possible in my game.
1 Like
Else check out the second link
But i played this game once and really not think it was this. It create (i think) a invisible part in the clicked position, then it uses a surface GUI with a cliped Viewport frame. But again, if you want the second link maybe can help
1 Like