UI Inverse Mask

Is it currently possible to create an inverse mask with Unity's UI mask component? That is hide everything that is under or overlapping the mask.

 

Poking through the UI source code, I don't think this is possible. Mask.cs is an IMask, and MaskableGraphic.cs appears to uses the IMask interface to alter itself. Unfortunately, I can't find the path where the graphic from Mask is passed as the color mask graphic.

This is a total guess (and hopefully somebody can find more information), but you'd have to make a new "InvertibleMask.cs". It would have an additional public boolean for "Inverted" (which triggers a NotifyMaskStateChanged). The "graphic" property could check the "Inverted" variable and return either an inverted graphic (harder) or an alternate graphic (easier).

 

Not officially, no. However, you might be interested in this post of mine, as well as the post below it (though I have no experience with the latter asset): http://forum.unity3d.com/threads/using-mask-to-cut-a-hole-in-an-image.286489/#post-1893494

 

I don't know of a way to do this. The next best thing is to parent sprites to the UI camera, where you can use the Mask Interaction property on sprites, but that leaves you unable to interact with other true UI elements

 

Very simple and straight forward implementation is to switch stencil operation on the masked object.

Here is a simple script which must be places instead of Image (beneath the mask object)

Code (csharp):

1.  
2. using UnityEngine;
3. using UnityEngine.Rendering;
4. using UnityEngine.UI;
5.  
6. public class InvertedMaskImage : Image {
7.     public override Material materialForRendering
8.     {
9.         get
10.         {
11.             Material result = base.materialForRendering;
12.             result.SetInt("_StencilComp", (int)CompareFunction.NotEqual);
13.             return result;
14.         }
15.     }
16. }
17.  

No any shader code or new materials.

You can check full details and screenshots here http://answers.unity.com/answers/1492803/view.html

 

Thanks a lot @nicloay . Now all my regular UI Images are broken. Do not add this script.

 

LOL its true! all my uI images was broken after that!

 

Images are broken

 

My tests showed that if you create new material based on the base, the problem of breaking Images disappears.

Code (CSharp):

1. using UnityEngine;
2. using UnityEngine.Rendering;
3. using UnityEngine.UI;
4.  
5. public class InvertedMaskImage : Image
6. {
7.     public override Material materialForRendering
8.     {
9.         get
10.         {
11.              Material result = new Material(base.materialForRendering);
12.              result.SetInt("_StencilComp", (int)CompareFunction.NotEqual);
13.              return result;
14.  
15.         }
16.     }
17. }

 

@GladStudio but your code not work for me
And code of @nicloay is broken all

 

Decided to give this a go. And... @nicloay code broke it all

 

Maybe you're using it not correct way? Please show me how you use this component

 

Dont use this code without prior saving, it destroyed everything and I could not recover!

For my scenario, which was sufficient is the following: I wanted to create a "highlight" on certain areas of the screen for a tutorial, making everything else a bit darker. So I created a 512x512 50% transparency black image into which I cut a 64x64 hole. Now I scale this image to make everything darker but the center. Won't work for many scenarios but may be helpful for some

 

Wish I would've scrolled this far before trying it.
Guess there's gotta be a first time for everything.

urgh

 

If anyone can't fix their UI after closing and reopening, try a right click in Assets -> reimport all assets, it did it for me.

Make sure to delete the faulty script.

 

If you use the code above and the game is broken, use the code below to restore it.
Just run it once in the game using the code below.

Code (CSharp):

1. using UnityEngine;
2. using UnityEngine.Rendering;
3. using UnityEngine.UI;
4.  
5. public class InvertedMaskImage : Image {
6.     public override Material materialForRendering
7.     {
8.         get
9.         {
10.             Material result = base.materialForRendering;
11.             result.SetInt("_StencilComp", (int)CompareFunction.Always);
12.             return result;
13.         }
14.     }
15. }

 

This code should work:

Code (CSharp):

1. using UnityEngine;
2. using UnityEngine.Rendering;
3. using UnityEngine.UI;
4.  
5. public class InvertedMaskImage : Image {
6.     public override Material materialForRendering
7.     {
8.         get
9.         {
10.             Material result = Instantiate(base.materialForRendering);
11.             result.SetInt("_StencilComp", (int) CompareFunction.NotEqual);
12.             return result;
13.         }
14.     }
15. }

