Overlapping 3D World Space Canvases

I have multiple World-Space Canvases set up.
Why does the mouse click propagate to the button on the lower canvas, even if the mouse is currently hovering over the upper canvas? Why does it only happen when the mouse is not over the button on the upper canvas?
2748463--198185--Screenshot from 2016-08-11 13-19-27.png

I have tried adding Canvas Groups with “Block Raycasts” active, but no luck. Note that the background in each canvas is a game object with an image on it which has “Raycast Target” active.

Example Project attached below.

How do I get the “window” which is closer to the camera to block the “window” which is further away?

P.S. This video shows a few ways of achieving what I want. However, they all seem to involve changing things for every event type individually. Is there a way to just not receive any mouse events at all, if another canvas blocks the mouse?
P.P.S. Using Unity 5.3.6f1 on Linux.

2748463–199264–UICanvasTest.zip (501 KB)

Sorry, I noticed the Scene was missing in the example project. Updated download link above.

Can no one tell me how to prevent the click from propagating to the second world-space canvas? I’ve tried canvas groups, tried making the background of the first canvas react to events, but still the button on the second canvas gets activated when my mouse is over the first canvas.

This must be a common problem? But searching the internet for a solution only comes up with results which teach you how to not interact with clicks in your own gameobjects (i.e. units in a strategy game) when the mouse is over the UI. But since it’s just a standard UI Canvas and Button, there must be a way to achieve this with the standard UI Event system?

If you set the top Canvas sorting order in layer to something different, like 1, seems to block it then…
no idea whats happening though.

The following was done on Unity 5.40f3 Personal. I couldn’t reproduce your double button push bug, but I did find a glaring bug in the Canvas Sort Order system (that might actually be your bug).

I created a simple Scene with the follow:
Normal Screen Overlay Canvas with the following Children:
World Overlay Canvas with 1 button child
Second World Overlay Canvas with 1 button child
Button child of Main canvas.
I gave all the buttons Unique names in the editor.

I hooked all their Onclicks to a simple Script that just Debug.Log(gameObject.name + “Got Pushed”);
When I pressed various buttons, it always worked correctly (One button pushed and I got the correct Debug Message).
However, when I checked Override sorting on the 2 Canvas, and set them to various values interesting things happened.
(Note the main canvas and this its button, always acts as if its sort order was 0).

If I set the sort Order variable to be in the same order as they were in the heirarchy, everything worked as normal, as expected. But If I set the first canvas sort order to a high number things broke (Normally the first canvas is drawn first so its “in the back”. with a high sort order number its drawn last so its in the front). The Unity Editor showed them being drawn correctly with the high sort order button being drawn on top… HOWEVER, actually running the game caused them to still be drawn in Hierarchical order. But the event system correctly saw them drawn in sort order, so would push a button that looked “behind” a front button. Even though this was the correct button to push. Its the graphic system thats messing up. This was reproduced in both the play function of the edtior and deploying the scene using build and run.

So are you sure you getting 2 button clicks ,and not just getting a “Back Button” being pushed thats really a front button because of sort order. Either way this seems like a huge bug in their sorting system. Its easily reproducible with just 2 world canvas with 2 child buttons.

That is funny.

Seems like @mgear is right.

When you have 2 world space Canvas objects, Canvas1 first in hierarchy, then Canvas2 below it, they will render as expected.

  1. Both have their “Order in Layer” in Canvas component set to 0 by default, they will render in order based on hierarchy, but Canvas2 bg panel won’t block clicks to Canvas1, you can see this when you hover over default buttons on Canvas1.

Seems like having CanvasGroup with “block raycasts” here doesn’t seem to make any difference either.

So, just make the top canvas have higher “Order in Layer”, have bg panels have “Raycast Target” on and it should work fine.

Sorting layers seem to do the same.

Unity 2019.2.4f1, Just tried these steps exactly and I still am clicking buttons behind the foreground canvas… nothing is working.

i tested that example scene in 2019.2.15f1, using windows, works fine (cannot click through canvas)

5356353--541320--uicanvas.gif

That’s very excellent news!

I wonder has something changed between 2019.2.4f1 to 2019.2.15f1 that now makes this possible?

I can try to update my runtime again and cross fingers hope that multi-canvas layouts can properly mask UI raycasts.