How can I prevent UI raycast from going through another Canvas?

Question

I have a two canvas in a Scene and all Canvas are set to Screen Space mode camera render mode. The first Canvas is the main Canvas and has some buttons.The 'order in layer' property is 0.

The 2nd Canvas covers the whole area of the 1st Canvas . When you click some button on the first Canvas,the second Canvas will popup over the first Canvas (order in layer is 1).

The problem is that when I touch over 2nd canvas, the raycast also hit the 1st Canvas. How can I prevent the raycast from hitting the first Canvas while the 2nd Canvas (popup) is displayed on the screen?

Programmer Programmer · Accepted Answer · 2016-07-18T10:13:37

If the second Canvas is a just a popup UI over the first one, you don't need to make it a Canvas. Make it a Panel instead. Select your first Canvas, right click then go to UI->Panel.You can also do this from GameObject->UI->Panel. Just make sure that your first Canvas is selected.

A new UI panel will be created inside the first Canvas. You can rename this to Popup panel then put all the UI components of the popup UI such as Buttons and Texts under the Popup panel. Use popupPanel.SetActive(true); to show the popup Window, and popupPanel.SetActive(false); to hide it.

Just drag the PopupPanel to the popupPanel slot in the script below, then you can use showPopup() and hidePopup() to control the popup panel.

public GameObject popupPanel;

void showPopup()
{
    popupPanel.SetActive(true);
}

void hidePopup()
{
    popupPanel.SetActive(false);
}

EDIT :

Make sure your popup Panel is at end of the canvas in hierarchy to make it render on top of everything else. This is the main idea of blocking interaction with others behind it.

How can I prevent UI raycast from going through another Canvas?

1 Answers