How to make UI block clicks from triggering things behind it

Question

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.

Answer 1

Answer by RahulOfTheRamanEffect · Mar 26, 2018 at 03:26 PM

@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:

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:

inspector
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!

hierarchy.png (2.0 kB)

inspector.png (23.1 kB)

Add comment · Show 2 · Share

SimRuJ · Jun 11, 2021 at 09:13 AM 0

Share

Unfortunately this doesn't work anymore in Unity 2021.1.6f1. I want to block access to clickable GameObjects when a menu is up, so I added an additional panel that fills the whole screen as parent for the menu panels. The canvas is at the very bottom of the hierarchy and "Raycast Target" is enabled (by default) for all panels but I can still click through them.

awsapps · Sep 08, 2021 at 11:01 PM 0

Share

YEAH! this is what I was looking for, 100000 thanks! Note that, with this method, the OnClick functions won't be called, but you can continue reading the Input.AnyKeyDown in update components. SimRuj, works for me in 2021.1.11f1. Best regards

Answer 2

Answer by dishant27 · Mar 20, 2018 at 07:03 PM

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

Add comment · Show 12 · Share

FakeMelon · Mar 20, 2018 at 07:15 PM 0

Share

Tried putting the image in 2 ways. The first time it was the child of the settings menu's canvas but it completely disabled the menu's functionality for some reason. nothing worked anymore, no buttons, nothing. The second time I tried to put it under its own canvas, and then move the canvas with the image right behind the settings menu. It didn't work. clicks still triggered buttons behind the settings menu (and the image).

dishant27 FakeMelon · Mar 20, 2018 at 07:21 PM 0

Share

$$anonymous$$ake pop up content of pause, child of this image and make it active with pause button just like you were activating the pop up earlier.

FakeMelon dishant27 · Mar 20, 2018 at 07:28 PM 0

Share

I did what you said: https://fakemelon.tinytake.com/sf/$$anonymous$$jQ1$$anonymous$$zgwNF83NDEwNjc0

Still, clicks go through.

Show more comments

Answer 3

Answer by upasnavig90 · Mar 22, 2018 at 12:17 PM

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

Add comment · Show 2 · Share

FakeMelon · Mar 23, 2018 at 08:27 AM 0

Share

What's currentOpenScreen?

upasnavig90 FakeMelon · Mar 23, 2018 at 01:18 PM 0

Share

just take an enum of all the screens, and set its object to currently opened scene like this:public class Screen$$anonymous$$anager {

 public enum Screentype{
     Login,
     $$anonymous$$enu,
     GameOver,
     Stats,
     CategoryScreen,
     Achievements,
     Settings,
     Store,
     Profile,
     $$anonymous$$erboard,
 }
 public static Screentype currentScreenType;

} and use it like this:

     if (Screen$$anonymous$$anager.currentScreenType == Screen$$anonymous$$anager.Screentype.$$anonymous$$enu) {
                     //TODO:perform your action
                 }

Answer 4

Answer by Khawar-Munir · Mar 22, 2018 at 12:53 PM

alt text @FakeMelon Make sure to check Raycast Target in the image component of your setting menu.

raycast-target.png (9.3 kB)

raycast-target1.png (2.5 kB)

Add comment · Show 1 · Share

FakeMelon · Mar 23, 2018 at 08:28 AM 0

Share

It's checked, rays still go through it.

Answer 5

Answer by Armend · May 21, 2020 at 12:34 AM

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

[1]: /storage/temp/160018-canvsblocker.jpg

canvsblocker.jpg (48.0 kB)

Add comment · Share

How to make UI block clicks from triggering things behind it

7 Replies

Your answer

Follow this Question

Related Questions