Search Unity

  1. Improved Prefab workflow (includes Nested Prefabs!), 2D isometric Tilemap and more! Get the 2018.3 Beta now.
    Dismiss Notice
  2. The Unity Pro & Visual Studio Professional Bundle gives you the tools you need to develop faster & collaborate more efficiently. Learn more.
    Dismiss Notice
  3. Let us know a bit about your interests, and if you'd like to become more directly involved. Take our survey!
    Dismiss Notice
  4. Improve your Unity skills with a certified instructor in a private, interactive classroom. Watch the overview now.
    Dismiss Notice
  5. Want to see the most recent patch releases? Take a peek at the patch release page.
    Dismiss Notice

Mask component does not support gradient alpha?

Discussion in 'Unity UI & TextMesh Pro' started by IntDev, Aug 27, 2014.

  1. IntDev

    IntDev

    Joined:
    Jan 14, 2013
    Posts:
    152
    I put a alpha mask image with a gradient and that does not work as I was expecting. Only alpha 0.0 or 1.0 work. Any value between, doesn't. :'(

    Am I missing something or its a bug?
     
  2. paradizIsCool

    paradizIsCool

    Joined:
    Jul 10, 2014
    Posts:
    138
    It's a by design bug ;)
    Seriously, I think that's not a bug, but there is a lack of an "advance" alpha mask.
     
  3. Ippokratis

    Ippokratis

    Joined:
    Oct 13, 2008
    Posts:
    1,485
    A gradient alpha mask would be very nice.
     
  4. Tim-C

    Tim-C

    Unity Technologies

    Joined:
    Feb 6, 2010
    Posts:
    2,071
    We are using the stencil buffer which is either on or off for masking. You can do this with a custom shader on the element that is being masked, we have not tried this so I can't say what the 'best' solution is.
     
  5. Renegat

    Renegat

    Joined:
    Mar 19, 2013
    Posts:
    10
    Hey Tim, I've ran into this issue too. Could you supply a shader which does this or at least point to a shader which needs to be modified to do this? Gradient masks are a *must have* to make the scroll view look nice! :)
     
  6. Tim-C

    Tim-C

    Unity Technologies

    Joined:
    Feb 6, 2010
    Posts:
    2,071
    It's unfortunately a non trivial thing to implement, which is partially the reason we have not done it yet (focussing on other aspects of the system). We will be investigating this more at a later date. 2 possible solutions exist (fun with alpha blending or fun with custom shaders).
     
  7. JAKJ

    JAKJ

    Joined:
    Aug 17, 2014
    Posts:
    185
    Whatever you add in the future, I think the current method should also stay for those of us who don't need alpha in the mask, because the stencil buffer thing is nice and quick and efficient.
     
  8. jashan

    jashan

    Joined:
    Mar 9, 2007
    Posts:
    2,976
    The sooner the better ;-) ... I agree that the stencil buffer solution should always be available. But I was actually surprised when I found out that "soft scroll areas" are currently not supported out of the box. It would be lovely to be able to just define an alpha-image for the Mask component to set this effect up, and for the use case mentioned above (non-rectangular masks) it's actually a necessity.
     
  9. Doddler

    Doddler

    Joined:
    Jul 12, 2011
    Posts:
    243
    Correct me if I'm wrong, but could you draw a frame of sorts over top of your scroll area to have a fade out effect? The mask would hard clip things out of the area and the frame drawn over top would give a smooth transition to the background color (or whatever you want). It's not super pretty but I imagine it would work?
     
  10. jashan

    jashan

    Joined:
    Mar 9, 2007
    Posts:
    2,976
    That's a nice idea - definitely worth a try, thanks!
     
  11. jtsmith1287

    jtsmith1287

    Joined:
    Aug 3, 2014
    Posts:
    768
    Has this been implemented yet? The idea of using a frame over the top only works for backgrounds with solid colors.
     
    teemukorh likes this.
  12. Peter Suwara

    Peter Suwara

    Joined:
    Apr 16, 2015
    Posts:
    19
    This was in 2014. Any news on this ? :)
     
    Thomas-Mountainborn likes this.
  13. IntDev

    IntDev

    Joined:
    Jan 14, 2013
    Posts:
    152
    In the road map for the 5.2 there is a last item (UI: Dropdown Control, 2D Clipping etc.) saying: "2D rectangle mask clipping that does not use stencil buffer." Maybe this is it?
     
    Peter Suwara likes this.
  14. Stephan-B

    Stephan-B

    Unity Technologies

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    Here is a preview of support for the new 2D RectMask in TextMesh Pro which includes support for both Soft & Hard Masking.

     
    Peter Suwara likes this.
  15. Peter Suwara

    Peter Suwara

    Joined:
    Apr 16, 2015
    Posts:
    19
    Nice work Steve, glad you're on to it. We are very happy with your plugin, keep up the awesome work ! :D
     
    Stephan-B likes this.
  16. Stephan-B

    Stephan-B

    Unity Technologies

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    I still have a few issues in Unity 5.2 related to masking which I reported and were confirmed by Unity. So as soon as those are fixed which will hopefully happen in the next Unity 5.2 patch, we should be golden on masking.
     
  17. Peter Suwara

    Peter Suwara

    Joined:
    Apr 16, 2015
    Posts:
    19
    Cool. I've been on your forum page and keeping up to date with it as the releases keep coming.
     
    Stephan-B likes this.
  18. StealThePixels

    StealThePixels

    Joined:
    Apr 2, 2015
    Posts:
    68
    We are at 5.2.2 now, did they solve the issue you mentioned?
     
  19. StealThePixels

    StealThePixels

    Joined:
    Apr 2, 2015
    Posts:
    68
    By the way, after i have imported TextMeshPro if i look for Mask from Components->UI i only find the old Mask component, not 2D Rect Mask.
    I have even restarted Unity.
    The TextMeshPro Text component is there but 2D RectMask isn't

    I have Unity 5.1.1f
     
  20. thomaswp

    thomaswp

    Joined:
    Jan 10, 2014
    Posts:
    1
  21. Stephan-B

    Stephan-B

    Unity Technologies

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    Another one of those posts that I missed. Support for both the UI.Mask and 2D Rect Mask has been available for a while now.

    The 2D Rect Mask was introduced by Unity in 5.2 so it would not be available in Unity 5.1.
     
  22. Stephan-B

    Stephan-B

    Unity Technologies

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    The next release of TextMesh Pro (which should be within the next 7 days or so) will include the ability to use an Alpha Mask Texture as seen in this example.



    This will work with the 2D Rect Mask which was introduced in Unity 5.2. Note that it could work without it but I'll add that functionality shortly thereafter.

    Here is an animated GIF of this in action. The GIF compression is pretty bad here but you get the idea :)

     
  23. CanisLupus

    CanisLupus

    Joined:
    Jul 29, 2013
    Posts:
    212
    I've been looking for a Mask component with soft alpha but couldn't find any. Everything I found seems to be for masking one simple image and not several UI components.

    Assuming I haven't missed some obvious asset or open source script, how would I be able to even create such a component?

    I understand that the stencil buffer isn't enough and I have almost no experience with shaders, but would be willing to try. But it doesn't seem as "simple" as using shaders only, because the UI elements implement interfaces for clipping and I'm not sure where would I begin. Or is this irrelevant in this case?

    Would really appreciate getting some pointers. :)

    Cheers and thank you,
    Daniel

    PS: I've seen the open source UI repo, but the Mask component there didn't help me understand much, as it's based on the stencil buffer.
     
    Last edited: Jan 7, 2017
  24. zxkne

    zxkne

    Joined:
    Jan 27, 2016
    Posts:
    101
    I have recently released Soft Mask component that solves exactly this problem. It's specialized to work with Unity UI in the same way as standard Unity's mask, but with alpha support. You can check whether it suits your needs. The video in the Asset Store page shows editor workflow.

    How it works

    The key idea is to override the shader that is used to render the child elements. That shader should perform one additional operation: look up the mask texture and modify the resulting pixel's color accordingly.

    Tricky parts are the lookup and the shader overriding. You should convert the position of a child element's pixel to UV of the parent mask object. When doing so, don't forget about various Image types in Unity. In my component, I've implemented simple, sliced and tiled image mappings. Of course, in an ad hoc solution, it's enough to support only the mapping mode that you need in your specific case.

    What about the shader overriding, the simplest way is to replace material on all child elements of the mask in Unity editor. In Soft Mask I have implemented shader replacement that is fully automatic and opaque for the user. You hardly notice any signs that replacement takes place. It just works, just like standard Unity mask.
     
    CanisLupus and Izzy2000 like this.
  25. CanisLupus

    CanisLupus

    Joined:
    Jul 29, 2013
    Posts:
    212
    @zxkne Thank you very much for the detailed reply and explaining your process for implementing this. :)

    I had seen that the MaskableGraphic component directly referred the Mask component as an optimization, so I concluded that this was probably more complicated than initially thought, and involved replacing multiple things. The material replacement you mention made sense to me, as did the rest of the explanation, even though I'm not well versed in shader programming!

    I ended up circumventing the lack of a soft mask after posting here but I now know where I'll be looking next time: either the pain of trying to implementing this, or Soft Mask. By the way, I see you've just released it. Good luck! :)