Trigger button events only when mouse is over image

[Leux022]

I have a custom button image that is designed to scale like a ninepatchrect, but it has rounded corners so the rect of the button goes past the ninepatchrect image area.

The control and button events (mouse_entered/exited, button_down/up) still trigger in the area the image doesn't cover.
I tried using a click mask but because the button image scales up as a ninepatchrect and the bitmask can only scale up like a normal image, not like a ninepatchrect, the bitmask doesn't match the image.

I'm not if there is actually a way to do what I am trying to as of now, but I looked/asked around and couldn't find anything.

[Mickeon]

I tried using a click mask but because the button image scales up as a ninepatchrect and the bitmask can only scale up like a normal image, not like a ninepatchrect, the bitmask doesn't match the image.

This sounds like unintended behavior, may be a bug.

[Calinou]

I'd argue not having a click mask is better from an usability perspective in your particular case, as it's very unlikely you will have another clickable element within the corner of that button. If anything, there should be a greater margin around it for touch events. But I digress 🙂

In general, buttons should have slightly larger clickable areas than their visual representation to have a good experience on a touchscreen. This isn't as relevant for desktops, but on mobile, missed taps are generally more of an annoyance than accidentally hitting a button.

[Leux022]

That's a fair point, I guess I'll probably just stick with it. I guess I was really set on doing it the way I initially thought.