koobas.hobune.stream
How to make UI block clicks from triggering things behind it
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.
@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:
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!
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.
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
Create a full screen UI image between your front and back gameobjects. Set the transparency of image to 0.
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).
$$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.
I did what you said: https://fakemelon.tinytake.com/sf/$$anonymous$$jQ1$$anonymous$$zgwNF83NDEwNjc0
Still, clicks go through.
you can use a currentOpenScreen and on button click before performing action just check which screen is currently open.
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
}
@FakeMelon Make sure to check Raycast Target in the image component of your setting menu.
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
