How to make a perfect circle in roblox

Resources Community Tutorials
1

Sometimes for a ui project, I would need to create a circle, but the circle isn’t always, circular.
So I either try with a low quality image.

One or the two
but since I figured it out, I want to share with yall

local uiElement = ... -- insert the path to the uielement
local uiCorner = Instance.new("UICorner")
local uiStroke = Instance.new("UIStroke");

local circleCenter = Instance.new("Frame");

local size = math.min(uiElement.AbsoluteSize.X, uiElement.AbsoluteSize.Y) / 2;

uiCorner.CornerRadius = UDim.new(15);
uiCorner.Parent = circleCenter;

uiStroke.Color = uiElement.BackgroundColor3;
uiStroke.Thickness = size - 1;
uiStroke.Parent = circleCenter;

circleCenter.Size = UDim2.fromOffset(1,1);
circleCenter.Position = UDim2.new(uiElement.Position.X.Scale, uiElement.Position.X.Offset + size, uiElement.Position.Y.Scale, uiElement.Position.Y.Offset + size)
circleCenter.Parent = uiElement.Parent;
circleCenter.Name = "CircleCenter";
circleCenter.BackgroundColor3 = uiStroke.Color;

uiElement.Parent = circleCenter;
uiElement.Position = UDim2.new(.5, .5);
uiElement.AnchorPoint = Vector2.one / 2
uiElement.Size = UDim2.fromScale(uiElement.Size.X.Scale + uiElement.Size.X.Offset, uiElement.Size.Y.Scale + uiElement.Size.Y.Offset)
uiElement.Transparency = 0.999;

uiCorner:Clone().Parent = uiElement;

Explaination or whatever:

The circumference of the circle is being rendered because of a uiStroke
That uistroke is inside a frame, which is rounded out because of a uiCorner (with a radius of liek 15, 0)

That frame is referred inside the pseudocode as “circleCenter”
The proportionality of that circleCenter is 1 : 1 because this function because (and to my knowledge) Roblox doesn’t have a feature to make ovals (at least not with basic GuiObjects).

(you can however create an pill shape by adjusting the size)

The radius is determined by the thickness of the uiStroke
The radius’ formula is shown in the pseudocode size - 1

size is the minimum of the axis’s of the AbsoluteSize of the uiElement

basically _> min(AbsoluteSize.X, AbsoluteSize.Y)

Subtracting it from 1 is because of the circleCenter’s size, which causes a little excess
And then the uiElement is stored inside that circleCenter, so it stays in position of the center of the circle (obvis)
The size is adjusted to scale (super ez)

Formula : UDim2.fromScale(OffsetX + ScaleX, OffsetY + u_understand)

Also the uiElement is added into the circle to at as a sensor, which is very useful for circle buttons

  • useful
  • neva gotta use it
0 voters
5 Likes
2

I’m not sure when this would ever be useful, but this might be cool. Why I say this might be unhelpful is because you can just make a circle using Canva or Photopea if you’re looking for perfection. Still, other than that, the incredibly minuscule imperfections with Roblox’s circles don’t constitute the need for a fix. Cool idea though!

3

why are you overcomplicating things so much? Making a perfect circle is not that hard.

You only have to make a square and then apply a UICorner to make it round.

To make it square just use an UIAspectRatioConstraint or make sure it’s size offset is the same on the X and Y axis.

To make it round just add a UICorner with it’s CornerRadius set to UDim.new(0.5, 0).

like so:

-- LocalScript inside a ScreenGui

local screenGui = script.Parent

-- Method 1
local frame1 = Instance.new("Frame")
frame1.AnchorPoint = Vector2.new(.5, .5)
frame1.Size = UDim2.fromScale(.25, .25)
frame1.Position = UDim2.fromScale(.25, .5)

Instance.new("UIAspectRatioConstraint", frame1) --> make it perfectly square

local UICorner1 = Instance.new("UICorner")
UICorner1.CornerRadius = UDim.new(0.5, 0) --> make it perfectly round
UICorner1.Parent = frame1

frame1.Parent = screenGui



-- Method 2
local frame2 = Instance.new("Frame")
frame2.AnchorPoint = Vector2.new(.5, .5)
frame2.Position = UDim2.fromScale(.75, .5)

frame2.Size = UDim2.fromOffset(200, 200) --> make it perfectly square

local UICorner2 = Instance.new("UICorner") --> make it perfectly round
UICorner2.CornerRadius = UDim.new(0.5, 0)
UICorner2.Parent = frame2

frame2.Parent = screenGui
1 Like
4

except it isn’t perfect

image
image1001×143 44.3 KB

I dont know if you can see it but this is the problem that I aimed to fix.
It crops out, and isn’t perfectly circular.

1 Like
5

Not sure what you’re doing wrong. But i’ve just tested it, both are 20x20 pixels.

I took a screenshot of it and dragged it into an image editing software.
I’ll leave it up to you to guess which one is your method and which one is mine. I see no noticeable difference.

image
image1109×675 9.67 KB

1 Like
6

me when ui corner with scale 10

2 Likes