Hi, I was wondering what is the best way to make a radial menu, it is easier to code it in, or make one yourself.
If I had to code it in, how would I do that?
Here’s an article on how to create one.
https://developer.roblox.com/articles/Creating-a-Radial-Menu
4 Likes
You would want to make a few static images such as the center circle and the outside dial. Otherwise you could follow the premise of that tutorial to make it work.
2 Likes
Thank you.
1 Like
Do you mean something like this?:
If so, I did this with just ImageLabels and checking the mouse position to check if it was within the range of these equations:
Not sure how you’d get it to work with more than 4 sectors, but it shouldn’t be that different.
7 Likes
Oh, that’s very interesting, thank you.
1 Like
Did you position those images from a script or did you do it yourself, if you did it by code, how would I do that.
1 Like
A script, if I remember right. The sectors are just one image label rotated around. It wouldn’t be tough to do without a script, though.
How did you make it go around the center? That’s really my problem here.
I forget exactly how (I made that a year ago), but it’s most likely just setting the anchor points of the UI objects appropriately. If I had to guess, in there it’s probably (0.5, 0.5) with a position of (0.5, 0, 0.5, 0).
2 Likes
And then you would just rotate… Okay thanks!
2 Likes
Ran into a bit of a problem, how would I make these go out more?
I don’t exactly remember. Try setting the X AnchorPoint to 1? UI design isn’t my forte.
It just move it up a bit more 
I’m trying to make it go out more. Scale,Offset, and Anchor point just move it.
I have been thinking about this a lot, and I came up with the following problem: I want my UI elements at these positions (red dots around the ring), but I do not know how to get these positions.
If you want to use trig for this then you’ll need the radius of that circle.
The coordinates for each point would be found like this:
x = r * math.cos(angle)
y = r * math.sin(angle)
Here's a code example
-- Local Script
local PlayerGui = game:GetService("Players").LocalPlayer:WaitForChild("PlayerGui")
local scrnGui = Instance.new("ScreenGui")
scrnGui.Parent = PlayerGui
-- create a parent frame for the dots
local frame = Instance.new("Frame")
frame.AnchorPoint = Vector2.new(0.5, 0.5)
frame.Size = UDim2.new(0.5, 0, 0.5, 0)
frame.SizeConstraint = Enum.SizeConstraint.RelativeYY
frame.Position = UDim2.new(0.5, 0, 0.5, 0)
frame.BackgroundColor3 = Color3.fromRGB(255,255,255)
frame.BackgroundTransparency = 0.5
frame.BorderSizePixel = 0
frame.Parent = scrnGui
-- create a center dot
local center = Instance.new("Frame")
center.BackgroundColor3 = Color3.fromRGB(255,0,0)
center.AnchorPoint = Vector2.new(0.5, 0.5)
center.Size = UDim2.new(0.05, 0, 0.05, 0)
center.Position = UDim2.new(0.5, 0, 0.5, 0)
center.Parent = frame
-- radius of the circle used for placement of menu elements
local r = frame.AbsoluteSize.Y * 0.5
local numSections = 8 -- 8 sections (45 deg each)
local stepAngle = 360 / numSections
local angle, x, y, newbox
for i=1, numSections do
angle = math.rad(i * stepAngle) -- find angle
x = r * math.cos(angle) -- find x coord
y = r * math.sin(angle) -- find y coord
newbox = center:Clone()
newbox.Position = UDim2.new(0.5,x,0.5,y) -- place as offset from center
newbox.Parent = frame
end
-- rotate the frame a little
frame.Rotation = 5
You’ll still have to work out the orientation of menu images at each red dot. The tangent of the curve at those points should be useful for that. I’d maybe think about creating one template section by hand (a menu item parented to a frame at the center of the circle) and then copy/rotate into place for each section using a script. That way the position and orientation of each element would be baked in and you’d just need to worry about the angle of each section.
6 Likes
I was originally going to use:
X: xcosθ - ysinθ
Y: xsinθ - ycosθ
I only just realized, that is only for special cases. The video I watched gave me your equation. I really appreciate the example.
Thanks for the help!
2 Likes
Yeah, of course. If you need to rotate the menu elements at those red dot positions in order to orient them correctly, then you still have some interesting challenges ahead. Tricky, but it’s a neat design. I don’t recall seeing anything like it used on Roblox.
1 Like