How to make SurfaceGui not run off non-rectangular parts and unions

[qpwoeiruty122333 (TheOverseer)]

I’m trying to create a leaderboard for my game. However, there is one issue I’m running into. I have a union which is basically just a rectangle and triangle together. If I add SurfaceGui to it, it covers a rectangle of area and runs off the union.

This is what happens when I use SurfaceGui. It may be difficult to see, but the green vignette runs off the union.

I have found two possible solutions to this, but they aren’t ideal.

Solution 1: Hide it behind a part. This solution isn’t always best because it requires a visible part to block the overlap.

Solution 2: This solution is better, but isn’t perfect. This involves using an almost completely transparent part (Transparency 0.99999, shown as 1) with CanCollide set to false and Glass material. Due to the unique properties of the Glass material, it will hide the SurfaceGui. However, it will also hide other things behind it and can look slightly weird.

Are there any better alternatives?

[Pure_Bacn]

Without any crazy masking methods, I don’t think it is possible unless you just cut it out when it is an image.

[qpwoeiruty122333 (TheOverseer)]

That only applies to non-updating and mostly non-interactable images.

[6mikael6]

You can add a CanvasGroup to the leaderboard SurfaceGui and parent all the leaderboard UI under the CanvasGroup.

Then you can just use a rotated and offset UIGradient to hide the corner of the CanvasGroup.

[qpwoeiruty122333 (TheOverseer)]

@6mikael6

Then you can just use a rotated and offset UIGradient to hide the corner of the CanvasGroup.

I’m not sure what you mean by this part, since as far as I know UIGradients cannot fade to transparency.

[6mikael6]

Oh yea you have to select the transparency property and only then these 3 dots appear.

Pressing on that opens up Roblox’s sequence graph. It’s kinda hidden which is a shame because of how useful it is.

[qpwoeiruty122333 (TheOverseer)]

Also why should my GUI be under a CanvasGroup and not just directly under the SurfaceGui?

[6mikael6]

I think the SurfaceGui is only for placing the UI onto a surface, just as ScreenGui is for placing it onto the screen.

CanvasGroup in the other hand renders its descendant UIs as one UI object:

CanvasGroup renders descendants as a group with color and transparency applied to the render result. GuiEffect (UICorner and UIGradient) under CanvasGroup will also apply to the whole group.