How to make UI block clicks from triggering things behind it

Questions & Answers
1

Hey,

So I know this is an old question, but I can’t seem to get the right answer anywhere.
My problem is when I bring up my pause menu, for example, and then from that menu, I’ll go to the settings menu (which in 3D you can see is positioned closer than the pause menu to the camera), I can click on an empty area around the settings menu and it will trigger a button that’s on the pause menu behind it.

In short, I am looking for a way to make a UI block the clicks from going through it, triggering stuff behind it.
Thank you.

5

@FakeMelon

Someone has already given you the answer, but I’ll try and expand on it a bit. This setup is what works for me:

Create a GameObject called “Blocker” between the “Settings Menu” GameObject and the “PauseMenu” GameObject, like so:

113728-hierarchy.png

Note: The Blocker must be placed after the elements in the hierarchy that you wish to “block”.

Now, as for the Blocker, set it up so that it covers the full canvas and add an Image component to it. Set the color as transparent and make sure to tick “Raycast Target”, like so:

113729-inspector.png

I’ve used this in a lot of applications to good effect. Unity draws the UI from bottom to top on the hierarchy, so by this hierarchy setup, Unity will draw the settings menu. Any touches outside the settings menu will be intercepted by the fullscreen “Blocker” that we just set up.

Enable the Blocker GameObject when you open the Settings menu and disable the Blocker when you close it.

(You could also achieve the same effect by just setting “Raycast Target” to true when the settings menu is shown and false when closed).

Hope that helps!

2

Create a full screen UI image between your front and back gameobjects. Set the transparency of image to 0.

3

you can use a currentOpenScreen and on button click before performing action just check which screen is currently open.

4

113500-raycast-target.png

6

I know the question is old, but for those, who found this via google (like myself)

Follow the steps the other people suggested and add the components in the image. Important is the “blocks raycast” checkbox in the canvas group component.

And everybody should know this: https://unity3d.com/how-to/unity-ui-optimization-tips

7

This is the only thing that worked for me:

if(!EventSystem.current.IsPointerOverGameObject())
{
  // my code 
}

Jason explains it here: Unity3D - Avoid / Detect Clicks Through your UI | How to know if your player clicked on UI - YouTube

8

If the accepted answer did not solved it for you it’s because you have to have 2 things for it to work.

1- The Blocking Canvas has to contain a “Graphic Raycaster” component.

2- The Blocking Image has to have “Raycast Target” activated.

The object will only react to touch or click if it has both components, having Raycast target activated makes the “Graphic Raycaster” check it for interaction. They will only work together.

Also make that the Blocking Image is in front of the thing you want to block, when not transparent it should visually block the things behind it.

@SimRuj your problem with Unity 2021 is probably because of that