UI Image not blocking raycast

Question

I just upgraded to Unity 5.2.1p4 and I am having some issues with the UI.

My parent object has an image, a button and its child object has an image. When I click on the child object, it doesn't block the Raycast and the parent button (behind it) gets the click. I thought Images are supposed to block Raycasts. I even tried using a Canvas Group and setting its "Block Raycasts" to true, with no success.

The only way I found to prevent the raycast propagation was adding an empty, non-interactable button to the child object, which I think is too much.

Am I missing something or did something change on the last updates?

EDIT: There is an example project (about 30Kb): http://www48.zippyshare.com/v/noIQmtnX/file.html Clicking on the black square triggers the white button. The only way to make the black square blocking the raycast is by adding an empty button to it.

Answer 1

Answer by meat5000 · Oct 21, 2015 at 04:20 PM

Looking at your project it appears that by default UI elements are non-interactable. This is why a button appears to fool it.

Try adding "UI->Selectable" to your Child object and setting it to not react on click. This makes it block just fine.

EDIT: It seems there are multiple things that should perform this task and many things that suggest that what you observe is default behaviour.

Take this for example:

http://docs.unity3d.com/ScriptReference/ICanvasRaycastFilter.html

and this

http://docs.unity3d.com/ScriptReference/UI.MaskableGraphic.html

Both of which suggest that blocking a raycast is a scripted affair.

Add comment · Show 15 · Share

Matheuz · Oct 21, 2015 at 04:53 PM 0

Share

I posted a comment here about 20 $$anonymous$$utes ago but apparently it was moved to moderation. By myself?

"$$anonymous$$atheuz moved the comment "UI Image not blocking raycast" to moderation".

meat5000 ♦ Matheuz · Oct 21, 2015 at 05:31 PM 1

Share

Lol you are experiencing a Site bug at the moment. Ill fish it out.

Matheuz · Oct 21, 2015 at 05:15 PM 0

Share

Happened again, I give up about UA. Going to the forums: http://forum.unity3d.com/threads/5-2-1p4-image-not-blocking-click.362650/

npatch Matheuz · Oct 21, 2015 at 05:34 PM 1

Share

Selectable works but it seems to me to be a bug. This shouldn't work like this. If you unparent the child image...as it is...just unparent it and make sure the child image is below the parent image(As you add children UI elements to the same depth under a parent, the latter will be rendered last,so if the child image is listed after the parent image then it's rendered last), it works without CanvasGroups and without anything else.Just the images and the button. In fact in that kind of hierarchy no matter if Raycast Target is checked or unchecked, the button is hidden. The problem is with the parenting. Somehow this affects things. Unless I'm missing sth or have misunderstood sth in the documentation this feels like a bug in the engine.

There's another roundabout way of doing this, create a different canvas with a different sort order for the layer or plane distance depending on the type of canvas you want. Depends on what you want to do with the image on top of the button.

Matheuz npatch · Oct 21, 2015 at 05:40 PM 0

Share

I'm glad I'm not the only one that thinks it's a bug. The button workaround does it by now, but I was just wondering if they noticed this yet. They just released 5.2.2 but I'm not sure if it fixes it, since I didn't see anything on the release notes that wasn't on p4. Thanks for the help, I'll wait and see.

Show more comments

Matheuz · Oct 21, 2015 at 05:32 PM 0

Share

Well, UIButtons are UISelectables (source), so it's not that different. $$anonymous$$y question is: shouldn't images block raycasts regardless of it has a Button (or Selectable) or not?

I mean, isn't it what all of these are about?

http://answers.unity3d.com/questions/830371/ui-46-image-blocks-mouse-click.html

http://answers.unity3d.com/questions/816861/46-ui-image-is-capturing-clicks-how-to-prevent.html

http://answers.unity3d.com/questions/822273/how-to-prevent-raycast-when-clicking-46-ui.html

meat5000 ♦ Matheuz · Oct 21, 2015 at 05:59 PM 0

Share

I added a link to my answer. Its very curious.

Note that your black image has no texture in it.

npatch meat5000 ♦ · Oct 21, 2015 at 06:02 PM 0

Share

It is curious indeed. But then why does it work when the same Image with no sprite is unparented and placed in a higher child index? It's the same thing just not parented.

By that logic, the event should have fallen back to the button ins$$anonymous$$d of being blocked.

Show more comments

Matheuz · Oct 21, 2015 at 06:03 PM 0

Share

I set a sprite (default UISprite) to both of my images and the alpha is 100%. Still happens.

meat5000 ♦ Matheuz · Oct 21, 2015 at 06:39 PM -1

Share

Yeah that value seems useless :D Ah well sorry, I tried.

I found a few more things in the docs that could give some insight.

Answer 2

Answer by npatch · Oct 21, 2015 at 12:01 PM

If I'm not mistaken, There's a Raycast Target checkbox in Image. Try unchecking that box in the parent Image to avoid blocking the raycasts, since that one is probably first to get raycasted as you navigate to the children in the view.

Add comment · Show 2 · Share

Matheuz · Oct 21, 2015 at 03:48 PM 0

Share

Thanks for the suggestion, but it didn't work at all. I will try to post an example project here.

Matheuz · Oct 21, 2015 at 03:56 PM 0

Share

Here is the example project (about 30$$anonymous$$b): http://www48.zippyshare.com/upload Clicking on the black square triggers the white button. The only way to make the black square blocking the raycast is by adding an empty button to it.

Answer 3

Answer by IsouEU · Mar 09 at 09:02 PM

and if the problem occurs in a button ? I have a click walk script and it is stupidly activated every time a UI button is clicked, the only way I found was to deactivate and activate the script, inside the button script.. which is stupid, the problem is that now I have a visual element (scoreboard with scroll) that does not have an on-click script, making it impossible for me to use my solution...

Add comment · Share

UI Image not blocking raycast

3 Replies

Your answer

Follow this Question

Related Questions