How to Create a Blocking Mask in Unity using Image Components?

Unity Engine
1

I’m designing a tutorial for a Unity game and am stuck at what seems like a trivial problem. For every step in the tutorial, I guide the user by hiding everything on the screen except the buttons they need to press. My game hierarchy looks like this.

Button Canvas
Select_Me_Button
Dont_Select_Me_Button
Tutorial Canvas
Mask Group 1
Left Border Mask
Right Border Mask
Up Border Mask
Down Border Mask
Mask Group 2 ...

The TutorialCanvas GameObject has a Canvas component with a higher sorting order than ButtonCanvas. I added GraphicRaycaster Component with Blocking Mask set to everything and Blocking Objects set to None for the TutorialCanvas. However, even though TutorialCanvas renders on top of Button Canvas, I am still able to click through the mask and trigger buttons that are not supposed to be clickable. I was able to block clicks by adding image components functioning as masks to parent objects Mask Group 1 and Mask Group 2 belonging to TutorialCanvas, but this is not desirable, because I need to group the image components to create a mask, and gameobject can only accept 1 image component.

I’m having a hard time imagining this is so hard. I just need one canvas with a mask to block clicks going to a canvas behind it.

6854033--798464--Screen Shot 2021-02-18 at 9.48.19 PM.png
6854033--798464--Screen Shot 2021-02-18 at 9.48.19 PM.png1338×598 63.8 KB

2

I would just make one masker out of four images the way you are doing, and then move those parts around at runtime so they only block a given RectTransform on screen.

You can use the RectTransformUtility to get pertinent accurate information to move one Rect up to another, etc. That way this blocking thing can be disabled/enabled in code, driven in code to reveal any arbitrary rectangle, and then hidden when you no longer need it. I would also just leave it in the same canvas, perhaps underneath a GameObject called “Tutorial mask” or something.

1 Like