[Released] Sprite Mask - masking system for Unity Sprite

How can i get this to work with anima2D 'SpriteMeshInstance'? Anything i have animated with Anima2D (most things) is unnaffected by the mask and spills over

 

Hi funianrun,

As I mentioned earlier:

"Anima2D uses Unity build in 'Sprites/Default' shader, which doesn't support Stencil buffer. If you try to change shader then SpriteMeshInstance.OnRenderObject() method will restore the material to the default one from SpriteMesh. I think, you have to set (somehow) proper shader on default material of SpriteMesh."

You have two options:
1) Extends the 'Sprites/Default' to support Stencil buffer.
2) Try to comment the code that is restoring the default shader in the SpriteMeshInstance.OnRenderObject() method.

Cheers!

 

Hi,

Teoretical it is possible. The front screen (hills, mountains, trees) should by the mask but that will case all your object to be a masking part. It can be hard to do.

If you use many cameras I suggest you to add camera effect rather than masking objects. Or you can use a custom shader for all your objects at the front camera and add extra black tint, so you don't need to add texture over it.

If you need more help, just let me know.

Cheers!

 

Hi PoL231, I having an issue here.

The masked sprite wont unmask wont update when i enlarge the mask rectangle width during playing time.
I adjust the mask rectangle value x with unity animator. The masked sprite only will expand and display correctly when i manually tweak +- the value a little in the inspector.

I had a sprite sheet animation playing in the mask hierarchy.

Currently I'm using unity version 5.4.3f1.

Thanks

 

Hi,

Can you give me some screenshots/your objects hierarchy or any further info about your scene.
This will give me a better view of the problem.

Thanks!

 

http://truesoft.pl/sprite_mask/aladine/

For that demo, can it be put in an empty object and disabled/enabled. The sprites would be animated, and maybe moving. Can it be enabled and disabled at run time?

 

Sorry, I am just going to make alphas 0. Is there a limit to layers? 7 layers? I want to know.

 

Hi,

Not sure what you mean but you can animate whatever you want.

Cheers!

 

Yes, there is a limit of layers. The limit is related to Stencil buffer cell size. It has only 8 bits per pixel. In theory you can have max 7 mask levels.

To have 7 mask levels you need to change SpriteMask class source code.

From:

Code (CSharp):

1. private const int MAX_LEVELS = 3;

To:

Code (CSharp):

1. private const int MAX_LEVELS = 7;

I hope this will help you.

Cheers!

 

Thanks for your quick response.

Does your plugin also support TextMesh Pro - I think it should if it has a different mask layer. I am new to sharers, I have zero idea about them except for the fact that it is just switching colors (0 and 1) of masked and unmasked layer.

Le me know. Also let me know the drawbacks of your plugin. However it does do what I need to achieve:
http://truesoft.pl/sprite_mask/aladine/

Can it do everything that Alpha Mask (another competitor) can? For instance like saving prefabs, etc

 

Yes, it supports TextMesh Pro.

It masks using Stencil buffer, who doesn't support alpha gradients masking (just like Unity UI Mask).

Yes, prefabs are supported.

 

Congratulations, I bought your asset. When I use it and find it in need, I will let you know. I will be using it soon.

 

Is there any way to get softer edges on the mask with this asset?

I want to be able to define a custom mesh, but am trying to not have a hard on/off line, but something that transitions from on to off.

Is this possible?

 

Hi markzorn,

Unfortunately SpriteMask doesn't support gradient masking. It mask a pixel or not, just like Unity UI Mask (based on Stencil buffer - it's super fast).

If you need more help, just let me know.

Cheers!

 

Edit: I have discovered a workaround. While this may still be a bug, for anyone with similar issues please refer to this post.


I purchased the Sprite Mask package in hopes of creating a flat object hierarchy with an outer mask, an inner mask, and a sprite that they both mask out. So a 3-level mask hierarchy.

