Feathered/Soft Sprite Mask

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 :)

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.

  • Create a root empty Game Object to hold your assets
  • 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.
  • 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%
  • 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.
  • 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.

3244348--249528--upload_2017-10-5_17-51-35.jpg

4 Likes

@Richardbmth Excellent! I was about to suggest something similar.Thank you for sharing your solution.
The Sprite Mask only provides an Alpha Cutoff.

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.

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 :)


Brillient solution. I was trying to achieve the same thing. Thank you :)

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.

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.

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.

https://www.youtube.com/watch?v=5dzGj9k8Qy8

Thanks!!

Hey! Any more info you have to share on this solution? I'm interested :)