Im re-creating the roblox Emote wheel gui and am not sure how to detect when the mouse is in one of the 8 segments
GUI :
Layout :
(The “Base” is the dark circular background, the “Lines” is the circle in the center and the lines extruding out of it)
How would I recreate the effect of the Roblox Emote Wheel
https://developer.roblox.com/en-us/api-reference/event/GuiObject/MouseEnter
The MouseEnter event of a GuiObject fires whenever the player’s mouse cursor is focused on that GuiObject. Similarly, MouseLeave performs the opposite, firing when the player’s mouse cursor unfocuses that GuiObject.
https://developer.roblox.com/en-us/api-reference/event/GuiObject/MouseLeave
Mouse Enter and Mouse Leave will honestly be fine if implemented well. However, as the Ui elements are rotated and not symmetrical/square, the elements “hitboxes” per say will still be bigger than the visible Ui image. The only way I could think of to get around this would be to create your own mouse enter/leave functions using trigonometry. If you don’t care for extreme precision then then the functions shouldn’t be to difficult.
At the end of the day though, I do honestly believe that provided mouse enter/leave function will work fine and smoothly if applied well to work with a radial gui.
the problem is that its all one gui, its just the base and lines
As in it is just one image?
SagaciousWizard
if you scroll down a little it shows the “Layout”
Not sure how I missed that.
Either way, that’ll be a bit more of a pain to deal with. You’d probably be stuck trying to splice the image into perfect sections, but honestly, I can’t see why you wouldn’t just import the image in sections. Shouldn’t be to difficult to split of recreate.
since image buttons arnt wrapped to the image, it would still cause issues
Mouse enter won’t be great for this as gui objects are counted as squares.
It is the easier option.
If you want it accurate then we can do a more mathsy approach.
Get the distance of the mouse to the centre of the screen.
You can get the distance using (pos1 - pos2).magnitude
You can get centre of screen by taking the absoluteSize of a screenGui and halving it
e.g. local centre = Instance.new(“ScreenGui”).AbsoluteSize/2 (might have to be parented to playerGui)
then if you check if the distance is less than the radius of the circle, it means we can have then detected when it is in the circle.
Next is detecting when we are in the segments.
For this we will need to calculate the angle of the mouse from the top (think of it like bearings).
For this we can use dot product to figure out which quadrant we are in.
Your first vector should be the vector from the centre to the mouse’s position
e.g. local mouseVec = (Vector3.new(mouse.X, mouse.Y) - centre)
then you will want to dot product the mouseVec with a up vector. Remember to take the unit vectors.
local UpOrDown = mouseVec.Unit:Dot(Vector2.new(0, 1))
if TopOrBottom > 0 – then we are in the top half of the wheel
else – we are in the bottom half
then if we do the same but with the right vector we can then figure out if we are in the top left, top right or bottom left or bottom right.
local LeftOrRight = mouseVec.Unit:Dot(Vector2.new(1, 0))
if LeftOrRight > 0 – then we are in the right side
else – the left side
Then all we have to do is to convert to degrees and decide how much of an angle it should be to trigger. In this case, 360 degrees / 8 segments = 45 degrees, but since the top is already half rotated then
top segment is when the TopOrBottom dot product is within -22.5 and 22.5 degrees
Remember we can convert the dot product to degrees.
You should be able to figure the rest with this.
This is a more complicated way but it is more accurate. Sorry I typed this on the fly so it might be a bit crude.
This is how I did my own wheel thing a few years ago
