How to clip a UI diagonally

Help and Feedback Art Design Support
#1

I’m trying to recreate the following UI without using ImageLabel, and all left is the two curved, thick, transparent bars:

image
image818×779 43.7 KB

On a previous topic I created, I got the answer that I probably need to use a CanvasGroup to prevent transparency overlap and individual circular frames as the end of the curve.

image
image699×448 5.79 KB

The problem is, ClipDescendants doesn’t support rotation, so I don’t really know how to clip out the extra part at the ends.

Below attached is a version of the UI stripped down to only the two bars, hopefully you are able to figure out a method that I can’t. Thanks in advance for any aid.
SpinnerUI.rbxl (47.8 KB)

#2

Due to limitations of Roblox UI, you will need to create images and use them as normal image labels. You can only do so much with Roblox UI.

1 Like
#3

That’s unfortunate. I’ve spent an entire hour groaning at my screen trying to get the curve right.

Thanks for the advice, I’ll resort to image until Roblox themselves add some new UI modifier or till anyone else comes up with a possible solution.

#4

Would a UIGradient work? It wouldn’t have rounded edges, but it would work.

#5

As attached in the post, you can see that the curve is already made in studio. I’m just trying to figure out how to round the ends.

#6

Okay okay, so I saw your post before it’s edited, which mentioned the use of CanvasGroup for clipping. Turns out, that may very well work. I’ll mess around with rotation, size, and amount of CanvasGroup when I have the time. Hopefully rendering 5 or 6 CanvasGroup doesn’t cause any lag for low end devices.
image

#7

It shouldn’t cause noticeable lag unless if there’s like a ton of children.

#8

i would use long rounded frames for the ends that are rotated slightly, instead of circles

image
image1309×1260 116 KB

my attempt at recreating the original image in roblox studio

i also generated those tilted lines with a script

#9

What do you mean by long rounded frames? Can you elaborate?

And yea, the rest of the UI component I have also replicated, it’s just the curves that I can’t figure out.

#10

image
image1721×1295 93.6 KB

i wanted to avoid using circles since they just don’t work here easily

image

so i made it longer and rotated it so it can actually go into the line to give that curve

image

#11

Ah, I see what you mean. It works in a practical sense. However, it does leave a tiny, almost unnoticeable imperfection on the connecting point of the curve and the end. I’ll take this approach if I can’t figure out how to clip the UI properly, thanks a lot for your effort and time.

I’ll mark the CanvasGroup approach as the solution for now, but if I can’t get it to work, I’ll mark yours as the solution instead. Thanks again c:

#12

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.