Original answer:
http://answers.unity.com/answers/1492803/view.html

 

Hello everyone
I found this on Youtube. I tested it in 2019.4.17, 2020.1.2 and 2020.2.1, and it works,with UI totally fine

 

@JavoCL 's video recommendation works for me. Looks like the proper way of doing inverse UI masks

 

Is there a way to create an Inverse MASK instead of inverting the image masked itself?

 

Check out the solution in this repo: https://github.com/mob-sakai/UnmaskForUGUI. The solution there supports also doing multiple inverse masks instead of just one, which seemed to be a limitation for me with other solutions shared before.

 

I got to the script in this thread, used it and it worked as expected. What happened was that it overrides the Image component which you have to delete off of your Masked UI Image since it creates a conflict. I then plugged in the original sprite into the script's exposed fields and that's it. worked as expected.
The orange circle is the UI Image with the mask Component attached. here Im just toggling the Show Mask Graphic check box.
The masked item is a child of the orange circle.

Hope this helps.

 

THIS with the tutorial here solved it for me

 

I managed to implement the solution proposed by @_geo__ here https://answers.unity.com/questions/1243493/invert-ui-mask.html?childToView=1492803 . Easy to do, doesn't involve code, won't break any materials... just be careful to copy **exactly** the values in all fields: it took me 10 minutes to notice that the image to be masked needed to have the Maskable checkbox turned off.

 

Thanks for the maskable comment. Missed to add that. If you look at the ui source then you will see the actual stencil value will be calculated based on the number of maskable components in the parent if maskable = true and forced to 0 otherwise (see the call to MaskUtilities.GetStencilDepth()). Turning it off makes it work but you also loose the ability to stack multiple of them.

I'll add the original response here as unity answers might not be around forever.


If you wonder about the meaning of the stencil values (3 and 6) here are the enums which they are coming from:
Stencil Compare
Stencil Operation

 

This is working. It's important to get a copy of the base material and to now work directly on it, or you'll mess it all up.

Code (CSharp):

1. using System.Collections;
2. using System.Collections.Generic;
3. using UnityEngine;
4. using UnityEngine.UI;
5. using UnityEngine.Rendering;
6.  
7. public class CutoutMaskUI : Image
8. {
9.     public override Material materialForRendering
10.     {
11.         get
12.         {
13.             // get a copy of the base material or you going to F*** up the whole project
14.             Material material = new Material(base.materialForRendering);
15.             material.SetInt("_StencilComp", (int)CompareFunction.NotEqual);
16.             return material;
17.         }
18.     }
19. }

 

There is a handy API (IMaterialModifier) for applying those kinds of changes without the need of a new material instance (Unity will handle the creation it itself internally).

Shameless plug. I have made an Asset which uses this technique and automates all the UI masking setup for you (works in Built-In, HDRP and URP):
https://assetstore.unity.com/packages/tools/gui/inverse-ui-mask-229717?aid=1100lqC54

 

If you did f- up your whole project, just change the compare function to (int)CompareFunction.Equal and then remove it, and add the code that AndreaMar Posted.

 

in unity 2021.3.6f1 UnityEngine.UI was updated, so if image maskable value not updated then
stencil value is not update.

this is help to me:

Code (CSharp):

1.  
2. protected override void Start()
3. {
4.     base.Start();
5.     StartCoroutine(Fix());
6. }
7.  
8. private IEnumerator Fix()
9. {
10.     yield return null;
11.     maskable = !maskable;
12. }
13.  
14.  

 

I'm using the same CutoutMaskUI for screen transitions, and when I started using async scene loading, CutoutMaskUI just didn't render anything. I applied @styrbo's suggestion, but it didn't work either; so I tried instead to turn maskable off and on. And it worked!
I'm using Unity 2022.3.10f1.
So this is what I added to the original CutoutMaskUI to make it work in async loading scenes:

Code (CSharp):

1. protected override void Start()
2. {
3.     base.Start();
4.     StartCoroutine(Fix());
5. }
6.  
7. /// Fix for async loading scenes
8. private IEnumerator Fix()
9. {
10.     yield return null;
11.     maskable = false;
12.     maskable = true;
13. }