Creating a radial menu problems

NinjoOnline · February 3, 2020, 2:34pm

I’m having problems creating a clean radial menu.
robloxapp-20200203-2229488
It’s like almost there. Problems I am having are

I don’t believe the 5 buttons I placed are properly in a circle kinda shape, so guessing there needs to be some sort of math code to get like half a circle or something to place them appropriately.
The main problem is the tweening. They ALL tween the right. They should tween like so

Tween800×600 9.06 KB

Ignore my horrific drawing

I got the file below with everything you need to test, etc.

local Frame = script.Parent

local Main = Frame:WaitForChild('Main')

local Opened = false

Main.Activated:Connect(function()
	Opened = not Opened
	
	if Opened then
		for i = 1, 5 do
			local Button = Frame:FindFirstChild('Button' .. i)
			Button.Visible = true
			Button:TweenPosition(UDim2.new(Button.Position.X.Scale + 0.05, 0, Button.Position.Y.Scale + 0.05, 0), 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.Visible = false
			Button:TweenPosition(UDim2.new(Button.Position.X.Scale - 0.05, 0, Button.Position.Y.Scale - 0.05, 0), Enum.EasingDirection.Out, Enum.EasingStyle.Linear, 0.25, true)
			wait(0.1)
		end
	end
end)

File
Radial.rbxm (9.1 KB)

Soybeen · February 3, 2020, 2:51pm

I’ll leave this here: UI | Documentation - Roblox Creator Hub

MrAsync · February 3, 2020, 2:52pm

You will need to use Sin and Cos to accomplish this. This is some code I wrote to accomplish this.

for i, button in ipairs(self.buttons) do
    --Use -90 to offset the initial position
    local degree = -90 + ((i - 1) * 45)

    local pos = UDim2.new(
        .5 + 1.085 * math.cos(math.rad(degree)), 0,
        .5 + 1.085 * math.sin(math.rad(degree)), 0
    )
end

The 1.085 is the number I had to find to get the proper spacing between the center activator button and the surrounding radial buttons. Let me know if you have any questions.

NinjoOnline · February 3, 2020, 2:53pm

Already ready that over and then re-read it

NinjoOnline · February 3, 2020, 2:54pm

self.buttons being like a table of the 5 buttons I’m assuming?

MrAsync · February 3, 2020, 2:55pm

Yes. This can be adapted to simply literate through the children of a frame for example.

NinjoOnline · February 3, 2020, 2:56pm

Not sure if I’m missing something, but it didn’t alter the position of my buttons???

for i, button in ipairs(Buttons) do
    --Use -90 to offset the initial position
    local degree = -90 + ((i - 1) * 45)

    local pos = UDim2.new(
        .5 + 1.085 * math.cos(math.rad(degree)), 0,
        .5 + 1.085 * math.sin(math.rad(degree)), 0
    )

	button.Position = pos
end

MrAsync · February 3, 2020, 3:57pm

That’s odd. My implementation works flawlessly. I’ll review my module and I’ll let you know soon. It may be an issue with iPairs but I’m not sure.

posatta · February 3, 2020, 4:03pm

What’s in Buttons? If the code doesn’t do anything, it’s probably a dictionary, which is why ipairs isn’t working. Try switching to pairs maybe?

NinjoOnline · February 3, 2020, 4:09pm

local Buttons = {Frame.Button1, Frame.Button2, Frame.Button3, Frame.Button4, Frame.Button5}

MrAsync · February 3, 2020, 4:15pm

Try local buttons = frame:GetChildren()

NinjoOnline · February 3, 2020, 4:16pm

There are other stuff located insid ethe frame tho, such as the script and the main button at the bottom

MrAsync · February 3, 2020, 4:17pm

I know this method works. I wrote it a few weeks ago. With a little Tweening this is the result.

NinjoOnline · February 3, 2020, 4:23pm

I’m not on PC atm, but so this should work then?

for i, button in ipairs(Frame:GetChildren()) do
if v:IsA('ImageButton') and button ~= MainButton then
    --Use -90 to offset the initial position
    local degree = -90 + ((i - 1) * 45)

    local pos = UDim2.new(
        .5 + 1.085 * math.cos(math.rad(degree)), 0,
        .5 + 1.085 * math.sin(math.rad(degree)), 0
    )

	button.Position = pos
end
end

You also didn’t have

button.Position = pos

In the code you posted, but I’m assuming I’ve put it in the right spot?

goldenstein64 · February 3, 2020, 5:32pm

Could it be that the buttons are being moved off-screen when the function is run?
Maybe you could try changing the two 1.085 values in the UDim2.new constructor to something much smaller, like 0.25.

mr_smellyman · February 3, 2020, 5:42pm

Set your AnchorPoint on the buttons to 0.5, 0.5 and try it again.

MrAsync · February 3, 2020, 6:23pm

The images should have an AnchorPoint of (0.5, 0.5). These positions will be relative to the center button.

stravant · February 3, 2020, 6:24pm

Something I’d like to add: Please make your radial menu animate faster than that. Radial menus like that are supposed to be about making your UI get out of the way of gameplay. If you make it too slow to animate you’re defeating that very purpose of designing it as a radial menu in the first place.

MrAsync · February 3, 2020, 10:35pm

This gif is slowed to show the functionality, not the end product. Slow UI is incredibly frustrating to use, I made sure this is fast and snappy.

NinjoOnline · February 4, 2020, 2:55am

Still doesn’t work

I made the main button pink, so you can tell which buttons are being positioned

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.5 * math.cos(math.rad(degree)), 0,
	        .5 + 0.5 * math.sin(math.rad(degree)), 0
	    )
	
		button.Position = pos
	end
end

And using 1.085

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 + 1.085 * math.cos(math.rad(degree)), 0,
	        .5 + 1.085 * math.sin(math.rad(degree)), 0
	    )
	
		button.Position = pos
	end
end