I have been able to get such a 3-level sprite mask working with a nested object hierarchy, but I would like to be able to move all 3 sprites independently without them inheriting transform data from each other.

For reference, here is an example effect I originally prototyped in Photoshop, which I want to re-create with masked sprites in Unity:

• The white text is masked by the blue slider which is masked by the white background.
• In other words, the white background is a mask, which masks the blue slider, which itself masks the white text.
• All three objects are sprites with their sprite texture visible.
• As you can see, having a flat object hierarchy would be the best here to ensure the white text does not move with the blue background.

I have been trying to get such a flat 3-sprite mask hierarchy working in Unity with your 'Sprite Mask' package, and it behaves very weirdly:


(please right click and open image in new tab to watch from beginning)

My exact steps are:

1. Creating outer Mask object

1. Create new empty object in scene root.
2. Add 'Sprite Mask' component.
3. Set its Type to 'Sprite'.
4. Enable 'Show Mask Graphics'.
5. Change new 'SpriteRenderer's Sprite to a Red unit circle with layer order 0.

2. Creating inner Mask object

1. Create new empty object in scene root.
2. Add 'Sprite Mask' component.
3. Set its Type to 'Sprite'.
4. Enable 'Show Mask Graphics'.
5. Change new 'SpriteRenderer's Sprite to a Purple unit diamond with layer order 1.

3. Creating Sprite object

1. Create new empty object in scene root.
2. Add 'SpriteRenderer' component.
3. Change Sprite to Green unit hexagon with layer order 2.

4. Apply inner Mask object to Sprite object

1. Select the inner mask object (created in step 2).
2. Drop the Sprite object (created in step 3) into the 'Drop here >>>' Masked objects field.
3. The Sprite object is now listed in the 'All items' array in the Inner Mask's 'Masked objects' field.
4. The Sprite is updated with a 'Sprite Masking Component' and correctly appears masked by the inner mask object

​

Up to this point everything works as expected, but now things appear to break down:

5. Apply outer Mask object to inner Mask object

1. Select outer Mask object (created in step 1).
2. Drop the inner Mask object (created in step 2) in to the 'Drop here >>>' Masked objects field.
3. The inner Mask object is now listed in the 'All items' array in the Outer Mask's 'Masked objects' field.
4. Unlike step 4 above, the dropped sprite is not correctly masked. No 'Sprite Masking Component' appears on the inner Mask object as would be expected.
5. Attempting to Manually add the 'Sprite Masking Component' on the inner sprite Mask object will suddenly cause two to appear, one of which has 'Owner' set correctly, while the other has it set to 'None'
6. Attempting to remove either of the extra 'Sprite Masking Component' causes it to be re-added.
7. Arbitrarily even more Sprite Masking Components are added on the inner mask object, such as when attempting to disable the outer mask.

​

So while the Inner Mask is correctly applied to the Sprite object, I am unable to get the outer mask to also apply to the inner mask. Am I using the feature incorrectly? This feels like a bug, especially based on how many 'Sprite Masking Component' Components are spawned, seemingly at random.


Am I using the Sprite Mask library incorrectly? Please let me know if there are any recommended workarounds or limitations that I have missed. I look forward to your reply.


Best,
Johannes

 

It seems the unexpected behavior described in my post above occurs when a single gameobject that has both a 'Sprite Mask' component as well as a 'Sprite Masking Component' component attached.

By wrapping each object to be masked in its own container, and then adding that to each respective mask object, I was able to achieve the desired behavior: two masks that both mask a single sprite, all in a flat hierarchy:


It would be useful if the 'Flat hierarchy' example provided with the Package could be updated to show a similarly complex structure, not just a single mask.

 

Hi JohannesMP,

I will try to fix this issue, so you can have flat hierarchy without that kind of workaround. Stay tuned.

Cheers!

 

Adding Support for masked UI/Text via UI/Unlit/Text Shader

