Make a Cutout Mask in Unity! (Inverted Mask)

Let's learn how to make a Inverse Cutout Mask in the UI!
👇
🌍 Get Code Monkey on Steam!
👍 Interactive Tutorials, Complete Games and More!

If you have any questions post them in the comments and I'll do my best to answer them.

See you next time!

#unitytutorial #unity3d #unity2d

--------------------------------------------------------------------

Hello and welcome, I am your Code Monkey and here you will learn everything about Game Development in Unity 2D using C#.

I've been developing games for several years with 7 published games on Steam and now I'm sharing my knowledge to help you on your own game development journey.

--------------------------------------------------------------------

[CodeMonkeyUnity]

🌐 Have you found the videos Helpful and Valuable?

[CodeMonkeyUnity]

Here's something that took me a while to figure out, I'm hoping other people looking for the solution come across this video!

[gamesgarden]

Nice one! Pretty old, but still works - with a little update: I'm on unity 2020.3, and had to change "int" to "float" in material, like this:
SetFloat("_StencilComp",

[firebolttz]

For those that don't work! You need to Disable the Show Mask Graphic box! It's very easy to miss in the video and got me for half an hour...

[kevinfischer]

Heya! Thank you for revealing how to to do this! The thing I don't like about this approach though is that this seems to force a parent child relationship in order to work. Also, I don't want to worry about generating too much garbage making new materials😅

My approach was to create two materials as assets. I use the "UI/Default" shader for both. Then I change the properties of those materials like so:

Material 1 (This will define the "mask" that will subtract from Material 2):
- Stencil Comparison: 8 (Always)
- Stencil ID: 1
- Stencil Operation: 2 (Replace)
- Stencil Write Mask: 255 (This mask allows all values)
- Stencil Read Mask: 255
- Color Mask: 0 (Zero makes the mask invisible)
- Use Alpha Clip: true (Allows you to utilize the texture's alpha in the mask but can't control the "cutoff" value unfortunately)

Material 2:
- Stencil Comparison: 6 (Not Equal.)
- Stencil ID: 1
- Stencil Operation: 0 (Keep)
- Stencil Write Mask: 255
- Stencil Read Mask: 255
- Color Mask: 15
- Use Alpha Clip: false


Then I create two "Images" and assign the materials to them. I get the same effect but now they're siblings and I can rotate and scale them individually! The effect still works when they're parent and child too! The only restriction is that the image with Material 1 must be placed higher than the image with Material 2 in the hierarchy. I did encounter a glitch when I overlapped two sets of images. My solution was to add a third material that set the stencil buffer area covered by Material 2 to zero.

Material 3:
- Stencil Comparison: 8
- Stencil ID: 0
- Stencil Operation: 1 (Write Zero)
- Stencil Write Mask: 255
- Stencil Read Mask: 255
- Color Mask: 0
- Use Alpha Clip: false

[imdebestmoderfokingsosigin]

You're a legend CM you made all these tutorials on different topics just in 2 years AMAZING also you reached 185K Subs In 2 years that's achievement bc I know some channels start way before you did and they don't have that much of subscribers great job

[jacobpressley]

I spent weeks earlier this year looking for "inverse mask" and cutouts and only found shoddy tools etc. You make it look so obvious. I'll be implementing this technique for an in-game tutorial where I need to grayout everything but the button the player should focus on. Thanks!

[AnnisVeryGoodGames]

Thanks a lot, a nice and clean solution! I'll try this out for a tutorial mode to highlight certain parts of the screen.

[wazaDev]

Your tutorials are amazing and are a huge help I can't say thank you enough

[pauliusginiotis]

Is it possible to keep the cutout part stationary when moving the parent image?

[anshulsingh]

How to make the black more smooth?
Like transparent to black. I don't want hard circular shape.

[help]

This approach may cause some issues. For example: when changing scenes (when it's DontDestroyOnLoad) if the object (Image) is not focused - it disappears. Therefore it doesn't work properly for scene changing (all platforms). Tested on Unity 2020.2.1f1

[extraso]

Thx man all the vids you make are soo helpful and keep it up!

[NMPDelta]

Thank you! Your videos inspired me to make a game.

[snorkis]

Thank you a lot! You saved me a lot of time, because I was searching on how to do this kind of transition and I thought maybe it was something to do with mask. And you helped me BIG time! <3

[markuszverkhovski]

It wouldn't work for me because in 2021 version of Unity
SetInt has since been deprecated and _StencilComp property - made into a float. Use SetFloat and cast as float if You want this to work

[HondaRacer]

Thanks so much for this tutorial!!!! I spent a lot of time trying to figure out workarounds for this, then I was saved by your video!

[Odaimoko]

Will it cause memory leak (or great GC overhead)? Since each time you get that material you create a new one.

[BearSennepai]

Hey bro! Never stop making videos. Never ever. Please. I want to see this channel grow and expand. This is in my opinion, the best Unity coding channel on the entirety of Youtube, and i would not be able to code as well if i didn`t have your videos. Thank you man!

[kureysalp]

Image with rendering by CutOutImage component is not rendering after loading the scene async. Disabling and re enabling the object solves the problem but why its not able to work correctly after loading a scene?