Alpha Mask: UI, Sprites, Tilemaps, Particles, 3D

By the way, an update with full "Screen Space" UI support, as well as full RectTransform support (including pivots, anchors etc.) is out!

 

Just installed and getting a script error saying showMaskGraphic definition doesn't exist. I comment out so I can continue. Is this field supposed to be there?

ExtensionMenuOptions.cs file:

Mask listMask = scrollSnapRoot.AddComponent<Mask>();
//listMask.showMaskGraphic = false;

 

Hello glowe,

I am sorry, but ExtensionMenuOptions.cs is not included in our package (and I don't know where it's from), so I can't say anything about that line.. However, I suggest to open Mask.cs and MaskEditor.cs and wrap the class in an additional namespace. We recently discovered that our class name has issues when some other plugins are installed, so we're planning to release an update with a namespace added sometime very soon. So, you could do that in advance.

 

That must have been it. There was probably another Mask class in some other package that got overwritten.

 

Ok, another question: I see the rotations only work for world coords. Is there a chance to get local coord rotation? I have a sprite that I'm billboarding to perspective camera and the masking won't work right with something like that.

 

Hi again glowe,

I'm not sure if I understand what you mean. Could you send me a screenshot through a private message or the support e-mail from the Asset Store?

 

Ah, it's ok. I just ended up using the mask in a canvas set to screen space, so, problem solved. Thanks for being on the ball with your replies

 

Great

 

Hello,

I've tried in Unity editor and it works perfect but not in my iOS devices. May I know if it support for mobile devices or do i miss out any thing to set? Thx

i.e. it keeps showing this exception:

NullReferenceException: Object reference not set to an instance of an object
Mask.Update () (at Assets/Alpha Masking/Mask.cs:230)

 

Hello kelvin12323,

It definitely supports mobile platforms, but Unity sometimes excludes files from builds on some of them. Could you try moving the two shaders (Sprites-Alpha-Mask-WorldCoords.shader and Unlit-Alpha-Mask-WorldCoords.shader) to the Resources folder? Does that help?

 

Ohhh great it work perfectly! thank helping

 

Hey,

Interested in buying this plugin, but mainly want to use this for 3D models. Could you post some examples of this?

 

Hi guildwriter,

Thanks for your interest in our plugin! There are quite a few use cases for 3D objects, e. g. the cartoon ship in the presentation video of our package is actually a 3D quad. If you're thinking about something more advanced, could you describe your own use case (or maybe even add a screenshot or two)?

 

Hi,

in my project (2D) i have a player that cast fake shadow on platforms. all are 2D sprites.
i need that the shadow sprite will masked out where the platform ends...
see attached image to make it clear.