I was having trouble getting TextMesh Pro working on a large scale, and was looking for a way to allow the stencil test to work with the existing UI/Text component. I think I found a solution that could potentially be integrated in this project.

Proof Of Concept:


I'm leveraging the 'UI/Unlit/Text' shader which has the required stencil buffer parameters, and simply creating a new material for the given text object.

Here is the sourcecode: https://gist.github.com/JohannesMP/93c351390678a0aa33d86b099e35c6f6 - Note that this is only a proof of concept that I threw together in a few minutes. My update for example is pretty hamfisted, I just wanted to see if it worked. I don't fully understand how to integrate in SpriteMask yet, so for example (with my limited shader experience) I don't know what '_StencilComp' value I would have to pass in, since that seems to be done dynamically normally. I simply passed in a value of 3 (Equal) during testing and that produced the desired result in my limited testing ¯\_(ツ)_/¯

I feel that adding something similar to this behavior in the main project would be really useful, as currently there is no intuitive way (that I've been able to figure out) to mask editable text objects components without relying on external resources such as TextMesh Pro. Having a native solution would be excellent.

Debugging Note

While working with Sprite Masking Components, I found that often it helped to be able to see the instance and stencil ID of the Owner, so I added that via a custom editor:



It would be useful to have that included, since it made debugging cases where sprite materials were getting out of sync far easier. Here is the sourcecode for anyone that wants to use it: https://gist.github.com/JohannesMP/8afa58e4f400387c36e9608d918999ef

 

Improving Flat Hierarchies

A while back I wanted to create the following mask hierarchy:

• Mask1
  • Mask2 (Masked by 1)
    • Sprite (Masked by both 1 and 2)

But without the objects actually being parented to one another.

My initial workaround worked, but was a but cumbersome to use. Since then I've run into other issues, such as running out of Masks due to the inherent Stencil buffer ID limit, and so tried to come up with an approach that would allow me to easily re-use Masks across multiple objects, by leveraging Sprite Masking Part.

Effectively if I have 10 buttons on a column, and want to animate a sliding horizontal element for each of them, it's possible to implement that with only 2 masks, as long as I am careful to not to have the horizontal sliding element of one button stretch up/down into a neighboring.

Then each column of buttons would have its own set of masks.

This is what the basic structure looks like:



Mask1_OUT masks all the button outter elements and Mask1_IN masks all the inner ones.



Issue: Second-Level Mask visible via non-parent First-level mask

Intuitively if I have two separate mask hierarchies, such as this:

• Mask1_OUT
  • Mask1_IN (masked by Mask1_OUT)
    • Various buttons in column 1 (masked by both Mask1_OUT and Mask1_IN)

• Mask2_OUT
  • Mask2_IN (masked by Mask2_OUT)
    • Various buttons in column 2 (masked by both Mask2_OUT and Mask2_IN)

I would assume that the masking inside each 'OUT' would be restricted to their respective parent masks. In other words, it should not be possible to view anything inside of Mask1_OUT through Mask2_OUT and vice versa. Unfortunately it seems like that may not be the case.

In this example there are two hierarchies, each set up as shown in the gif above:



Notice how the second level mask part (Mask1_IN and Mask2_IN) are both viewable through Mask1_OUT and Mask2_OUT, even if the hierarchy of the masks implies that this should not be possible.

Am I correct in my assumption that if you mask a mask, that internal mask should only be viewable through its immediate parent mask?



EDIT: To clarify, this seems to happen even if the object hierarchy is nested and not flat.
EDIT 2: Simplified reproducible example:

1. (screenshot) Start with 4 Sprites
   • Orange and Purple will be sprite masks, Set Sorting Layer Index to 0.
   • Red will be a nested sprite mask. Set Sorting Layer Index to 1.
   • Blue will be a masked sprite. Set Sorting Layer Index to 2.
2. (screenshot) Add 'SpriteMask' component to both Orange and Purple and check 'Show Mask Graphics'.
   
3. (screenshot) Set Blue as a child to Orange.
   • As expected, Blue is now masked correctly and does not appear when moved over Purple.
4. (screenshot) Set Red as a child to Orange.
   • As expected, Red is now masked correctly and does not appear when moved over Purple.
5. (screenshot) Add 'SpriteMask' component to Red and check 'Show Mask Graphics'.
   • Red now appears under BOTH Orange and Purple, even though only Orange is its Mask parent.
6. (screenshot) Set Blue as a child of Red (so it's nested Orange->Red->Blue).
   • As expected, Blue is now masked correctly by Red.
   • However because Red appears in both Orange and Purple, that means that Blue will also appear in Purple if , even though Purple is not a part of Blue's Mask Hierarchy.

Is there a way to prevent this behavior? i.e. have sub-elements of one Mask tree only visible to that tree, and not inside of another Mask tree?

EDIT 3:
I understand now that this may ultimately boil down to a draw-order issue, but how would you resolve a layout like this:

Two Masks, each with a submask (all set to 'Show Mask Graphics' for debugging). The intention would be to have Orange mask Red, and Purple mask Blue. There is no Sort order that would yield that result.

 

Hi. I bought this plugin but I don't know how to set in C# the sorting order of the SpriteMask component. I'm trying something like this

Code (CSharp):

1.  orderLayer++;
2.         spriteMask.sortingOrder = orderLayer;
3.         orderLayer++;
4.         GetComponentInChildren<SpriteRenderer>().sortingOrder = orderLayer;

 

Hi SergioAlonso,

Sorry for the delay. I was offline for some time.

Use this:

Code (CSharp):

1.  spriteMask.GetComponent<Renderer>().sortingOrder = orderLayer

Cheers!

 

How can i do: one UI Image cover of mask another UI Image or Text ??

 

Hi yuliyF,

SpriteMask doesn't work with individual Unity UI components, so it isn't possible to mask UIImage. However you can mask a whole Canvas.

Cheers!

 

Hello, I am having trouble with the custom mesh option. I am using SuperTileMapEditor and it uses meshes for the tiles. It has a meshfilter component. I added the SpriteMask component, however it makes the texture of the mesh disapear. Not sure what I'm doing wrong.

 

Hi,

Could you please send me more info about your object hierarchy?
Is SpriteMask component should be added to an empty GameObject, otherwise it will remove mesh filter and renderer from it.

Thanks!

 

Thanks for your response! When i add the SpriteMask to the Tilemap Chunk I get an error (and it looks like the Mesh Filter is overwritten which is why i think the texture dissapear (The old mesh filter. The error i get is: Mesh.vertices is too small. The supplied vertex array has less vertices than are referenced by the triangles array. UnityEngine.Mesh:set_vertices(Vector3[])

Upload 1 is the Hierarchy before i add the spritemask
Upload OldMeshFilter is the mesh filter before the sprite mask is added
Upload 2 is when the sprite mask is added and set to custom mesh
Upload NewMeshFilter shows the new mesh filter (after the error that is received)

 

So you want to use game object with Tilemap Chunk as a mask (masking via Mesh renderer) or this object should be masked?

If you wont to use this game object as a mask with custom mesh, then SpriteMask default masking type should be changed. Otherwise it will remove your texture (as writen before).

All you need to do, is to change in the SpriteMask source code at line 61:

From:

Code (CSharp):

1. _type = Type.Rectangle;

To:

Code (CSharp):

1. _type = Type.CustomMesh;

This should help.

Cheers!

Edit:
Also maybe there will be a need to comment out line number 811 in the SpriteMask class:

Code (CSharp):

1. // maskMaterial.mainTexture = _texture;

 

Thanks for the suggestion. You are correct in what i am looking for. I changed the code as suggested, then added spritemask to the Tilemap Chunk object. This time there is no error and mesh filter looks as it should. In edit mode everything appears correct, however when i hit play for some reason the meshfilter goes bad again (2 vertex or whatever). This seems likely to be something that SuperTileMapEditor does though, so i may have to pose the question there

 

Hmm, i can get the gfx and meshfilter to stay if i comment out the mayeDestroyRuntimeMesh() method. But this seems to break the masking (the blood splatter sprites are now not showing).

 

From the method SpriteMask.applyType() comment out those 2 lines:

Code (CSharp):

1. [...]
2.         case Type.CustomMesh:
3.             _sprite = null;
4.             destroySpriteComponents ();
5.             // maybeDestroyRuntimeMesh ();
6.  
7.             ensureMeshComponents ();
8.             // maskMaterial.mainTexture = _texture;
9.             break;
10. [...]

I hope this will help.

 

Hi,

I spent the whole day debugging SpriteMask. You should add to readme that scene should contain at least one camera with non-"don't clear flag" to clear stencil buffer (or clear it directly).

 

Sorry for your wasted time. It will be in the readme file from the next release.

Thanks!

 

Is it possible to have 2 sprites be masked by 2 different masks in the same scene? I would like Image A to be masked by Mask A and Image B be masked by Mask B. I want to make sure Image A isn't masked by Mask B. My initial experiments all seem to show that all masks added to a scene only mask Image A even though the "Masked Objects" field is pointing to different sprites on each mask.

thanks

 

Hi protoben,

There shouldn't be any problem with that. All you need to do is to set proper sorting order on you object:

Code (CSharp):

1. Mask A -> sortingOrder: 0
2.     Image A -> sortingOrder: 1
3. Mask B -> sortingOrder 2
4.     Image B -> sortingOrder 3

Cheers!

 

Hello,
I am creating a pixel RPG and wanted to use a more classic pixel shading effect. I was wondering if it is possible to have multiple inverted masks affecting one background (similar to the image below).
.
I looked at the inverted shape example, but it only seemed like the background image could only be affected by one inverted mask.
Overall I was wondering did I do something wrong? And is this possible to achieve the image above? Also, can the mask sprite be animated?

Thanks.

 

Hi Plason,

Sorry for the delay. You meant something like this?

So my answer is: Yes, it is possible. You can also animate the mask.

Cheers!

 

Hi, this asset is very useful. But I ran into an issue:
I was playing around with the 7th example ecene, Masking Part. I found that if I enlarge the a part mask, it works correctly, the masking area will just be expanded. But if I shrink one, the masking area will not change. It seems it will always buffer the largest scale. Can you please solve this?

Plus: the example scene you listed in the thread above was not included in the asset.

 

Hi Yinmo,

You are right, that's a bug. I'm on holiday right now so, I can look in to this from 7 August.
Is this delay a problem for you?

Thanks!

 

Not a problem at all. I am just exploring all the possibilities to use it currently. Take your time

 

Hi! Great asset, I like it, thought I am having problem to set it up correctly so that I can add dynamically sprites.
Here is what setup I have (different types of vehicles that have ads on them that should supposed to masked in the shape of the vehicle):

-Vehicle 1 (Car)
--- Mask (Mask) (mesh of the Vehicle 1 is added here, I can do this for every prefab, it doesn't need to be dynamic)
------ [Attachment Point] // this is the transform where prefab is attached (so that scale and position could be controlled)
---------- Ad ----> (Prefab - part that is dynamically added, it has controller on it for enabling/disabling sprites)
------------- Content (SpriteMaskinComponent)
---------------- Ad1 (SpriteRenderer)
---------------- Ad2 (SpriteRenderer)
---------------- Ad3 (SpriteRenderer)
---------------- Ad4 (SpriteRenderer)

So I am not sure how what to update and what to connect to what?
Do I need to add to mask prefab transform in masked objects? And also do I need to add mask to SpriteMaskingComponent?

Also I noticed if I have two masks, they cancel each other, oftern I have pink shader and mask doesn't work, I suppose there is a problem with setup

I was looking through examples, it seems there is no example for dynamic things.
Thanks for your help!

 

i see that i have complicated things a bit, all that is needed is to place sprites under mask
since my game is paiting on the walls, i was wondering how can i achieve the effect where i can have another sprite on top of everything but just with shine or few lines so that it's more realistic, like with graffiti? what shader should i use?

 

Hi pretender,

Could you please provide some screenshots. This would help me to understand your use case.

Thanks!

 

Hi, I have managed to work out everything and it seems that it works. It's not that complicated but I need just one more thing to make it perfect. Here is the setup I have:

-mesh (with texture, unlit shader)
-overlay (with texture that is mask, where you can paint where you can't, it uses SpriteMask/Mask shader)
-mask (SpriteMask component)
- position (place where you place sprites with SpriteMask/Default shader)
- position (place where you place sprites with SpriteMask/Default shader)

everything works great except I don't have any blending, I can control with overlay object and it's SpriteMask/Mask shader where you can paint but it doesn't support any alpha, there are some params on shaders but it seems that they can't workout what I need. So is it possible to have a shader which will take alpha into account to mask out things? That would be perfect!

Thanks for great asset!

 

Hi pretender,

I'm happy to hear that SpriteMask works for you.

SpriteMask works on Stencil buffer, therefore unfortunately it doesn't support alpha values.

If you need more help, just let me know.

Thanks.

 

Ok, Sprite Masks are working by sorting order. But how can I use them if 2 objects can move across Z-axis so one becomes overlapped by another? Actually I've got zero sorting layer for all sprites, so object overlapping is managed by Z-axis when my objects are moving. It's general case I suppose. If I will use sorting order my objects will be overlapped in a wrong way.

Thats why I'm stucked with using Sprite Masks.

 

Hi hippogames,

Sorry for the delay. I was quite busy last week. Unfortunately, Sprite Mask works only on sorting layers and sorting orders. But you can make and workaround for this by creating an script which would change sorting order depending on Z axis value.

If you need help with that script let me know.

Cheers!

 

There is a problem in the version of Unity2017.2. How to solve it?

 

Hi adbaiducom,

Can you send me an example scene of your problem with more details about it?

Thanks!

 

Hello. I'm having a a couple of issues. When I remove a masked sprite from the hierarchy it stays masked (this even happens in the example scenes). Calling myMask.updateSprites(theObjectIDontWantToMaskAnymore.transform) doesn't fix it.

Also I have a TextMeshPro at the same level of the hierarchy (not a child or descendant of the mask) that gets masked, and I can't get it to unmask.

So, my first two questions are:
How do I remove something from the mask after it's been masked?
How do I keep objects from getting masked in the first place if I don't need them to be?

And my last question is, after I get the masking off, is it stored anywhere what the original Shader was on the object, before it was changed to a masked shader, or do I need to store that myself somewhere.

EDIT: And an even more last thing I wasn't originally going to post because I couldn't reproduce it, but now I did. This asset seems to corrupt the undo buffer somehow. I can't tell you the exact steps to reproduce it, but basically if you change the hierarchy a bunch of times, and change the shaders on different objects a bunch of times, and then undo all the way back to the beginning, the scene isn't the same.

 

Hi,

Sorry for that delay. I was really busy this week.

1) Masking is done via Material, so removing the sprite from masking hierarchy won't disable masking. You have to assign a new material (without Stencil buffer parameters).

2) If all objects use the same material, than all of them will be masked. You have to use option:
SpriteMask -> [Advamce] -> 'Force individual material on childs'. That will force all masked objects to use custom material and will leave all other object unchanged.

3) You need to restore you shader yourself.

4) I will look in to it.

I hope this will help you.

Cheers!