Keep a UI.Image from blocking Clicks?

I figure this has been asked before, but my googling has not found an answer. I have a border for a menu screen with a large transparent area in the middle. The border has elements that I want to show on top of the menu elements.

However, the border – being transparent even – blocks any clicks on the menu.

Is there a way to show the image on top without having it block any clicks? I see the “intractable” boolean for other UI elements, but not for UI.Image.

Thanks!

I made a thread about a similar problem a little earlier, so we’re in the same boat! :frowning:

I really hope there’s a solution/workaround for this! It’d be nice if each UI element had a checkbox to tell it whether or not to receive mouse input.

1 Like

Update:
I was just given the solution by one of Unity’s developers.

To keep any UI canvas or element from blocking clicks or registering mouse input, simply give that canvas or element a Canvas Group component (Add Component->Layout->Canvas Group), then turn off Blocks Raycasts.

15 Likes

Cheers I have been having an issue with putting a little pointer image over a scrollview a and the whole scrollview suddenly became as dead as a certain salty sea…

Chubzdoomer post works. Thanks.

Guys, you can simply uncheck “Raycast Target” on any Graphic (which includes Image).

2 Likes

This is what I tried initially, and it didn’t work. In my case, I have a group of images in an empty container which follows the cursor within a given bounding RectTransform. I had all of those images with that “Raycast Target” toggle off, but they still blocked the mouse pointer raycasting and clicks…

In my case, none of the mentioned solutions have worked yet. The objects that should be reacting to the mouse hover (buttons with Animation transitions) are not having their highlighted triggers updated. I have checked that these do work when the cursor follower is not underneath the cursor.

1 Like

After some digging, I discovered my issue. I was detecting when the mouse was inside of the given RectTransform using raycasting via the GraphicRaycaster. As the particular RectTransform in question was a border for a UI panel, underneath which my buttons were contained, the thing actually blocking the mouse raycasts was the UI panel border itself. I had to switch my method of detecting if the mouse position is inside of the panel from raycasting to using a method shown by @The_Mean_Fiddler in this post .

Once the mouse position detection wasn’t using raycasting anymore, everything worked great using just the Raycast Target property on each cursor follower image as @Hosnkobf mentioned. Thanks everyone!

i know this is old post, but thank you very much u saved me

1 Like