koobas.hobune.stream
Invert/Reverse UI Mask
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!
I am having a similar problem and as far as I know it's a limitation of the $$anonymous$$ask component, since we're only allowed to mask child object and not the other way around, so I don't think it is possible using just elements from uGUI.
If you eventually get an answer please let me know. Cheers!
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 - https://docs.unity3d.com/Manual/SL-Stencil.html
Thanks for a great solution! Just for clearing up ambiguity: The solution is to NOT use the mask component at all. Ins$$anonymous$$d, do the usual thing you'd do with the mask component: 2 gameobjects with Image components, one the child of the other. The parent that normally has the $$anonymous$$ask component should have the $$anonymous$$ask $$anonymous$$aterial assigned in the Image component rather than having a $$anonymous$$ask component. The child should have the $$anonymous$$asked $$anonymous$$aterial assigned in its Image component.
Yeh you don't need the mask component. All that does as far as I can tell is handle the setting of these values automatically.
I'm not using one to do my effect.
Note, the object with the 2nd material doesn't even have to be a child of the 1st mat, just underneath it in the hierarchy will also work.
Thank you for the thorough explanation, worked perfectly
@glitchers This simple way of doing inverted masks was very helpful! But I also want to display some things on top of the masked element. The only problem is that they are displayed behind the masked element. Do you know I could get these other elements to be displayed correctly? Ty again!
Wow, pure magic! It even works with multiple masks that move separately from each other (which is what I was actually looking for).
Some simple instructions on how to use (as FoxPT said):
Download shaders from the provided link
Put them into your project (anywhere would do, but keep in mind your own project hierarchy)
Notice that there are two shaders (UIMask and UIMasked). You need to create two materials (i.e. ReverseMask and ReverseMasked).
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).
Create a new material (ReverseMaked) and under "Shader" drop-down menu, select "IndieYP->UIMasked". Set the color of you material (in my case, black).
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).
Also, set the same texture (that you used for ReverseMask) as a source image for Image game object.
And there you have ti! :)
And go to GitHub, and star the guy, this is a big help.
I'm also looking at solving this problem. I've followed your steps but it seems to mask EVERYTHING even my camera space UI that is IN FRONT of the mask. Have you come across this problem or would you know how to go about altering the shader to ignore this issue?
Otherwise it seems to be working as I would expect which is a good start :)
@trx88 This works very well except for the fact that the UI$$anonymous$$ask shader renders the image to the front of everything regardless of the hierarchy order.
Is there any way around this?
This no longer appears to work as intended in recent updates to Unity.
See this answer for a solution for Unity 5.6: http://answers.unity3d.com/answers/1348829/view.html
Unity 5.0 UI Reverse Mask https://github.com/slavaobninsk/UIMask
Thanks for sharing the shaders! But can you provide some simple instructions on how to use them?
Can´t get the UI$$anonymous$$ask from slavaobninsk to work. Can anyone give me help? Have followed the Readme steps but its not masking at all.
Doesn't seem to work in 5.4
Actually it does work but latest update caused Z fighting, giving it the illusion it wasn't working check your Z depth when using it on UI elements
Can you elaborate on how to get it to work? I have been messing around with the Z depth but it hasn't changed anything.
It also stopped working for me in 5.4, and I haven't been able to make it work messing with Z-depth. Before, I could turn the masks on and off, and they would disappear and reappear properly. Now, I can't find a way to reshape or remove the mask at runtime.
EDIT: After I switched my 2nd camera to Forward mode, this reverse mask works again.
