3

Hi I am trying to create custom buttons on unity (trapeziums). I successfully created the visible area on Photoshop and imported it as Sprite 2D UI as per the following image:

enter image description here

The issue arises, when I'm trying to select one of the buttons in game, their border overlap each other, since the transparent area is still being considered as part of the clickable button area. How can I remove this?

enter image description here

EDIT:

Practically when I import I want the squared boxes to not be counted with the image. I need the edges of the orange area to be cut flush with that and not the entire area(i.e. including the transparent boxes).

enter image description here

David Vella
  • 73
  • 2
  • 7

2 Answers2

9

You may achieve this by using Alpha Hit Test Minimum Threshold. Take a look at this nice video tutorial.

There is one extra step that is not shown in the video but mentioned in the comments: you have to change "Mesh Type" to "Full Rect" and not "Tight" as it is.

Hope that helps.

Ruzihm
  • 19,749
  • 5
  • 36
  • 48
Onurcan Onder
  • 496
  • 2
  • 6
0

The clickable area is based on the Rect Transform component of the GameObject. Adjust the width and height to the clickable area you want. You may have to crop your image in photoshop accordingly. If you select 'Gizmos' in the editor you can toggle viewing the click region.

enter image description here

vasmos
  • 2,472
  • 1
  • 10
  • 21
  • yes indeed, but I want this to be cut exactly flush, since my images aren't square they have slanting edges. See my edit for reference. Is there a way to not take into consideration the transparent area? The image is imported as .psd – David Vella May 05 '20 at 07:55