Manipulate ui canvas button hitbox

This should be simple but can’t find it anywhere.
I made a UI button and made the source image my own image. I set it to native size and it looks good but…

58380-untitled-1.png

there seems to be some buffer in between my image and the border that I can’t get rid of. I would want the border to hug the edges, or else the user can press the button without touching it. Any ideas?

Working with the UI can be fun AND frustrating :slight_smile: It will take practice.

But anyway, here is a way to achieve this:

  • In the RectTransform, choose the Anchor Preset for Stretch X&Y (it’s the icon in the lower right corner when you open the Anchor Preset flyout (also the Anchor Preset is the button that has “stretch” and “stretch” next to it
  • Then (and this is important) - edit LEFT, TOP, RIGHT and BOTTOM values, make them all 0 (this will fill out the image to the full size)

Hi,

Make sure your button image is not like this.
58387-1.jpg

In the canvas it will look like this.

58388-2.jpg

So make sure your button image size is cropped till the border of the image. There should not be any transparency.