How to make Ui elements to be hidden if out of panel bounds

Questions & Answers
1

Hi! I’m making a little heli game where you can choose missions. I’ve set up a completly transparent panel with couple of semi-transparent buttons and semi-transparent panel that consists of scrollbar (horizontal and vertical). This panel is used in chosing mission and the scrollbar acts as a map. The problem is that everything is pouring out of that panel.

Provided in the link is an image of what I need. Imgur: The magic of the Internet

Elements 1 and 2 are children of scrollbar which, in turn, is a child element of a panel. How can I disable and hide element number 2 once outside of panel border? Bonus: Is it possible for panel not to be rectangle shape?

One more question: If i had 2 Canvases with panels that had semi transparent pictures, how can i make it so that one panel/picture is not displayed? I tried with sorting layers but you could still see the other picture. P.S. Do this without disabling objects.

Thanks in advance for your help. English is not my first language so if you don’t understans something ask me, I’ll try to explain as best as i can.

3

If I’m not completely mistaken, I think what is needed here, is not a mask component, but a “Rect Mask 2D”.

2

@elferin I have had the same problem for a bit, the solution was very simple: add a mask component to the panel. Easy as that.

4

Use Rect Mask 2D for the purppose. To do this, Select GameObject in Hierarchy → Click Add Component in the Inspector → Select UI → Select Rect Mask 2D. If Rect Mask 2D Checkbox is selected, Child Components of the selected GameObject will be masked i.e. they will not be visible outside parent GameObject (current GameObject).