Custom UI Hitbox

Help and Feedback Art Design Support
, ,
#1

  1. What do you want to achieve? Im trying to make a Circle UI Button

  2. What is the issue? The issue im having is that the hitbox of the UI is not a circle so the player can click the button even tho the mouse is outside the circle

  3. What solutions have you tried so far? I have looked a lot for days on everything (devforum, Discord helps, yt videos) but still couldn’t figure out how to make a custom circle hitbox

I think it can be made by some math on the mouse position but im not that good at math.

2 Likes
#2

Try UICorners.

1 Like
#3

I already have a UI circle from an imagelabel.
The issue im having is that that player can press the button even tho the mouse is outside the “circle” imagelabel because of the image button hitbox.

#4

Yeah bro I understood your issue. My suggestion is the same. With or without the image.

#5

The UICorner doesn’t change the hitbox of the UI.
It would be round but gonna have the same issue.

#6

Not possible. Unless your willing to map out individual pixels of said button which is just a headache to do then there is no chance you can achieve it.

#7

can I see the gui element you are working with?

#8

Yeah, but i have seen some roblox games that actually do that, So there is definitely a way

#9

Can you show me a video?

(One way I though is using distance. As we know a circle have a constant radii so if you can just use a loop and see if the mouse is within said radii.)

#10

Not sure if I understand the question correctly, but you could try making a clickable button, then putting your ui elements below that button

Frame

  • Button
  • Ui Elements (under Button)
#11

Yes, i think its possible by some math, but it didn’t work for me although im not sure its right.

#12

Make your own custom text button clicked code. Every time you click the button, check if the distance between the position of the circle and the position of the mouse is less than the radius of the circle. If it is, then you know they clicked

#13

My issue is with the button its self. You see when you select the gui there is a “hitbox” its an outline for the ui and its the button hitbox so when you click anywhere inside it it will trigger the mouse click function.

#14

Alright, imma try it out right now.

#15

Thats exactly what I just said.

#16

Yeah, im going to make my math rn and send it here so you can correct me

#17 
local button = -- path to button
local absolutesize,absoluteposition = button.AbsoluteSize,button.AbsolutePosition
local radii = absolutesizeMagnitude/2
local runservice,userinputservice = game:GetService("RunService"),game:GetService("UserInputService")

runservice.RenderStepped:Connect(function()
   if (userinputservice:GetMouseLocation()-absoluteposition).Magnitude <= radii then
      -- do whatever you want smh.
   end
end)
#18

I think i figured out why was my math wrong. Cuz i used half of the imagebutton X Size as a radius for the circle but its wrong cuz the imagebutton still not a circle. Now i need to know what is exactly the radius of the circle.

#19

See the one I provided above. I havent tested it but would work?

#20

I think it will. I just need to get the radius of the circle now.