Search Unity

  1. We are migrating the Unity Forums to Unity Discussions by the end of July. Read our announcement for more information and let us know if you have any questions.
    Dismiss Notice
  2. Dismiss Notice

Mask component does not support gradient alpha?

Discussion in 'UGUI & 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?
     
    CloudyVR likes this.
  2. paradizIsCool

    paradizIsCool

    Joined:
    Jul 10, 2014
    Posts:
    178
    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,521
    A gradient alpha mask would be very nice.
     
  4. Tim-C

    Tim-C

    Unity Technologies

    Joined:
    Feb 6, 2010
    Posts:
    2,225
    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,225
    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:
    3,307
    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:
    269
    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:
    3,307
    That's a nice idea - definitely worth a try, thanks!
     
  11. jtsmith1287

    jtsmith1287

    Joined:
    Aug 3, 2014
    Posts:
    787
    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

    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.

     
    Celezt, seangriffin, tobetobe and 2 others like 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

    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

    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

    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:
    427
    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:
    226
    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:
    427
    @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! :)
     
  26. fahruz

    fahruz

    Joined:
    Mar 5, 2020
    Posts:
    57
    Resurrecting this old thread to ask what (free) technique is currently available to have a mask honour the alpha channel of its child image. In fact, in my case I just have a single alpha value to specify the transparency of the whole image. Hopefully a mask that can support that is easier to achieve than pixel-based soft masks?
     
  27. nnton3

    nnton3

    Joined:
    Sep 8, 2017
    Posts:
    19
    Today we haven't issue and it's sad(
     
  28. fleischer10553

    fleischer10553

    Joined:
    Jul 18, 2015
    Posts:
    1
    Still looking for a non-third party solution in 2024!! Ten years later!! Incredible!!!
     
    rin-2 and NDimensionalGames like this.