Just looking for any more detailed technical info on sprite masks: how they work, how to create one, what they can do and what they can’t.
Any pointers much appreciated. Especially how best to create one.
Thanks for the response, but it doesn’t help. That’s the ‘Dummies Guide’. I asked for the tech info.
That tutorial says:
Where does the ‘Red Background’ sprite come from? How was it created? What capabilities does it allow?
@dpoly to create a red background like in the example, you can create a square sprite like shown in the image above, and then drag this square sprite out into the scene to create a new GameObject with a SpriteRenderer using the newly created square sprite.
The example in the learn page wanted to highlight how to mask SpriteRenderers. Adding a SpriteMask with a Sprite assigned to it, and then setting the SpriteRenderers MaskInteraction field to either Visible Inside Mask or Visible Outside Mask will mask the SpriteRenderers accordingly.
Our manual page on SpriteMasks also goes into the details on how you can work with SpriteMasks. Have a look, and let us know if you have any more questions.
Getting closer. What I deduce from that (which you didn’t say) is that a simple shape with a hard edge on a transparent ground will show or hide that shaped region of some other sprite. In the tutorial it was a red square, but you didn’t say whether the colour matters.
But I definitely don’t want any of those shapes. So what about other shapes?And what happens at the edge if the shape is anti-aliased?
Maybe the answer is that any bitmap can be a mask, and only the alpha is actually used. Maybe the only choices are (a) visible on high/low alpha (b) the alpha value dividing high from low. Maybe this is relying on the features of the stencil buffer.
If so, I wish someone would say so.
A Sprite is a collection of mainly two pieces of data; texture data and mesh data. A SpriteRenderer uses the mesh and texture data to draw the given information onto your render target.
A SpriteMask is actually two renderers, a front and back renderer, where the back renderer uses the texture and mesh data to write to the stencil buffer, and the front renderer uses the same data to negate what the back renderer wrote.
Any SpriteRenderers between the two SpriteMask renderers (the range can be set by the custom range field on the SpriteMask component) will perform a stencil test, where depending on the following conditions, the pixel will either be rendered or discarded:
- MaskInteraction field on the SpriteRenderer
- Alpha value of the given pixel of the texture used in the SpriteMask
- Alpha cutoff set in the SpriteMask component
Note that SpriteMasks does not give you a smooth blend from the area being rendered to the area being cut off. The pixel is either rendered or discarded.
4 Likes
Love that techie talk!
OK, so to get an irregular shape with a feathered edge? It looks like that would need two versions of the same shape: one opaque bitmap with a transparent background (the mask), and another with the same outline shape (to use as an overlay). Lay the outline over the target, then mask them both.
Those two bitmaps could be produced from a draw program (Inkscape comes to mind) using stroke and fill: the mask is based on the fill and the outline is based on the stroke, both saved as PNG.
The shape could be arbitrarily complex: a grating, checkboard, spline curve, whatever. Time for some experimenting.