Detect click only on not transparent part of button

Question

How do I detect click on button that don't have rectangle graphics?
Let's say my button looks like upside-down L:
alt text

I want button to activate only when pointer is over green part of image and ignore transparent part in lower right corner.

I looked up and found this guy with same problem here, so I tried using "Image.alphaHitTestMinimumThreshold" (which sounds like perfect solution for my problem) but it seems that it no longer works ('Image' does not contain a definition for it).
So... how do I do it?

Answer 1

Answer by ray2yar · Dec 28, 2018 at 04:14 PM

You could get the localRect coordinate and change that to a percentage and use the percentage to get the pixel color in the texture. Just make sure the texture is read/write enabled. The code below will do it... I think... might need to play with the x and y positions a little. And definitely will need to set the pivot point to the bottom left corner (0,0).

     public RectTransform but;
     public Texture2D tex;
     
     public void OnButtonPressed()
     {
         Vector2 pos = new Vector2();
         Vector2 mouse = EventSystem.current.currentInputModule.input.mousePosition;
         RectTransformUtility.ScreenPointToLocalPointInRectangle(but,mouse , null, out pos);
 
         float px = pos.x / but.rect.width;
         float py = pos.y / but.rect.height;
 
         float tx = px * tex.width;
         float ty = py * tex.height;
 
         Color col = tex.GetPixel((int)tx, (int)ty);
     }

Add comment · Show 2 · Share

ray2yar · Dec 28, 2018 at 04:19 PM 0

Share

But, in short you can't prevent the event system from tripping on transparent pixels, you can however detect the color of the pixel and then execute a function if the color meets your criteria.

Eldiarc · Dec 29, 2018 at 03:49 PM 0

Share

It's really disappointing that Unity doesn't have function like that. One button in inspector "Ignore transparency" would solve all problems. Oh well.

Answer 2

Answer by Chethan007 · Apr 11, 2021 at 11:52 AM

Even I was facing the same problem and figured out a solution for this:

1)For the button or the Image you are keen about uncheck RayCast Target

2)Add another button which will cover exactly that portion of the area where you want you click to be happening

3)Make it a child of the 1st Button

4)In the inspector pannel ,under color make sure that value of A=0 to make it transparent

5)Now whatever onClick operation you want to perform do it there,

Add comment · Show 1 · Share

MenimalsEntertainment · Apr 13, 2021 at 10:01 PM 0

Share

I did the same thing and it worked for me. Due to the unique shape of the button, you could even do 2 other buttons. If you're using the default code for the button where it changes color and stuff, make sure to put the target image as the one you want to change.

Detect click only on not transparent part of button

2 Replies

Your answer

Follow this Question

Related Questions