Problem with imposing UI Images

Hey, I stumbled upon a problem I can't see to resolve in an easy way.To be short, I have a map of a city made of districts. Every district is an Image object. I want every district to be interactable (mouse click, touch) and I achieved it by event triggers, but when the districts are close to each other they seem to impose everything around. Is there a way to make RectTransform to be in shape of actual sprite used in Image?


On the screen we can see districts(blue shapes) and all of RectTransforms of it which imposes each other. How can I work around this?

 

I would use one image and multiple Polygon Collider 2D.
Or multiple images, multiple colliders and then you can highlight the selection and whatnot if you somehow keep the reference from the collider to the individual image.

 

That's a good idea, I tried something similiar to what you suggested but the RectTransform raycasted badly anyway (maybe i f'ed up something). I worked around this by making a map with GameObjects,not as UI elements.

 

I had also stumbled upon this problem before. I solved it by googling and found the answer on Unity Answers.
If we want the sprite to be only clickable where the alpha is 1, we have to tweak the Import Settings of that sprite. In the Advanced section, we have to check "Alpha Is Transparency" and "Read/Write Enabled". And then in one of the scripts, we have to add this line of code to change the "alphaHitTestMinimumThreshold" of that Image component:

Code (CSharp):

1. GetComponent<Image>().alphaHitTestMinimumThreshold = 0.5f;