Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

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

Discussion in 'Assets and Asset Store' started by DominoOne, Feb 16, 2015.

  1. Ibukii

    Ibukii

    Joined:
    Jun 23, 2016
    Posts:
    45
    Yeah it probably did. I'm trying to do the UI Menu but I can't seem to get the mask working. I can't find a mask quad to but in mesh filter. If I'm only using it to show picture at the corner of the screen, do I mask the Image or the whole screen?

    Also does it work on Screen Space - Camera?
     
    Last edited: Sep 6, 2016
  2. Ibukii

    Ibukii

    Joined:
    Jun 23, 2016
    Posts:
    45
    The mask isn't masking properly, I have attached the issue and the mask used. Please advise! Thank you so much Masking issue.png Image Mask.jpg

    If you have the time, can I ask for you to run me through the mask creation steps? I am having trouble replicating the mask from the samples to my projects
     
    Last edited: Sep 6, 2016
  3. DominoOne

    DominoOne

    Joined:
    Apr 22, 2010
    Posts:
    433
    Hi Ibukii,

    When you tried reusing the samples, have you used the sample, which has the Mask with a RectTransform or a regular Transform? Because most of the samples have Transform, whereas one sample has a RectTransform, which you should use here.

    To answer your first question: it's probably better to mask the image in the corner instead of the whole screen.
     
  4. Ibukii

    Ibukii

    Joined:
    Jun 23, 2016
    Posts:
    45
    I fixed the issue. I was trying to incorporate the alpha mask with another scrollRect which also had a mask I was not aware of. After removing the other mask, it works as intended.
     
  5. DominoOne

    DominoOne

    Joined:
    Apr 22, 2010
    Posts:
    433
  6. Nickromancer

    Nickromancer

    Joined:
    Jul 31, 2016
    Posts:
    92
    Hi DominoOne,

    I have asked for help before but dropped this problem when focusing on other aspect on my game.
    Now, I am back to the issue and trying to use your mask component on a prefab and I need help.
    (already updated to latest version)

    I test your mask on editor which is doing fine for general usage.

    However, my game require the shape of the mask to be decided in runtime so I put the mask in a prefab and try to update it when the game is playing.

    I copied ApplyMaskToChildren(), FindSuitableMaskedMaterial() and GetAllReusableMaterials() from MaskEditor to Mask.cs with code change:
    Mask maskTarget = (Mask)target; // original
    Mask maskTarget = this; // changed

    After I created the prefabs, I do the following:

    1. get the mask's MeshRenderer and change the material to the desired shape.
    (I tried both .materal and .sharedMaterial but with the same result)

    2. call ApplyMaskToChildren() on the mask component so it start updating the siblings.
    The Image component now have material changed to [Default UI Material Masked]

    After that I expect it to work like in the editor but the result is that every siblings are not visible.
    Any help would be appreciated.

    P.S.
    I have notice 1 thing not suppose to happen. Even if the mask work during editing, after I Apply the prefab and remove the prefab from scene and drag the prefab back to scene, the masking in the prefab is incorrect again and I will have to press the [Apply Mask to Siblings in Hierarchy] button to make it looks correct again.
     
  7. Nickromancer

    Nickromancer

    Joined:
    Jul 31, 2016
    Posts:
    92
    I think I solved the prefab problem. In the previous implementation. I called ApplyMaskToChildren() right after instantiated the prefab and setting the mask material. After moving the call to Start() of the mask.cs. Things are now working as expected. :p

    Btw, I just found a bug.

    It is possible to have null ref exception when (changing parent) moving the mask GameObject to another parent tree which don't have canvas.
    I added a null check inside the Update() around mask.cs line 220 to avoid the error. Not sure if I am doing it correctly. Please take a look about the issue.

    Canvas currCanvas = UIComponent.canvas;
    if (currCanvas != null) // <<< added to prevent null error
    {
    if ((currCanvas.renderMode == RenderMode.ScreenSpaceOverlay) || ...
     
    Last edited: Sep 20, 2016
  8. DominoOne

    DominoOne

    Joined:
    Apr 22, 2010
    Posts:
    433
    Hi there,

    I'm glad that you adapted it to your own needs! Although, there is a much simpler way without any modification to the Alpha Mask code: you can simply iterate over all materials of the Mask siblings (and their children) and just change the Mask texture during run-time. This will change the Mask image on all masked elements. Does this sound more convenient?

    Regarding the issue that you've found: I have marked it down and will look into it when we're making the next update.
     
  9. unity839

    unity839

    Joined:
    Mar 28, 2014
    Posts:
    9
    Hello, I'm using the plugin to mask a Gameobject with a spriterenderer component (I have a regular gameobject that has two children: the sprite and the mask object as siblings to apply the effect) and it works fine as long as the container doesn't move at runtime. If I move the container during runtime it seems as if the mask doesn't move with it, so my sprite ends up disappearing unless I return it to its original position. How can I move a masked sprite during runtime without losing the masking effect? Thank you.
     
  10. DominoOne

    DominoOne

    Joined:
    Apr 22, 2010
    Posts:
    433
    Hi unity839,

    Do I understand correctly that you are moving the parent object of the two siblings? If that is the case, it should definitely work. Does it happen in the editor or in a build?
     
  11. unity839

    unity839

    Joined:
    Mar 28, 2014
    Posts:
    9
    Thank you DominoOne for your prompt reply. Hm ok. I see what was happening, it works properly when the gameobject is in the scene hierarchy from the start, but it doesn't work when I instantiate it as a prefab at runtime.

    When I create an instance of the prefab that contains the structure (parent /-> sibling-mask - sibling-sprite) at run-time, it loses track of the mask components (mesh filter: [none] mask script: please attach MeshFilter and MeshRenderer. Also assign a texture to MeshRenderer. It doesn't show the Mask Material either) so it doesn't update when it moves around. i get the error:
    NullReferenceException: Object reference not set to an instance of an object
    ToJ.Mask.Update () (at Assets/Alpha Masking/Mask.cs:340)

    Ive read some of the threads above and I made sure the material the sprite uses sits under Prefabs/Resources/... but the Mask component says "Mask Material", that one I can't find where it is located?

    What is the normal process of creating a prefab that has the masking feature without losing its components?
     
  12. DominoOne

    DominoOne

    Joined:
    Apr 22, 2010
    Posts:
    433
    Hi again,

    Could you try following these steps:

    1. Create the Mask and the Sprite that you will mask (as you have done already).
    2. Manually create a material (within the assets) and assign the "Alpha Masked/Sprites Alpha Masked - World Coords" shader to it.
    3. Drag this material into the material slot of the Sprite that you've created in step 1 (the one that you want to mask).
    4. Create another material and assign the "Unlit/Transparent" shader to it. Also assign the Mask texture to this material.
    5. Drag this material into the material slot of the Mask that you've created (on the Mesh Renderer of the Mask).
    6. On the Mesh Filter of the Mask object choose "Quad" (the standard Unity mesh object) instead of the already assigned mesh.
    7. Hit "Apply Mask to Siblings" on the object with the Alpha Mask. You should now see the Sprite being masked as it should be.
    8. If everything worked so far, create a prefab from the hierarchy. You can now instantiate the prefab, and it should work as intended.

    Please let me know if that works :)
     
  13. unity839

    unity839

    Joined:
    Mar 28, 2014
    Posts:
    9
    Thank you for the detailed reply! that worked :)

     
  14. DominoOne

    DominoOne

    Joined:
    Apr 22, 2010
    Posts:
    433
    No problem! I'm very glad I could help.
     
  15. PowerhoofDave

    PowerhoofDave

    Joined:
    Jun 26, 2015
    Posts:
    75
    Hey DominoOne, Great asset :D

    Quick question, is it possible to add masked sprites at runtime from a script, or do i need to apply the mask in the editor? For example- is it possible to add procedural blood splashes on a wall, masked to the wall sprite?
     
  16. DominoOne

    DominoOne

    Joined:
    Apr 22, 2010
    Posts:
    433
    Hi PowerhoofDave,

    That is definitely possible! :) Although, when the masked objects are instantiated from prefabs, you have to create their materials on your own. If all splashes use the same Mask (the wall), you can manually create a single material (within the assets), assign the "Alpha Masked/Sprites Alpha Masked - World Coords" shader and then use it on the Sprite that you're masking (if it's a 3D quad, you should use the other masked shader). After doing this you should be able to instantiate the splashes as siblings of the Mask, and they'll be masked according to its shape :)

    Have in mind that the Mask has to be a separate object than the actual wall. You can surely use the same sprite/texture, but you'll have to create a different object in the scene for the Mask itself.
     
  17. PowerhoofDave

    PowerhoofDave

    Joined:
    Jun 26, 2015
    Posts:
    75
    Thanks! I got that working and made a component to add a sprite to a mask at runtime. Here's the code in case anyone else finds it useful - http://pastebin.com/xrNFK4m5 Let me know if I'm doing anything stupid there ;)

    Edit: Here's what I'm using it for- http://i.imgur.com/PrEIL41.gif For the ground I'm using a render texture to create a mask from the camera view... Fun!
     
    Last edited: Oct 7, 2016
  18. DominoOne

    DominoOne

    Joined:
    Apr 22, 2010
    Posts:
    433
    PowerhoofDave,

    Looks perfectly fine to me! :) Hopefully, other users will be able to use this in the future. Or we might even include such functionality in the plugin itself - I've had this thought for a while now.
     
  19. Galen_Relish

    Galen_Relish

    Joined:
    Oct 7, 2016
    Posts:
    4
    Hi DominoOne,

    We are using Alpha Mask to mask 2d sprites in our game. The masking works great in Editor but upon making an iOS or WebGL build, the masking seems to break. In our scene we instantiate prefabs that have been set up with masks. They seem to be set up properly because everything works 100% in the editor. Upon first instantiation the masking works great. At some points in the game some of the hole GameObjects get disabled, repositioned and then enabled. This is where the masking breaks. The hole GameObject hierachy is Hole(parent) -> mask(Child), astronaut(Sibling). The image below shows the expected behaviour in the center hole and the actual behaviour seen in the two outer holes. In addition, the second image is seen in both chrome and firefox dev consoles. Maybe you've seen this before?

    Unity ver 5.4.1f1
    Chrome ver 53.0.2785.116 (64-bit)
    Firefox ver 49.0.1

    Any help with this would be greatly appreciated. Awesome plugin!

    Screen Shot 2016-10-07 at 4.56.34 PM.png Screen Shot 2016-10-07 at 4.36.32 PM.png
     
  20. DominoOne

    DominoOne

    Joined:
    Apr 22, 2010
    Posts:
    433
    Hi Galen_Relish,

    Thanks for using our plugin and thanks for the kind feedback! :)

    Could you try moving the masked shader folders (the ones within the Alpha Mask hierarchy in the Assets) to the Resources folder? Does that help?
     
  21. Galen_Relish

    Galen_Relish

    Joined:
    Oct 7, 2016
    Posts:
    4
    Ah yes I've run into Unity not including shaders in builds before. I also went back and reread this forum and thought to try that. Guess I should have done that first :p. Anyways works perfectly on iOS and WebGL. Thanks for the quick reply and again, awesome plugin!
     
  22. VinnieH01

    VinnieH01

    Joined:
    Sep 3, 2014
    Posts:
    32
    Hello,

    I just bought your asset/plugin and trying to implement a fov effect uning a rendertexture as in one of your samples. I understand everything except one thing : what should I set the Tiling and Offset to in the Sprites Alpha masked material?

    Inspector.png
     
  23. DominoOne

    DominoOne

    Joined:
    Apr 22, 2010
    Posts:
    433
    Hi VinnieH01,

    You shouldn't manually set anything on this material - the Mask script will handle this for you :) Use the values on the Mask object itself (you'll see that there is no tiling or offset there at all).
     
  24. VinnieH01

    VinnieH01

    Joined:
    Sep 3, 2014
    Posts:
    32
    Hi,

    Now I have no tiling and no offset, but it looks like this now : Image.png You can see that it looks nothing like my mask object to the left, what am I doing wrong?
     
  25. VinnieH01

    VinnieH01

    Joined:
    Sep 3, 2014
    Posts:
    32
    Here's the inspector of the mask btw : Insp.png
     
  26. VinnieH01

    VinnieH01

    Joined:
    Sep 3, 2014
    Posts:
    32
    And here is the black sprites inspector:

    black.png

    Its using 32 pixels per units btw
     
  27. VinnieH01

    VinnieH01

    Joined:
    Sep 3, 2014
    Posts:
    32
    Hello again,

    Sorry I didn't know that they had to be under a parent gameobject :) Awesome plugin btw
     
  28. DominoOne

    DominoOne

    Joined:
    Apr 22, 2010
    Posts:
    433
    Hi,

    So, do I understand correctly that it works as intended now? :)
     
  29. VinnieH01

    VinnieH01

    Joined:
    Sep 3, 2014
    Posts:
    32
    Yes it does :)
     
    DominoOne likes this.
  30. brownce

    brownce

    Joined:
    Sep 14, 2015
    Posts:
    18
    Having a bit of trouble using this asset. The example scene doesn't really give me an example of what I need and even when I try to copy something from it to another scene, it breaks and gives odd results.

    I have several scrollviews in the scene where there is a bunch of objects to form a list of boxes. These are all image components, buttons, etc. They sit in the content part of the scroll view. The content window has a grid and content size fitter on it.

    Because the artwork has an "inset box" that has curved sides, I need the mask to give curved sides as well so that as the player scrolls, the sides of the boxes are masked to the curved edges.

    Thank you for your help.
     
  31. DominoOne

    DominoOne

    Joined:
    Apr 22, 2010
    Posts:
    433
    Hi brownce,

    Thanks for using our plugin! Have you tried checking out the ReadMe.txt file within the package itself? There are some simple steps that you have to complete to mask the objects. Let me know if something is still unclear :)
     
  32. brownce

    brownce

    Joined:
    Sep 14, 2015
    Posts:
    18


    I read your readme, it really didn't help me since it just says put a mask as a child and then hit the button. So I added the empty gameobject to my hierarchy and added an alpha mask to it. I have a white png file that matches the "inset" image to be able to mask the box area, so I assumed this was suppose to go into the texture select box.

    Once I hit apply mask, this is what I get. Note that Content has a grid and a content size fitter on it. I played around with this for several hours after we purchased it at work, but kept getting weird results. (This is just the one I got to show you an example).

    Thanks for your help.
     
    Last edited: Oct 25, 2016
  33. DominoOne

    DominoOne

    Joined:
    Apr 22, 2010
    Posts:
    433
    Which object is the one with the Mask? Is it "GameObject"? If so, shouldn't it be a sibling of the "Content" object instead of being its child? Because now the Mask is placed as an item in the grid instead of covering the whole list.
     
  34. brownce

    brownce

    Joined:
    Sep 14, 2015
    Posts:
    18
    I was following the readme which says to put them all under the same object. But even as a sibling it is giving me odd results with the lines and not masking.

    The viewport has the standard unity mask on it, which once I try to apply your mask, it breaks. So I removed that mask and tried to apply your mask and it doesn't mask and I get those weird lines.



    Here is what I got with doing it as a sibling. The mask is suppose to mask it so the sides of the achievement boxes curve with the shape of the inset box.
     
    Last edited: Oct 25, 2016
  35. DominoOne

    DominoOne

    Joined:
    Apr 22, 2010
    Posts:
    433
    This is pretty odd :) Looks like something is still wrong with the setup, but it's hard to tell without seeing the scene. Are you using the alpha channel of the Mask image or the color? I mean, is it opaque in the center and transparent around the edges or is it white in the center and black around the edges?

    In any case, would it be possible to get a stripped down project with only this list in a scene? I would be glad to check it out myself.

    Regarding Unity mask, I have a fix that enables it, when using our mask, but it's not yet published. Let me know if you need it, I'll send it to you personally.
     
  36. brownce

    brownce

    Joined:
    Sep 14, 2015
    Posts:
    18
    Ok, I think I finally got it. The mask had white that went all the way to the edge of the image. In photoshop I expanded the image and added a larger black border. This currently appears to have fixed it I think. I'll try it on a few more of the scroll views and see what happens.

    However, I am running into another issue. All my text is turning black. (It is normally white). Is there a way to fix this?

    I also notice that when I click the button to bring up the achievements with your mask on, there is a several seconds delay for it to pop up. (I can count to 3 in most cases).

    Looking into it, my draw calls jump about 60-70 when I open this box with your mask on, but using it without your mask I'm adding less than 10. This may be related to the black text?
     
    Last edited: Oct 25, 2016
  37. DominoOne

    DominoOne

    Joined:
    Apr 22, 2010
    Posts:
    433
    Great! :) Regarding text, which version of Unity are you on?
     
  38. brownce

    brownce

    Joined:
    Sep 14, 2015
    Posts:
    18
    (Added to post above, but put here in case didn't notice)

    I also notice that when I click the button to bring up the achievements with your mask on, there is a several seconds delay for it to pop up. (I can count to 3 in most cases). Without, it's almost instant.

    Looking into it, my draw calls jump about 60-70 when I open this box with your mask on, but using it without your mask I'm adding less than 10.

    I am on Unity 5.4.0f3
     
  39. DominoOne

    DominoOne

    Joined:
    Apr 22, 2010
    Posts:
    433
    I managed to pinpoint the issue with the back text - it's actually a little bug in our plugin. I'll write you a private message with a link to an updated script.

    I'm not sure what's happening with the lag and draw calls, though. I would have to see and test your scene to figure it out.
     
  40. SirDrMcHurtz

    SirDrMcHurtz

    Joined:
    Jun 9, 2015
    Posts:
    3
    I have just picked up the plugin which looks really nice and useful for the most part, but I've run into the same issue that brownce is having with the text always rendering black and some major performance hits when instantiating objects that are masked.

    I'm guessing this logged as a warning almost 1000 times when it does happen which is probably the main cause:

    Material Default UI Material Masked doesn't have _Stencil property
    UnityEngine.Canvas:ForceUpdateCanvases()

    Is this fixed with your updated script?
     
  41. DominoOne

    DominoOne

    Joined:
    Apr 22, 2010
    Posts:
    433
    Hi SirDrMcHurtz,

    I've sent you a private message :)
     
  42. jhollands

    jhollands

    Joined:
    Apr 10, 2014
    Posts:
    11
    Hey DominoOne,

    I've spent some time getting your masks to work the way that I want them to in my project. I've just hit a barrier with having masks within masks however — I have a UI within one mask (has to be in a mask), and one of the elements inside it is a scrollable list using a scrollRect.

    I can only seem to mask one item or the other — is there no way to mask it the way that I like?
     
  43. DominoOne

    DominoOne

    Joined:
    Apr 22, 2010
    Posts:
    433
    Hi jhollands,

    Unfortunately, it's not possible to apply multiple Masks to the same visual element. But you could use a RenderTexture to render all of the composite masks into a single image and then use it as a single Mask. There is a similar sample in the package. Would that help?
     
  44. jhollands

    jhollands

    Joined:
    Apr 10, 2014
    Posts:
    11
    Sounds like it may be a solution — which sample scene uses it? Can you link me to anything that may help me achieve this?

    Cheers
     
  45. DominoOne

    DominoOne

    Joined:
    Apr 22, 2010
    Posts:
    433
    It's in Assets\Alpha Masking\Samples\SampleScene.unity

    The particular sample is called "Multiple Masks Sample" (just enable that object in the scene and disable any other samples within the same scene). Under that object there is "Fog of War Alpha Setup", which contains the RenderTexture rendering setup (black and white images, which are rendered with an additional camera) and creates a texture called "Fog of War Alpha Texture". Finally, this texture is used as the Alpha Mask.
     
  46. jhollands

    jhollands

    Joined:
    Apr 10, 2014
    Posts:
    11
    Thanks for your help — I'll give it a go.
     
  47. ryo0ka

    ryo0ka

    Joined:
    Sep 27, 2015
    Posts:
    37
    Hello DominoOne, thank you a lot for this convenient asset. It's really widening my vocabulary.

    I'm trying to use Alpha Mask on Android, but Default UI Material Masked doesn't seem to survive serialization; masked objects are invisible, and I get this log every frame:
    "Shaders necessary for masking don't seem to be present in the project."

    Is there a way to save the material?

    Best,
     
    Last edited: Nov 16, 2016
  48. DominoOne

    DominoOne

    Joined:
    Apr 22, 2010
    Posts:
    433
    Hi ryo0ka,

    That is a known issue: just move the Alpha Masked shaders (which are in the package) to the Resources folder. Let me know if that helps.
     
  49. ryo0ka

    ryo0ka

    Joined:
    Sep 27, 2015
    Posts:
    37
    DominoOne,

    Thank you for your suggestion - replacing the shaders into the Resources folder solved both issues, though it's still a bit unstable: the Canvas that contains those components flicks on a device. This could be another shader issue - what do you think may be causing this?

    Best,
     
    Last edited: Nov 16, 2016
  50. DominoOne

    DominoOne

    Joined:
    Apr 22, 2010
    Posts:
    433
    That's strange. We haven't yet run into situations when it works in the editor and standalone builds, but doesn't on mobile. It is possible that there are some kind of depth issues or something like that, just because Android has less precision? In any case, I would be happy to look into it if you sent me your project (or a stripped down version).