Nikschrad9
Nikschrad9

Reputation: 1

When using an image as a button how can I ignore the transparent parts when detecting a click

I'm creating a 2d game with my brother in Unity and I am working on the interactive map (Using pixel art). I want to place different territory images together like puzzle pieces, but when it detects a click on a territory I don't want the transparent parts of the image to be detected.

I am a beginner and need some help with this. Any help is appreciated.

Example of the map and overlap. Example of the map and overlap.

Upvotes: 0

Views: 4559

Answers (2)

b.galerani
b.galerani

Reputation: 121

Maybe you can use Image.alphaHitTestMinimumThreshold.

As said in Unity Documentation:

The alpha threshold specifies the minimum alpha a pixel must have for the event to considered a "hit" on the Image.

So you just got to add a script that changes this property for the images you want to ignore the click in transparent parts. It could be something like:

public Image image;

void Start()
{
    //Any desired value between 0 and 1.
    image.alphaHitTestMinimumThreshold = 0.5f;
}

Upvotes: 4

MTLaurentys
MTLaurentys

Reputation: 221

When you click a box and it is selected, the sprite (visual part of the box) does not matter. It all relies on the algorithm that "connects" the mouse and the game. It is more simple than it sounds.

As you use unity you will rarely deal with that algorithm but you have to understand it in order to implement your own code. The way it works is (probably - but always depends on your implementation) is that your "territory" has a "collision" component. At that component you selected it can interact with the mouse and then you implemented that interaction.

At this point if you do not do anything special, every part of the collision shape will trigger the same effect. That makes sense. So, now, to solve your issue...

  1. You have to find a way (an algorithm) to detect only given parts of the collision shape and complete the interaction if the mouse is in those parts.

OR

  1. You have to fix your collision shape so that it matches the actual "image". That means using a polygon with several vertices and manually matching it with your sprite.

You can do either one depending on the situation. As exercise do number 1 this time (also, as the borders are chaotic). It is NOT hard. Think with me, if every transparent area has the same "Color", if you can check which pixel of the image was clicked, then you just need to know what is the color at that point. You can try for different solutions as well.

A bonus is to make is work if the actual "image" has a transparent area.

Upvotes: 0

Related Questions