Search Unity

Sprite Mask Feathered/Soft Sprite Mask

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

  1. Richardbmth

    Richardbmth

    Joined:
    Mar 5, 2016
    Posts:
    29
    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:
    29
    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
    ErayT and Johaness_Reuben like this.
  3. Johaness_Reuben

    Johaness_Reuben

    Unity Technologies

    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:
    945
    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:
    29
    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:
    213
    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.