Invert/Reverse UI Mask

Questions & Answers
1

Hi Guys,
Does anyone know a way to invert a UI mask? I have some text which I’m actually using as a mask to make part of an image see-through. However, it’s only showing the image where the text is and I would like the text to be the part of the image that’s going transparent. In other words, I want to have a button that has text on it that reveals the background. Does anyone know anyway to do this?
Thanks!

5

You can do this without writing any shaders or downloading any code. I am doing this in Unity 5.6 but I’m not using any new features to do so.

I was using UIMask to do the mask previously and noticed it was setting some values on the material to do the work. Seeing this, it is easy to create your own version and tweak from there.

Use whatever UI shader you want, I used UI/Default. The material values I used as follows:

---- Mask Material

Tint Color                  (255,255,255,1) //using alpha of 1 gives crispest edge
Stencil Comparison          8
Stencil ID                  1
Stencil Operation           2
Stencil Write Mask          255
Stencil Read Mask           255
Color Mask                  0 // use 15 if you want to see the mask graphic (0 vs RGB 1110)
Use Alpha Clip              True // toggles if the graphic affects the mask, or just the geometry

---- Masked Material

Tint Color                  (255,255,255,255) // not important
Stencil Comparison          3
Stencil ID                  2 // default Unity mask has 1 here. this is the swap. I think it's GEqual => Less
Stencil Operation           0
Stencil Write Mask          0
Stencil Read Mask           1
Color Mask                  15
Use Alpha Clip              False

You can find info about the stencil buffer here - Unity - Manual: ShaderLab command: Stencil

3

Some simple instructions on how to use (as FoxPT said):

  1. Download shaders from the provided link
  2. Put them into your project (anywhere would do, but keep in mind your own project hierarchy)
  3. Notice that there are two shaders (UIMask and UIMasked). You need to create two materials (i.e. ReverseMask and ReverseMasked).
  4. Create a new material (ReverseMask) and under “Shader” drop-down menu, select “IndieYP->UIMask”. As it’s texture, put the texture that you want to be the mask (in my case it was a circle, because I wanted the make a “hole” in the black background).
  5. Create a new material (ReverseMaked) and under “Shader” drop-down menu, select “IndieYP->UIMasked”. Set the color of you material (in my case, black).
  6. Now you need to assign the materials to your game objects. ReverseMasked goes to the game object that you want to mask (in my case, panel that’s serving as a background). ReverseMask goes to game object that’s going to do the masking, in my case, image that’s set as a child of the mentioned panel (this is very important).
  7. Also, set the same texture (that you used for ReverseMask) as a source image for Image game object.

And there you have ti! :slight_smile:

And go to GitHub, and star the guy, this is a big help.

2

Unity 5.0 UI Reverse Mask

4

Doesn’t seem to work in 5.4