Just as a challenge, I’ve decided to limit myself to making UI with only the native Roblox UI components. Meaning no image labels unless absolutely necessary.
Currently I’m attempting to recreate the following UI:
However, I am unable to figure out how to create the circled part, specifically how to make a curved line with both ends being a semi-circle. Here’s my current progress:
Edit 1, copy & pasted from the reply section:
It seems like, from the current two replies, that putting an UICorner at the end is the only possible solution. Then the question shifts to how to make ClipDescendants work on a rotated UI to match up the edges of the circle. Or, another possible way, how to remove transparency overlap between two UIs.
Maybe add a frame with UICorner of 1, 1 (full circle corners) and place it at the edges of your curved lines? Make it the same color as the lines so that it blends properly. Then it’s just a matter of placing it so that the semi-circle sticks out.
I forgot to mention this, my bad. The line is actually 0.5 transparent, so adding a circle at the end will overlap their transparency.
I also believe it’s not possible, or at least I haven’t thought of a way to clip the circle to make it semi-circle. As ClipDescedents doesn’t work when rotated.
This shape is not possible without the use of ImageLabels, or doing something incredibly inefficient like duplicating Frames along the length of the line, then using UICorners on the end-caps. Theoretically, you could automatically generate a part of a circle using Frames only in the form of fake lines, but any sort of scaling tends to result in those lines quickly falling apart and exposing seams. They’re also heavily aliased if you do it this way.
Edit: Here is an example of what I am describing from an older project of mine.
Thanks for the reply. To be clear, I’ve got the line part down already, it scales normally and all that. It’s just that I can’t figure out how to make the ends rounded because an unclipped circle at the end of the line would cause their transparency to overlap.
It seems like, from the current two replies, that putting an UICorner at the end is the only possible solution. Then the question shifts to how to make ClipDescendants work on a rotated UI to match up the edges of the circle. Or, another possible way, how to remove transparency overlap between two UIs.
Would a CanvasGroup for each complete curve achieve what you want? I haven’t used CanvasGroups enough to know if they would make the entire thing transparent, or work on each element individually.
