Creating a radial menu problems

[NinjoOnline]

for i, button in ipairs(Frame:GetChildren()) do
	if button:IsA('ImageButton') and button ~= Main then
	    --Use -90 to offset the initial position
	    local degree = -90 + ((i - 1) * 45)
	
	    local pos = UDim2.new(
	        .5 + 0.25 * math.cos(math.rad(degree)), 0,
	        .5 + 0.25 * math.sin(math.rad(degree)), 0
	    )
	
		button.Position = pos
	end
end

[NinjoOnline]

Couldn’t get your system to work UI is still having to be manually placed, which causes spacing problems But this is what I got to so far

Radial 2.rbxm (4.8 KB)

local Positions = {
	[Frame.Button1] = UDim2.new(0.15, 0, 0.625, 0),
	[Frame.Button2] = UDim2.new(0.3, 0, 0.325, 0),
	[Frame.Button3] = UDim2.new(0.5, 0, 0.2, 0),
	[Frame.Button4] = UDim2.new(0.7, 0, 0.325, 0),
	[Frame.Button5] = UDim2.new(0.85, 0, 0.625, 0)
}

Main.Activated:Connect(function()
	Opened = not Opened
	
	if Opened then
		for i = 1, 5 do
			local Button = Frame:FindFirstChild('Button' .. i)
			Button:TweenPosition(Positions[Button], Enum.EasingDirection.Out, Enum.EasingStyle.Linear, 0.25, true)
			wait(0.1)
		end
	else
		for i = 1, 5 do
			local Button = Frame:FindFirstChild('Button' .. i)
			Button:TweenPosition(UDim2.new(0.5, 0, 0.8, 0), Enum.EasingDirection.Out, Enum.EasingStyle.Linear, 0.25, true)
			wait(0.1)
		end
	end
end)

[mr_smellyman]

local radius = 0.5
local angularSpacingDegrees = 45
local buttons = {}
for i, v in pairs(Frame:GetChildren()) do
    if button:IsA('ImageButton') and button ~= Main then
        table.insert(buttons, button)
    end
end
for i, button in pairs(buttons) do
	--Use -90 to offset the initial position
	local degree = -90 + ((i - 1) * angularSpacingDegrees)
	
	local pos = UDim2.new(
	        0.5 + (radius * math.cos(math.rad(degree))), 0,
	        0.5 + (radius * math.sin(math.rad(degree))), 0
	    )
	
	button.Position = pos
end

You were iterating over all the children, so the i variable wasn’t really what you expected. A decent fix is to make a separate table of known buttons beforehand, then you can iterate over it and you know there isn’t anything in between the buttons in the list, so the i variable becomes meaningful again.

I also moved some of the configuration numbers out of the loop as some configuration variables instead. This should make it a little easier to edit.

[NinjoOnline]

Still problems

Made the frame a transparent black so can see the frame they are kept in, but it’s creating a pointed spot. I also want them on top, not on the right

[mr_smellyman]

Looks like intended now. I’d rather let you figure this out on your own from here, you’re very close. Hint: you’re working with relative positions, so they’re scaled by the size of the parent frame. You also already have a -90 offset to start your arc at.

[NinjoOnline]

Figured out problem numero uno. Put them in a separate, SQUARE frame. Seemed to get them nicer looking

Gimme a few to figure out the next bit

[NinjoOnline]

Got it kinda working!

Is there anyway to make the ones on the edge (far left, far right) be up a lil? I want a shape more like this

So the centre (main) button is lower than the others

[mr_smellyman]

Sure, you might just want to start at a different angle and reduce the spacing for that. If you have 5 radial buttons, that means you have 4 spaces between them. You can change that spacing to be lower, but it’ll mean they aren’t centered anymore. So you just need to find out what starting angle you need to get them centered.

Since you’re starting with 45 degrees spacing and sweeping a 180 degree angle, you start at -180 degrees. If you wanted to reducing spacing to 30 degrees, you just need to know the sweep:

spacing = 30
numSpaces = numButtons - 1
sweep = spacing * numSpaces
startingAngle = -90 - (sweep / 2)

Sorry, it’s a bit late here and my brain’s not fully functional. Got the math wrong the first time!

Basically, you’re treating -90 degrees as the “center.” So you need to start at half the sweep angle below that.

[NinjoOnline]

How does that get implemented into it then?? As, well I had to change the -90 from the original code to 180 to get the buttons at the top, so would ‘startingAngle’ just replace the 180?

[mr_smellyman]

local radius = 0.5
local angularSpacingDegrees = 45
local buttons = {}
for i, v in pairs(Frame:GetChildren()) do
    if button:IsA('ImageButton') and button ~= Main then
        table.insert(buttons, button)
    end
end

local sweep = #buttons - 1) * angularSpacingDegrees
local startingAngle = -90 - (sweep / 2)
for i, button in pairs(buttons) do
	local degree = startingAngle + ((i - 1) * angularSpacingDegrees)
	
	local pos = UDim2.new(
	        0.5 + (radius * math.cos(math.rad(degree))), 0,
	        0.5 + (radius * math.sin(math.rad(degree))), 0
	    )
	
	button.Position = pos
end

You’re on the right path. Try this out.

[NinjoOnline]

Not sure it changed anything?

[mr_smellyman]

Oh, yeah, I didn’t change the value of the angularSpacingDegrees variable. Try setting it to whatever you want, like 30 or 40.

[NinjoOnline]

Ahh ok ye seems to work

I could only really do 40 tho, without them getting like too close to each other

[MrAsync (Async)]

I’m glad it all worked out! Most of the math is just playing around util you get what you want.