How to create highlight area?

[Tetromiko]

I want to create an FTUE for a project I'm working on, and a highlight area is part of it. The area consists of two parts: a full-screen shadow that covers all UI elements and a light spot that can move to any position. How can I implement the logic so that the shadow blocks all interactions with the UI, while the light spot allows interactions with the interface?

[mob-sakai]

Tell me about your develop/build environment.

• version [e.g. 3.0.0]
• Platform: [e.g. Editor(Windows/Mac), Standalone(Windows/Mac), iOS, Android, WebGL]
• Unity version: [e.g. 2022.2.0f1]
• Build options: [e.g. IL2CPP, .Net 4.x, URP/HDRP]

Could you please attach a minimal project (included Assets, Packages and ProjectSettings directories) that reproduces the issue?
Of course, you don't need to include any secret assets from your project. Feel free to use free assets instead.

[Tetromiko]

There is nothing to share. I'm creating this logic in a separate clean project on version 2021.3.33f for Android. It is not an issue; I'm just asking if it is possible to achieve my goal, and if the answer is yes, how can I make it?

[mob-sakai]

Okay.
That is a common question I ask, and sharing prerequisites is important for providing accurate responses.
For instance, depending on your environment or implementation method, a different approach might be more appropriate.

• Are the button and the black screen on the same canvas?
• Is the canvas RenderMode set to ScreenSpaceOverlay or ScreenSpaceCamera?
• What is the clip shape: rectangular, circular, or star-shaped?
• Does the clip shape require softness?

This time, I respond assuming a general case:

• Use a tutorial-specific canvas (ScreenSpaceOverlay).
• The clip shape is rectangular (non-softness).

---

See "Sample: Tutorial Button" in the demo scene.
The button underneath the black screen is not interactable, but the part clipped by MaskingShape component (subtractive method) is interactable.

---

TutorialSample.unity.zip

This scene is a simplified version of the tutorial, containing 2 buttons and a black screen.

The clipping area is defined by "MaskingShape - Subtract" and follows the button using the RectTransformFitter component.

Additional Notes:

• Ensure that the Sort Order or Order in Layer of the TutorialCanvas is set so it appears in front of the MainCanvas.
• Set the RenderMode of both MainCanvas and TutorialCanvas to be the same.

[Tetromiko]

Are the button and the black screen on the same canvas? - Yes
Is the canvas RenderMode set to ScreenSpaceOverlay or ScreenSpaceCamera? - ScreenSpaceOverlay
What is the clip shape: rectangular, circular, or star-shaped? - It is a image with blured circle
Does the clip shape require softness? - Yes

[mob-sakai]

Well, could you tell me what the remaining issue is?
Is it that the button and clip are misaligned?
Or is it that the button is not clickable?

Can you submit a minimal project, scene, or prefab?
Images, assets, or scripts that cannot be submitted are not necessary.

[Tetromiko]

The screen is completely covered with a shadow, but there is one area where the shadow is “removed” using the Subtract mask. In the shaded area, clicks should be blocked, and in the lightened area, they should be allowed. It's important that this highlighted area can move freely on the screen. Is this functionality supported by the library? If so, how can I implement it correctly?

[Tetromiko]

We have a Canvas containing some buttons. On the same Canvas, there is a Mask with two children: a shadow mask in "Add" mode and a light spot in "Subtract" mode. When I try to click on the subtracted area, the buttons underneath are not responsive, as if the Mask is intercepting the input.

[mob-sakai]

I cannot guess which components are attached to which objects.

For accuracy in the response, please compress the prefab into a zip file and attach it as a comment.
There’s no need to include images or other assets.

Additionally, as a helpful tip, the EventSystem inspector can show which object the raycast hit.
This is also a crucial piece of information.

---

Now, I noticed that the SoftMask component is blocking raycasts for the MaskingShape (Subtract) component.
This is a bug and will be fixed ASAP. 👍

[mob-sakai]

🎉 This issue has been resolved in version 3.1.2 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

[Tetromiko]

Thank you, you are doing a great job, But when it will be possible to download through git link?