I intend on making a GUI whose buttons will be thirds of a circle. I don’t fully understand how I would be able to detect a MouseOver for this, or a MouseClick. I also don’t fully understand how I would get it to tween out, kind of like this:
Try using Interface Tools plugin.
Could you describe it a bit for me?
It doesn’t allow you to make circle shaped GUIs, but it makes the hard edges of the GUIs to have a curve
You mean like this? 
@ItzMeZeus_IGotHacked
That wasn’t my question. I clearly asked for something else.
@BaggyChris
I showed a picture in my post. No, I do not.
You would probably have ImageButtons as the thirds, and have them tween size when hovered over.
I know that much, but simply tweening the size won’t work properly. It won’t expand it outwards, it’ll just push it inside and make it a bit bigger.
You want to do TweenSizeAndPosition then.
That’s not exactly very helpful. I know how to program, but the exact way to tween it outwards in that way fails to befall me.
What do you mean, does it not work or not look the way you want it?
Here’s a snippet of old code of mine if you need a reference
script.Parent:TweenSizeAndPosition(UDim2.new(0.397, 0,-0.61, 0),UDim2.new(0.3, 0,0.5, 0))You are merely saying to tween it. I know I have to tween it, but I want to avoid breaks in the smoothness and continuity. Tweening it based on the Top Left Corner will merely muck up the illusion of a 1/3 divided button. I showed quite clearly on my example.
Maybe you could use a seperate third behind the “default” one, and tween it when the default is hovered over, to make it appear the default one is expanding.
Alright, since nobody else wants to provide useful information, allow me.
What you’re trying to create is called a radial menu. This implementation takes 3 ImageLabels, each with the same image but rotated 120° from each other. Take an image like this (but with a transparent background, of course) and cut away any of the 2 thirds.
You’ll end up with this:
This will be what you upload to Roblox and use in your ImageLabels. Setup your 3 ImageLabels such that they are each anchored to their center (0.5, 0.5) and positioned in the center of their parent frame, like this:
You should end up with something like this:
Because they are all anchored at their centers, resizing any of them will cause them to resize outward from the center, like so!
Now unfortunately the MouseEnter/MouseLeave events won’t cut it for detecting mouse hover in this case. However, with some vector math you should be able to figure out which button is being hovered over by figuring out the angle between the up vector in 2d space (0, 1) and whatever direction the mouse is from the center. This module has a function for figuring this out in 3d space which can be easily adapted to 2d space.
Hope this helps!
EgoMoose has a circular gui in his GuiLib he posted, I believe thats what your looking for.
Here’s a helpful link to GuiLib, amazing module.
I was unaware there was a radial menu included in this. Use this instead as it’s much better!
@Rocky28447
Thanks, that helps an absolute ton!
@Eniiqz @grif_0
I try not to use 3rd party code or libraries, thanks though.
Could you elaborate how to actually utilize this module in the code?
Bit of a bump, but I’ll provide more info as requested. The function you want to use is VectorUtil.AngleBetweenSigned()
The 3 parameters you want to pass to it are Vector3.new(0, 1, 0) and (mousePosition - screenSize / 2).Unit, but you’re going to want to convert this to a Vector3 with 0 as the Z coordinate. The last parameter you want to give the function is Vector3.new(0, 0, 1). The return value of this function will give you the angle that the mouse is currently at from the center of the screen. The reason why this works is because 2d space is just 3d space with no Z coordinate, which is the same as a Z coordinate of 0.
Mouse position can be gotten from UserInputService:GetMouseLocation() and screen size can be gotten from workspace.CurrentCamera.ViewportSize.
Of course, if your radial menu is not at the screen’s center you’ll need to transform the mouse position accordingly.