is that possible with your asset?
(keep in mine that there are several platforms sprites and the shadows can't be child object of any of them...)

thanks,

Haim.

 

Hello haim96,

This is possible with some setting up on your side

What you could do is render the platforms as black sprites (using a replacement shader or simply setting the color of the platform sprites to black before rendering them) into a RenderTexture with an additional camera, whose background color would be white. You'd render it in each frame. Then you would have a full screen black and white mask, which you could make a sibling of the shadow sprite and use it as the Alpha Mask of the shadow. It's not very complex when you get the idea: the masking itself is straightforward, the only trick is to render the mask from the platforms.

In the package, there is a sample that uses a RenderTexture to render multiple sprites into one image, which is then used as the Alpha Mask. No replacement shaders or color resets, but it might be a good starting point.

 

I would have like to buy this plugin today since it's on sale. But since i exclusively rely on TextMeshPro I can't really use it for anything. What's the latest info on official support for TMPro?

 

Hi summerian,

We have looked into supporting TextMesh Pro, and it looks like we will be able add that support, but it's not a trivial task, since TextMesh Pro is structurally quite complex. Therefore, I still cannot say when that support will be added, even though now I am more confident that it will be added someday

 

ok, thanks for the update. will be keeping an eye on it.

 

Hi, yesterday I bought this asset, it is really cool but I found a problem; I'm using it for highlight animation on a logo text with UGui; in your demo scene the Logo examples are Sprite Render but I'm using a Canvas for my logo. I managed to use it with Rect Transform with top-right Anchor but I notice that in the script "Logo Specularity Animator" the Start X and End X are different if I change resolution of the screen; It seems that doesn't scale with Canvas size, breaking the highlight animation. Am I doing something wrong or it is the normal behaviour?
Thanks for help!

 

Hi twiggyash,

Thanks for the positive feedback, we're glad that you like it

The "Logo Specularity Animator" script is just a sample script, and it's extremely basic (just a few lines of code). You should probably duplicate it, then edit and customize it to your own needs. If you're using a Canvas, it's probably better to use a RectTransform on the Mask object (instead of a regular Transform, which is used in that sample). Then you can animate it in the Canvas coordinates.

 

Thanks for reply. Sure I'm already using RectTransform for Mask object but the script seems that doesn't adeguate the "new" X for different resolution. So if, for example, the animation x Starts in 0 and Ends in 500 with 1920*1080 resolution, in 1024*768, for example, I have to change manually the End x to 300 to have the same result.
This is a huge problem with mobile devices that have different aspect screens.
How could I modify the Animator script to adeguate Start X and End X with each different resolution of the screen mantaining the same result? Shouldn't it "auto-resize" proportionally with Canvas (different) sizes as everything else does?
Thanks again!

 

Hi again,

I think you should modify RectTransform.anchoredPosition instead of Transform.position. Then it should automatically adjust to your Canvas, like the UI Image itself

 

You're right! Thanks a lot!!!

 

Hi, have you managed to experiment a bit with prefab support? I am not able to get a prefab to work. Currently I switched to a pool of objects I can turn on and off with the default setup. What I tried:

1. create a normal masked UI image as you describe - this works fine.
2. created a new Unlit/Transparent material and applied mask texture
3. on mask Mesh Filter replaced with Quad
4. on mask Mesh Renderer added the material made in step 2
5. hit Apply Mask button
6. Instantiate from prefab doesn't like it - mask not applied
7. Actually, hitting play in the editor after step 5 doesn't like it either - mask disappears

Please let me know if I am making a mistake somewhere. Another idea, maybe take the contents of ApplyMaskToChildren() from the editor class and put it in the Mask class? This way people can call it from code as needed (if it can work that way...).

 

Hi glowe,

I am sorry that you're having trouble setting it up! I think you're not doing it completely right. You shouldn't mess with the Mask object at all (no need to create a Mesh Filter, apply a custom material or do anything else with it). Try this:

1. Create a UI Image (same as your step 1).
2. Create an empty sibling and add the Alpha Mask component to it. It should populate the mask with a Mesh Filter, Renderer etc. Assign the Mask texture/image that you want to use for masking.
3. Create a material and assign the "Alpha Masked/Sprites Alpha Masked - World Coords" shader to it (not Unlit/Transparent).
4. Drag this material into the material slot on the UI Image that you've created.
5. Hit "Apply Mask to Siblings" on the object with the Alpha Mask. You should now see the UI Image being masked (if the Mask itself covers it, you can untick "display mask" on it). Both, in the editor and after hitting Play.
6. If everything worked so far, create a prefab from the UI Image. You can now instantiate as many instances of it as you need. As long as they are siblings (or children of siblings) of the Mask object, they should be masked properly

Let me know if that helps.

 

Oh, I see what you mean by prefabs. I wanted to do something like this hierarchy:

Canvas
-panel
--image
--mask

(So, mask and image are children of panel.) I wanted to create a prefab of "panel" from the above hierarchy and reuse that in multiple places. That means the mask should be part of the prefab. That's why I was changing the MeshFilter and MeshRenderer material. Also why I suggesting if I could call that ApplyMaskToChildren() method from runtime. Hope it's not confusing - I can describe better if you want.

 

OK, now I get what you mean Then you were on the right track. So, what you need to do is complete the first 5 steps from my list and then the ones that you wrote. I've just tested it, and it seems to work.

 

I tried it and it does work. But, it's not quite there yet. When I have multiple instances in the scene, they all share the same mask (see image). I have 2 callouts which need to be masked separately. Basically, I have to create multiple mask target materials for multiple callouts so they don't impact each other.

I messed around with the source, but didn't find a good solution to the problem. It's usually supposed to be simple as changing Renderer.material instead of Renderer.sharedMaterial. But, that is not the case for UI Graphics. Currently, they are all shared and I am not able to figure out a way to separate the instances in code. So, my above solution is simpler for now...

http://forum.unity3d.com/threads/modifying-the-shader-properties-of-only-one-object.378442/

Though, from all the things I tried out, I might suggest changing Update() to LateUpdate() in Mask. When you're trying to rotate other UI elements along with a mask, LateUpdate() will make sure everything moves smoothly together.

 

You are absolutely right about everything. I will give it some thought, whether we could make a simpler solution and build it into the plugin itself. Thanks for all the explanations!

Your last idea is also pretty good and logical

 

Is fast or moblie platform friendly?

 

Hi Hyrio,

Yes, the plugin is fast enough and is mobile friendly

 

Hey there,

is it somehow possible to combine the default ui stencil masks with your custom mask materials?

Just imagine a World Space Canvas whose content is masked with the unity mask component and inside are soft masked elements with your alpha masking. Currently the soft masked elements ignore the unity mask and i get warnings, that some elements dont have stencil properties.

 

Hello,

If you drop me your invoice number to a private message, I could see if I can make a quick experimental patch for that.

 

I just purchased this plugin from asset store. Only test simple things with it.

There is a serious problem about the mask.
I have created a simple hierarchy like this:

ContainerA
--mask
--imageA

It mask the imageA fine but as fast as I add another mask outside this hierarchy, the mask in ContainerA stop working. I think the 2nd mask shared something with the 1st mask.
If only one mask can be active at a time, its useless for me.

Please help.

 

Hello Nickromancer,

The plugin definitely supports multiple masks in the same scene So, let's try to find the cause of the issue.

Have you manually created materials (with the masked shader) for the masked elements? Is it possible that you are reusing the same material for all of the masked images (even if they are in different hierarchical/masked branches)?

By the way, you're using prefabs, right?

 

Is this right working on Android device ?

 

Hi HoRang_,

Yes, it works on Android and other mobile devices.

 

Is it possible to each mask are affect to only their child on UGUI?
- Mask 1
-- Child ( affected by Mask 1 )
- Mask 2
-- Child ( affected by Mask 2 )

 

HoRang_,

Our Alpha Mask masks siblings (and children of siblings), not children. But you can definitely create a setup that looks like this:

- Empty Parent 1
-- Mask 1
-- Visual (affected by Mask 1)
- Empty Parent 2
-- Mask 2
-- Visual (affected by Mask 2)

I hope that helps

 

Hi started looking at buying this asset but only interested in using it with Text Mesh Pro. I'm sure you're sick of hearing questions about whether it's compatible or not but just want to let you know you'll have one more customer picking this up when text mesh pro is supported.

Also a few more video examples of usage and capabilities would be nice.

 

Hi christougher,

Thanks for the feedback!

 

Hi,

I'm using the Unity UI module. I have a ScrollRect with UI Image inside. The mask is sibling to the Content and it works fine after I click "Apply Mask to Siblings in Hierarchy". However, some more UI Images are added in the ScrollRect Content during runtime. Is there a way to call ApplyMaskToChildren() during runtime or achieve what I need ?

 

Hi xavier-marleau,

I'm not sure how you're instantiating the UI Images, but it's best to create a prefab, set it up with all the masking and then instantiate it into your ScrollRect. Here are the steps to do that:

1. Create a UI Image.
2. Create the Mask as you are doing now.
3. Manually create a material (within the assets) and assign the "Alpha Masked/Sprites Alpha Masked - World Coords" shader to it (not Unlit/Transparent).
4. Drag this material into the material slot on the UI Image that you've created in step 1.
5. Hit "Apply Mask to Siblings" on the object with the Alpha Mask. You should now see the UI Image being masked.
6. If everything worked so far, create a prefab from the UI Image that you have just set up. You can now instantiate as many instances of it as you need. As long as they are siblings (or children of siblings) of the Mask object, they should be masked properly within your ScrollRect

Let me know if that works!

 

Thanks a bunch for the quick reply!

I tried creating a new prefab from the UI Image and tried Applying the changes to an existing prefab and both gives me the same result.

The "Default UI Material Masked" is applied and work on the UI Image in the scene, but doesn't apply to the prefab. Even when I click "Apply" to save changes to the prefab, the material name stays bold, like its been edited, but stays unsaved. I checked the material of the Prefab in my Assets too, it says "None".

Edit: Found out why it does not Apply. The "Default UI Material Masked" assign to the UI Image is existing in the scene only, not the Assets. Therefore, it cannot be saved to the prefab.

I manage to make it work to apply the material at runtime. Basically I created a wrapping class MaskWrapper and added the ApplyMaskToChildren() method from MaskEditor to it. Also created ApplyMask() based on ApplyMaskToChildren() so it only set the right material to the Image when its added to the ScrollRect.

 

Are you absolutely sure that you've performed steps 3 and 4?

 

Oh I misread step 4! I was dragging the material to the Mesh Renderer Materials slot.

Unfortunately, this does not solve my problem.

As soon as I assign my material to the UI Image, it mess up the Tiling and Offset x and y values of the material. I'm trying to change to values but it does not change. Furthermore, the Image changed for a random piece of the sprite sheet it is in...

 

Ok got it! I had to create two materials. One for the mask, one for the UI Image inside it.

My mistake, thanks a lot for the help!

 

xavier-marleau,

Great that you managed to sort it out! On the other hand, as long as the Mask is in the scene (not in a prefab), you don't need to create a material for the Mask - it will be created automatically "under the hood". However, if you create a prefab out of the Mask, then yes, you need a material for it.

 

Hi, i need help to solve the "Application.IsPlaying" issue in the code of the asset. I know it's not your problem, but I would like to have a solution or a replacement so I can replace the code and make the asset work. Thank you.

EDIT: To anyone who has the issue, changing it to UnityEngine.Application.IsPlaying solves the problem.

 

Hi Ibukii,

It's great that you managed to find a solution Why was the problem introduced, though? Did it clash with some other plugin maybe?