Hit Padding visualization

Is there an easy way to visualize the hit padding area and position of a button? Right now I just keep testing until I get a hit box that I want. How can I position a white image with the position and scale of the hit box of a button, so I can visualize it in the editor? Do I need to take into account the pivot of the button and/or something else?

Hi @Marks! If I’m correct, the hit box of a button component is the same size as the width and height of the element component. So if you want to visual this, you can use a background color for this element component.

It’s not. I can tap more easily on the android than on the iPhone. Also, how does it work exactly? There are 4 values. How does the hit box change from [0, 0, 0, 0] to [1, 1, 1, 1], or [50, 50, 50, 50] for example. What’s the origin point? And why 4 values? Would make more sense if it was just 2, for width and height, since buttons are 2D elements…

Are you talking about the settings of the element component? I suggest to use an image element and use a background color to see the result of your settings.

Talking about visualizing this


I see, so that setting does not effect for example the image of the button component itself?

Nope. The image of the button doesn’t change or anything. There isn’t a red debug square for the hitbox on the editor or something like that. That’s why I want to know exactly how this works. Maybe I should make a feature request also?

I’m also not sure how this works, so I’m afraid we’ll have to wait for another reply.

Definitely a feature request.

For the short term, I would keep the launch tab open and tweak the Hit Padding until it looks/feels right.