• Products
  • Solutions
  • Made with Unity
  • Learning
  • Support & Services
  • Community
  • Asset Store
  • Get Unity

UNITY ACCOUNT

You need a Unity Account to shop in the Online and Asset Stores, participate in the Unity Community and manage your license portfolio. Login Create account
  • Blog
  • Forums
  • Answers
  • Evangelists
  • User Groups
  • Beta Program
  • Advisory Panel

Navigation

  • Home
  • Products
  • Solutions
  • Made with Unity
  • Learning
  • Support & Services
  • Community
    • Blog
    • Forums
    • Answers
    • Evangelists
    • User Groups
    • Beta Program
    • Advisory Panel

Unity account

You need a Unity Account to shop in the Online and Asset Stores, participate in the Unity Community and manage your license portfolio. Login Create account

Language

  • Chinese
  • Spanish
  • Japanese
  • Korean
  • Portuguese
  • Ask a question
  • Spaces
    • Default
    • Help Room
    • META
    • Moderators
    • Topics
    • Questions
    • Users
    • Badges
  • Home /
avatar image
4
Question by CamoLeopard · Sep 14, 2016 at 06:40 AM · uimaskmasking

'Invert' UI mask

Hows it going all,

I am working on some transitions for my game, and one of the ideas that came to mind was a keyhole transition where a shape is cutout in solid color to reveal what is be$$anonymous$$nd and that hole slowly becomes smaller to cover the screen. To do t$$anonymous$$s I need an inverted mask so that the shape I put in it cuts out from the parent image, I have found some threads with shaders that do not work in unity 5, any suggestions?

Comment
Add comment
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users

3 Replies

· Add your reply
  • Sort: 
avatar image
3

Answer by nicloay · Apr 12, 2018 at 10:47 AM

I'm trying to fix the same problem. So I come up to the idea to switch stencil operation.

here is a code

 using UnityEngine;
 using UnityEngine.Rendering;
 using UnityEngine.UI;
 
 public class InvertedMaskImage : Image {
     public override Material materialForRendering
     {
         get
         {
             Material result = base.materialForRendering;
             result.SetInt("_StencilComp", (int)CompareFunction.NotEqual);
             return result;
         }
     }
 }

and t$$anonymous$$s is the scene setup

alt text

Use the same Mask object on the MaskSprite. but for CoverScreenSprite change Image component to the InvertedMaskImage. so it will replace stencil comparison operation.

Unfortunatly inspector will still show old material parameters, alt text but it will work. in editor as well as in play mode


screen-shot-2018-04-12-at-124258.png (38.5 kB)
screen-shot-2018-04-12-at-124506.png (6.9 kB)
Comment
Add comment · Show 1 · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image Kareem_Hesham · Apr 03, 2020 at 10:28 AM 1
Share

Hi, I used your code and it broke my original UI image, you have to instiate for it to work without conflicting with the current one : using UnityEngine; using UnityEngine.Rendering; using UnityEngine.UI;

 public class UIInvertMask : Image
 {
     public override Material materialForRendering
     {
         get
         {
             Material result =  Instantiate( base.materialForRendering);
             result.SetInt("_StencilComp", (int)CompareFunction.NotEqual);
             return result;
         }
     }
 }

avatar image
3

Answer by _geo__ · May 06, 2021 at 01:06 PM

It's an old question but I noticed a unwanted sideeffect with nicloay's solution in Unity 2019.4.x. The script will modify your default ui material stencil setting (all default sprites will become invisible).

Here is my approach without coding w$$anonymous$$ch is similar to nicloay's solution but uses one dedicated material for mask inversion. It also avoids creating / instancing new materials.

alt text


unityinversemaskimage.jpg (133.5 kB)
Comment
Add comment · Show 3 · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image kikchitov · Nov 10, 2021 at 10:38 AM 0
Share

This is working in 2020.2.5f1! Thanks a lot

avatar image EJSainz · Aug 07, 2022 at 10:36 AM 0
Share

Works in 2021.2.18f1, thanks a lot. For me this one is much better solution, as it doesn't imply code, just an easy to create material.

Word of advice for anyone using this: it is very important that the object to be inversely masked is not checked maskable , which IMHO is absolutely counter-intuitive.

avatar image GuyInCube13 · Jan 16 at 04:06 PM 0
Share

This provides the window to the lower layered UI as expected. However, the cover screen space does not keep anything covered from being clicked. Infact if you set it to raycast target, it cause what is cutout to keep from being clicked. I have not found a combination to only allow what is cutout to be interacted with.

avatar image
-1

