I want to achieve a hover affect however, I do not want it to fire an event when I hover even over the transparent background of the image.
Here is a video going into more depth of what I mean;
I have tried to add individual frames that were kind of like “hitboxes” for the hover event, this worked however it seems very unoptimised. I thank everyone for their response. I am mainly looking for ideas or anyone who knows how to actually achieve this since I am out of ideas. Thanks, all.
For something like this I would not use ImageButton/TextButton.
It’s better to use a formula to check.
For example, you can get the delta between the mouse and the center of the circle, then use it to figure out which section it’s in.
local delta = mousePosition - uiCenter :: Vector2
local radius = delta.Magnitude
if radius > 20 and radius < 60 then -- allows selection only if your mouse is within the ring
-- ANGLE METHOD: you can check for angle of the delta to see which option is picked
local angle = math.atan2(delta.Y, delta.X)
if angle <= math.pi/4 and angle >= -math.pi/4 then
-- one side is selected
end
-- DISTANCE METHOD: you can alternatively check for distance to the button
local closest = nil
local closestDistance = math.huge
for _,button in buttonList:GetChildren() do
local distance = (mousePosition - button.AbsolutePosition).Magnitude
if not closest or distance < closestDistance then
closest = button
closestDistance = distance
end
end
if closest then
-- select button
end
end
I used the angle method for my games. Controller inputs already give the delta.
I will try this and let you know how it goes, I appreciate this a lot!
I can not quite get this to work besides using the distance method. However, with the distance method it bugs out besides for 2 and 3 (right frame and bottom frame). I am trying to go the angle route but I can not even get it to print the angle or anything.
Below this I attached a iamge with the radius I am using, I call it “Filler.”
Here is my code;
runService.Heartbeat:Connect(function()
local delta = Vector2.new(mouse.Hit.Position.X, mouse.Hit.Position.Y) - fourEmoteSelection.Filler.AbsolutePosition :: Vector2
local radius = delta.Magnitude
if radius > 190 and radius < 540 then
local angle = math.atan2(delta.Y, delta.X)
if angle <= math.pi/4 and angle >= -math.pi/4 then
print(angle)
end
end
end)
Mouse.Hit is for the 3D CFrame of the mouse, essentially the position of a raycast. Use UserInputService:GetMouseLocation() instead, to get the actual position of the mouse on the screen, as a Vector2.
Changing how I look at the mouse position unfortunately didn’t solve my issue of the angles sometimes not picking up. I am not quite sure how to explain this, I will post a video instead.
Here is the complete code again;
runService.Heartbeat:Connect(function()
local mouseLocation = game:GetService("UserInputService"):GetMouseLocation()
local delta = mouseLocation - fourEmoteSelection.Filler.AbsolutePosition :: Vector2
local radius = delta.Magnitude
if radius > 165 and radius < 430 then
local angle = math.atan2(delta.Y, delta.X)
if angle <= math.pi/4 and angle >= -math.pi/4 then
print(angle)
end
end
end)
Make sure your “fourEmoteSelectionFiller” has its position set correctly.
If should be in the center of the ring with AnchorPoint 0.5, 0.5, otherwise you might be getting the position of a corner and not at the center.
I tried this, still getting the same result.
Print out delta and see if it’s correct.
You should see something like -200, 0 (in that general direction) if your mouse is on the left of the circle
200, 0 if on the right of the circle, 0, -200 at the top, 0, 200 at the bottom.
If it’s not correct then you’re not getting the correct values and you need to figure out if the fourEmoteSelection.Filler.AbsolutePosition is at the center of the screen or not. The return value should be roughly half of your screen size.
