Search Unity

  1. Unity Asset Manager is now available in public beta. Try it out now and join the conversation here in the forums.
    Dismiss Notice
  2. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  3. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

Feathered/Soft Sprite Mask

Discussion in '2D Experimental Preview' started by Richardbmth, Oct 4, 2017.

  1. Richardbmth

    Richardbmth

    Joined:
    Mar 5, 2016
    Posts:
    30
    Hi,

    I've just tried out the new Sprite Mask and loved it's easy workflow. However I couldn't seem to make it do a nice feathered mask? Is this possible?

    We currently use a plugin which can do this and is useful for highlighting in tutorials e.g a feathered hole on a black plane we can move and scale up and down to highlight an area of interest. It would be nice if we can use the Sprite Mask instead to create the feathered mask :)
     
  2. Richardbmth

    Richardbmth

    Joined:
    Mar 5, 2016
    Posts:
    30
    OK, think I found a solution to my own question. I was expecting a noticeable seam between the masked hole and feathered image, but it seems to be ok.
    1. Create a root empty Game Object to hold your assets
    2. Create a Child Game Object, name it e.g Moveable Sprite Mask and add the Sprite Mask component. Assign a blank png which will be the same dimensions as your feathered image. Set Alpha Cutoff to zero.
    3. Create a Child Game Object of Moveable Sprite Mask name it e.g Feathered Image which will hold your feathered edge png. The png will be the same dimensions as your blank mask sprite. Set the transparency, such as 90%
    4. Create a Child Game Object of the root Game Object, this will hold a black png. Name it , e.g Black Overlay. Set transparency same as previous step and scale to suit your needs. Set Mask interaction as 'Visible outside mask' on the Sprite Renderer.
    5. A feathered hole should be be visible on your black overlay. Move and scale the 'Moveable Sprite Mask' to highlight any image below it.
    Feel free to optimise/improve in your own solution, including using 9 sliced scaling on the feathered image.


    upload_2017-10-5_17-51-35.png
     
    Last edited: Oct 5, 2017
    menderbug, ErayT and Johaness_Reuben like this.
  3. Johaness_Reuben

    Johaness_Reuben

    Joined:
    Jan 27, 2016
    Posts:
    253
    @Richardbmth Excellent! I was about to suggest something similar.Thank you for sharing your solution.
    The Sprite Mask only provides an Alpha Cutoff.
     
  4. ZimM

    ZimM

    Joined:
    Dec 24, 2012
    Posts:
    963
    Perhaps I'm not getting something, but... How is the mask feathered in your solution? All I here is a mask that is a perfect rectangle, and a vignette-like image inside the mask.
     
  5. Richardbmth

    Richardbmth

    Joined:
    Mar 5, 2016
    Posts:
    30
    Apologies ZimM, it was a solution to our particular masking requirement - effectively masking a hole in a flat colour image and have the mask appear feathered by placing a feathered imaged over it. It works fine for that purpose but appreciate it may not work for other advanced masking requirements.

    Perhaps state your particular masking problem and someone might have a different solution/work around :)
     
  6. ErayT

    ErayT

    Joined:
    Dec 13, 2013
    Posts:
    20
    Brillient solution. I was trying to achieve the same thing. Thank you :)
     
  7. nicmarxp

    nicmarxp

    Joined:
    Dec 3, 2017
    Posts:
    406
    Thanks for the tips! I'm not sure if I'm missing anything, but for me it worked just by adding the feathered mask as a sprite, set opacity to 90% (optional), and you can see what's below it. So only one gameobject, and no empty or black objects.
     
  8. escu

    escu

    Joined:
    Feb 26, 2015
    Posts:
    3
    I don't know if newer Unity versions broke this functionality, removed it, or else I'm just not doing it properly, but this solution doesn't seem to work for me. Unity seems to treat my feathered image as a solid, so all of it is see-through regardless of alpha level.
     
  9. jay3sh

    jay3sh

    Joined:
    Dec 30, 2013
    Posts:
    19
    In modern Unity versions (v2019.x+) I would recommend using shader graph solution with URP. I followed Brackey's video to set it up and created my alpha blended sprite masked material in no time.
     
  10. Rachan

    Rachan

    Joined:
    Dec 3, 2012
    Posts:
    759
    Thanks!!
     
  11. lorenzoteslermabe

    lorenzoteslermabe

    Joined:
    Dec 23, 2020
    Posts:
    24
    Hey! Any more info you have to share on this solution? I'm interested :)