Answer by Max_Bol · Apr 02, 2017 at 10:30 AM

If you don't want to touch any shaders, there are 3 ways of doing t$$anonymous$$s.

One easy, but the results might be bad (depending on many factors) and one that is somewhat safe, but will require some work on your part to allow it to appears as intended on the screen. I'll explain both ways with, as an example, your idea of a keyhole where the hole is the invisible part of the UI that display the scene or whatever is be$$anonymous$$nd it.

The easy way of doing t$$anonymous$$s is to only use a inverted texture as a UI mask. By using an "huge" UI Image that exceed on all side of the screen, you could have your keyhole set in that.

T$$anonymous$$s is a quick visual reference : Option A The issue with t$$anonymous$$s method is that the hole can't be crystal clear. T$$anonymous$$s means it can work if you're using a smoothed or blurry keyhole right from the start. (By "Resize the Texture", I meant the UI RectTransform of the Image component that hold the keyhole Sprite.)

The other method that doesn't involve making your own or using someone else shader is to do a small trick where you use a much clearer (and possibly smaller) image file of the keyhole inverted. It's like the first option above, but instead of using a HUGE amount of "filler" around the keyhole, you use a set of 3 row and 3 columns where the keyhole is kept in the middle. You can do t$$anonymous$$s by using an intelligent set of Layout groups and uses of Layout Element components. After, you just got to adjust the middle keyhole's RectTransform sizes w$$anonymous$$le letting the 8 surrounding "plain" colored UI element readjust themselves.

The last method requires a bit of work, yet still doesn't need any kind of special shaders. You can use an additional camera with and a $$anonymous$$gher priority (larger depth) and with Depth Only for its Clear Flag w$$anonymous$$ch only see the keyhole texture/mesh (through its culling mask) and animate/move the camera into or out of the the keyhole. T$$anonymous$$s method is a lot more useful if you plan to use some 3D modeled keyhole or if you want more control (via script) over the keyholes animations and/or events. The only issues you might accounter with t$$anonymous$$s last/3rd method is memory/vram wise. Adding a camera for such might be a problem if you're aiming at some light-weight smartphones or tablet as such each camera requires its own Z-Buffering channel to "cut" out the required stuff and put each "results" over each other in the right order.


trick-a-resizeinversedhole.png (11.7 kB)
Comment
Add comment · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users

Your answer

Hint: You can notify a user about this post by typing @username

Up to 2 attachments (including images) can be used with a maximum of 524.3 kB each and 1.0 MB total.

Welcome to Unity Answers

If you’re new to Unity Answers, please check our User Guide to help you navigate through our website and refer to our FAQ for more information.

Before posting, make sure to check out our Knowledge Base for commonly asked Unity questions.

Check our Moderator Guidelines if you’re a new moderator and want to work together in an effort to improve Unity Answers and support our users.

Follow this Question

Answers Answers and Comments

85 People are following this question.

avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image

Related Questions

UI mask with a 3D object 1 Answer

How would you mask a UI canvas like you would mask a sprite? 1 Answer

Ring with changeable diameters 1 Answer

TextMeshPro InputField masking not working 0 Answers

Can I combine 2 or more UI masks? 0 Answers


Enterprise
Social Q&A

Social
Subscribe on YouTube social-youtube Follow on LinkedIn social-linkedin Follow on Twitter social-twitter Follow on Facebook social-facebook Follow on Instagram social-instagram

Footer

  • Purchase
    • Products
    • Subscription
    • Asset Store
    • Unity Gear
    • Resellers
  • Education
    • Students
    • Educators
    • Certification
    • Learn
    • Center of Excellence
  • Download
    • Unity
    • Beta Program
  • Unity Labs
    • Labs
    • Publications
  • Resources
    • Learn platform
    • Community
    • Documentation
    • Unity QA
    • FAQ
    • Services Status
    • Connect
  • About Unity
    • About Us
    • Blog
    • Events
    • Careers
    • Contact
    • Press
    • Partners
    • Affiliates
    • Security
Copyright © 2020 Unity Technologies
  • Legal
  • Privacy Policy
  • Cookies
  • Do Not Sell My Personal Information
  • Cookies Settings
"Unity", Unity logos, and other Unity trademarks are trademarks or registered trademarks of Unity Technologies or its affiliates in the U.S. and elsewhere (more info here). Other names or brands are trademarks of their respective owners.
  • Anonymous
  • Sign in
  • Create
  • Ask a question
  • Spaces
  • Default
  • Help Room
  • META
  • Moderators
  • Explore
  • Topics
  • Questions
  • Users
  • Badges