Search Unity

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

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

  1. DominoOne

    DominoOne

    Joined:
    Apr 22, 2010
    Posts:
    413


    Alpha Mask
    is a set of shaders and scripts that are used for alpha masking.

    Various masking components exist, but they usually require Unity Pro (for Unity 4) and are unable to use semi-transparency (soft masks, gradient masks, anti-aliasing, etc.). Alpha Mask component, however, solves these issues and provides a mask, similar to Flash or Photoshop.
    • Works with Unity UI (uGUI) Images and Text, Sprites and 3D Transparent Unlit objects.
    • Soft, anti-aliased, gradient and semi transparent masks supported.
    • All script and shader sources included!
    • Extremely easy to use.
    • Mask textures can be clamped horizontally/vertically.
    • Easy mask positioning in the Editor.
    • Supports mask moving, scaling, rotation, UV scaling, UV offset.
    • Masks can be freely rotated and mapped on any direction.
    • Can be used for UI or 2D games (including either Unity UI, Sprites or 3D Quads).
    • NO Unity Pro needed!
    • A sample with multiple alpha masks on a single sprite included (using a RenderTexture).
    Video presentation:


    Support e-mail (we would love to answer your questions or receive any feedback about the component): support@tagofjoy.lt
     
    Last edited: Oct 15, 2018
  2. b4c5p4c3

    b4c5p4c3

    Joined:
    Jan 4, 2013
    Posts:
    537
    I'm subscribing to this thread. This looks very useful for my next project.
     
  3. DominoOne

    DominoOne

    Joined:
    Apr 22, 2010
    Posts:
    413
    Hi b4c5p4c3,

    Thanks a lot. We hope that the plugin will speed up your development! Let us know if you run into any questions.
     
  4. DominoOne

    DominoOne

    Joined:
    Apr 22, 2010
    Posts:
    413
    We have just released an update that adds Unity UI (uGUI) support (for texts, images, etc.) and also fixes Unity 5 warnings.
     
  5. Nerull22

    Nerull22

    Joined:
    Dec 31, 2010
    Posts:
    12
    Are you able to confirm that this has support for TextMesh Pro? It's what we use for all text in our projects and I saw a separate soft masking component on the asset store where people said that that did not support this functionality. Just looking for some affirmation that this one does support TextMesh Pro having a soft shadow. Thanks, looks like a great tool.
     
  6. DominoOne

    DominoOne

    Joined:
    Apr 22, 2010
    Posts:
    413
    Hi Nerull22,

    Unfortunately, TextMesh Pro isn't a Unity UI component (and it works differently), so our plugin does not support it at the moment. But let's talk in a private message, let's see if we can do something about it.

    On the other hand, if you need text with effects that Unity does not have by default, you could try another package of ours: https://www.assetstore.unity3d.com/en/#!/content/52508
    This package contains multiple effects for the standard Unity UI Text, so by using them you wouldn't need third party text plugins. Our Alpha Mask works with most of the effects that are included in the UI Text Effects package.
     
    Last edited: Mar 15, 2016
  7. JagaHee

    JagaHee

    Joined:
    Feb 18, 2010
    Posts:
    8
    Hello, did you test it on WebGL Build? will it work?
     
  8. DominoOne

    DominoOne

    Joined:
    Apr 22, 2010
    Posts:
    413
    Hi JagaHee,

    I've just tested it and I can confirm that it works on WebGL :) It should actually work on any platform, since there is nothing platform-specific in the scripts or shaders.
     
    Last edited: Mar 17, 2016
  9. Izitmee

    Izitmee

    Joined:
    Jan 27, 2011
    Posts:
    3,227
    Hi!

    I just started using your asset, which seems very cool except for an issue with Unity UI Text objects. When I apply the mask, the text becomes black and doesn't respect the chosen color anymore. Is this fixable? Here is some screenshots to show my setup, in case it might help ("Txt Index" is the text object in the hierarchy):

    alphaMaskingIssue.png

    Cheers
     
  10. DominoOne

    DominoOne

    Joined:
    Apr 22, 2010
    Posts:
    413
    Hi Izitmee,

    EDIT: I think I figured it out. Could you write me your e-mail address in a private message? I would send you an updated script directly, and if it works, I'd make an update on the Asset Store ASAP.
     
    Last edited: Mar 17, 2016
    Izitmee likes this.
  11. Izitmee

    Izitmee

    Joined:
    Jan 27, 2011
    Posts:
    3,227
    Ah, that was superquick, thanks! Just wrote you a private message :)
     
  12. DominoOne

    DominoOne

    Joined:
    Apr 22, 2010
    Posts:
    413
    The fix worked, so I'm submitting an update to the Asset Store. If anyone else is experiencing black Text issues with Unity 5.2 or later (earlier versions do not have that problem), please just wait until Asset Store approves it or ask me to send you the fixed script directly.
     
    Izitmee likes this.
  13. iamallama

    iamallama

    Joined:
    Jan 4, 2014
    Posts:
    5
    Can you use a RenderTexture as the alpha mask texture? I have been looking for an alpha mask that supports RenderTextures for custom lighting in a project I'm working on.
     
  14. DominoOne

    DominoOne

    Joined:
    Apr 22, 2010
    Posts:
    413
    Hi iamallama,

    Yes, definitely :)
     
  15. sgiff

    sgiff

    Joined:
    Jun 10, 2013
    Posts:
    7
    Curious if this works with NGUI, it's definitely something I'd purchase if so.
     
  16. DominoOne

    DominoOne

    Joined:
    Apr 22, 2010
    Posts:
    413
    Hi sgiff,

    We haven't tested it with NGUI, but I would certainly like to look into it. Does it use SpriteRenderers or does it have its own solution for rendering images? If you could share a simple project (through a private message) with a simple NGUI setup, I'd be glad to check it out.
     
  17. killradio

    killradio

    Joined:
    Oct 1, 2012
    Posts:
    4
    Hello,

    Your asset looks really nice. I have a few questions though:

    - It looks like the "Display Mask" option does not work when working with alpha mask. (I expect the mask to hide when clicking the option but it continues to render everything black in the scene around my mask)

    - Is it possible to have multiple alpha masks on the same scene ? From what I understand of how it works it does not look possible but maybe there is a workaround ?

    Thanks :)
     
  18. DominoOne

    DominoOne

    Joined:
    Apr 22, 2010
    Posts:
    413
    Hi killradio,

    Thanks for the positive feedback, we really appreciate it! I'll try to answer your questions:

    1. It should definitely hide the Mask itself (and only leave the effect of the Mask on other images) when you untick "Display Mask". Could you show an image or two of how it looks (you can send them to a private message, of that's more convenient)?

    2. You can have as many Masks in the scene as you need. However, you can only have one Mask applied to the same sprite/quad/UI element, out of the box. However, if you need multiple masks on the same image, you can render them into a RenderTexture first and then use the RenderTexture as the Mask in our plugin - this works perfectly and it a good way to apply multiple masks to the same image.

    Let me know if you need anything else, and I'll be waiting for a screenshot regarding the first questions :)
     
  19. killradio

    killradio

    Joined:
    Oct 1, 2012
    Posts:
    4
    Hi,

    Concerning the first question, here are the screenshots.
    What I though, was that by unchecking the "Display mask", I would see my entire scene :
    - When "Display mask" ON : The background / wood texture has a round masked applied to it.
    - When "Display mask" OFF : The background / wood texture is entirely visible.

    So the first screen shows with the unchecked "display mask". The second with the checked display mask. There is a small difference on the edges of the circle when display mask is on. So maybe that's the expected result ? (If it is, just ignore my question then ^^)
    [Display OFF]
    game_off.PNG
    [Display ON]
    game_on.PNG


    Concerning the ability to have multiple masks on the same image : I am not familiar with RenderTexture but will look into it. I am not sure though if it is available for the free version of Unity ? Also, would you have some examples / samples to start with this ?

    Thanks for the help,
    Cheers !
     

    Attached Files:

    Last edited: Mar 28, 2016
  20. DominoOne

    DominoOne

    Joined:
    Apr 22, 2010
    Posts:
    413
    It looks like your Mask object is behind the button (further from the camera on the Z axis). Could you try bringing it closer to the camera? You should then see the Mask itself, and unticking its visibility will be more obvious.

    Regarding the RenderTexture, it is definitely available in Unity 5 Personal, but it's not in Unity 4 Free. If you're using Unity 5, you should be able to easily set it up (there's some information here: http://docs.unity3d.com/Manual/class-RenderTexture.html ). Your idea to provide a sample set up is great, though! We will surely include it in the next release.
     
  21. killradio

    killradio

    Joined:
    Oct 1, 2012
    Posts:
    4
    Indeed, bringing the mask closer to the camera makes the effect more obvious. (and answers my question)

    I'll be looking into the RenderTexture (as I am using the latest version of Unity), even though I am not quite sure how to render the different masks in it for my background. (The idea being a way to simulate lightings / fog of war)

    Looking forward for your next release ;)

    Thanks again :)
     
  22. masterlsc

    masterlsc

    Joined:
    Nov 21, 2013
    Posts:
    11
    Hi
    I’m trying to use this plugin to make a mask for image re-sizing/cropping etc. like the one below where everything around the selection is slightly darker.

    Is this possibly using unity UI (panels , images) ?


    image1.png



    Thanks :)
     
  23. DominoOne

    DominoOne

    Joined:
    Apr 22, 2010
    Posts:
    413
    Hi masterlsc,

    I'm not fully sure if I understood your question correctly, but here is a quick sample of how you can use our Mask to "cut" a hole inside a semi-transparent black overlay. You can see how the Mask looks on the right image, and the result on the left one. You will need to make the Mask image Clamped in the import settings. I've made this sample with UI elements; and other elements (e. g. the circles on the corners) you can position from scripts, but you'll have to do the calculations yourself :)

    Hope that helps!

    mask_example.jpg
     
  24. masterlsc

    masterlsc

    Joined:
    Nov 21, 2013
    Posts:
    11
    Hi

    Thanks for your reply, that is exactly what i'm trying to do. Could you send this code example that would be really great :)

    Lars
     
  25. DominoOne

    DominoOne

    Joined:
    Apr 22, 2010
    Posts:
    413
    There is actually no code involved - I just set the UI and the Mask up. You'll have to write the code that scales/positions the Mask yourself :) But if you move/scale the Mask in the Editor, you'll see how the "hole" changes and moves around (a sample scene is attached).
     

    Attached Files:

  26. masterlsc

    masterlsc

    Joined:
    Nov 21, 2013
    Posts:
    11
    thanks, awesome support

    Have a nice day.
     
  27. masterlsc

    masterlsc

    Joined:
    Nov 21, 2013
    Posts:
    11
    Hi

    The sample dont seem to contain a working example, and i dont know how to set the masks up
     
  28. DominoOne

    DominoOne

    Joined:
    Apr 22, 2010
    Posts:
    413
    Let's switch to a private message and see how we can resolve this :)

    EDIT: Are your private messages disabled (I can't seem to be able to send it)? Could you send me a PM or drop me an e-mail via the support e-mail address specified here: https://www.assetstore.unity3d.com/en/#!/content/29764
     
  29. Bennybennerson

    Bennybennerson

    Joined:
    Jan 15, 2016
    Posts:
    4
    Does this support building to mobile platforms? The masks don't seem to be able to move on any mobile builds, such as a texture offset, or even a mask attached as a child to the player object.

    My particular example I'm using the mask to cut through a large black sprite simulating darkness, and using a circle for light, the darkness follows the player just fine but the circle of light won't move past where it started.
     
  30. DominoOne

    DominoOne

    Joined:
    Apr 22, 2010
    Posts:
    413
    Hi Bennybennerson,

    Yes, the plugin should definitely work on mobile platforms. Could you try putting the two Mask shaders (imported withing the package/plugin) in the Resources folder? Does that help?
     
  31. Bennybennerson

    Bennybennerson

    Joined:
    Jan 15, 2016
    Posts:
    4
    Yes, that seemed to fix it, thank you very much!

    Only thing is, is it doesn't seem to scale to canvas size when affecting the UI, the pattern is much more zoomed in on the mobile than it is in the editor. I can try changing some stuff around and see what I can do though.

    Thanks!
     
  32. BigjamGames

    BigjamGames

    Joined:
    Sep 8, 2015
    Posts:
    1
  33. DominoOne

    DominoOne

    Joined:
    Apr 22, 2010
    Posts:
    413
    Hi again Bennybennerson,

    Are you maybe using a "Screen - Overlay" canvas? I haven't figured out how to make the plugin work properly with that option, since it's implemented a little weird on the Unity side. Could you try "Screen - Camera", and if that doesn't work, then "World" space? And then let me know if any of that helps.
     
  34. DominoOne

    DominoOne

    Joined:
    Apr 22, 2010
    Posts:
    413
    Hi LitQoo,

    If the animated objects use "Unlit / Transparent" shaders or the Sprite shader, then yes, the Mask should work on those animated objects.
     
  35. shaybbe

    shaybbe

    Joined:
    Apr 22, 2016
    Posts:
    3
    This is a great asset! I'd like to buy it for my next project.
     
    DominoOne likes this.
  36. DominoOne

    DominoOne

    Joined:
    Apr 22, 2010
    Posts:
    413
    Finally, we've released an update with a sample that uses a RenderTexture to combine multiple mask images into the Alpha Mask. The setup is pretty simple, so check it out!

    screenshot6.png
     
  37. nproject

    nproject

    Joined:
    Jan 16, 2015
    Posts:
    68
    Can I use this for mobile?

    Thanks
     
  38. DominoOne

    DominoOne

    Joined:
    Apr 22, 2010
    Posts:
    413
    Hi nproject,

    Yes, you can definitely use it on mobile :)
     
  39. nproject

    nproject

    Joined:
    Jan 16, 2015
    Posts:
    68
    Hi, another question.
    I bought your plugin, I want to know how to mask a textMesh ?

    Thanks
     
  40. DominoOne

    DominoOne

    Joined:
    Apr 22, 2010
    Posts:
    413
    Hi again nproject,

    Without changes to the code it wouldn't work, because Text Mesh is not supported by our plugin (it's not a sprite, Unity UI element or an unlit 3D object). However, I've tried editing the code to make it work, and it looks like it does. I will send you the edited version within a private message.
     
  41. nproject

    nproject

    Joined:
    Jan 16, 2015
    Posts:
    68
    Thanks for great support :)

    BTW I already reply your private message.
     
  42. fermmmm

    fermmmm

    Joined:
    Oct 18, 2013
    Posts:
    129
    I've imported your asset for the first time and TextMeshPro is throwing a namespace error:

    Assets/Libraries/TextMesh Pro/Scripts/TMP_MaterialManager.cs(270,39): error CS1061: Type `Mask' does not contain a definition for `IsActive' and no extension method `IsActive' of type `Mask' could be found (are you missing a using directive or an assembly reference?)

    I fixed it by changing the type Mask to UnityEngine.UI.Mask. Maybe you should talk with the TextMesh pro guy to make it compatible. TextMeshPro is very popular.
     
  43. fermmmm

    fermmmm

    Joined:
    Oct 18, 2013
    Posts:
    129
    I cannot position and scale the mask in my UI because I'm using a canvas configured as ScreenSpace - Overlay. I cannot change that configuration. The asset is useless for me :(.
    Are you going to fix that? I'm going to change my review when you fix it.
     
    Last edited: Jun 8, 2016
  44. DominoOne

    DominoOne

    Joined:
    Apr 22, 2010
    Posts:
    413
    Hi fermmmm,

    Thanks for your insights. We are definitely willing to fix the "ScreenSpace - Overlay" issue, so I'll send you a private message for some additional information. Let's give it another go :)
     
  45. DevEddi

    DevEddi

    Joined:
    Jun 11, 2016
    Posts:
    1
    The shaders don't seem to work on sprites or the shaders don't load in the test build. When using the Unity player it works fine. Am I missing something? I'm using the latest version btw.
     
  46. DominoOne

    DominoOne

    Joined:
    Apr 22, 2010
    Posts:
    413
    Hi DevEddi,

    Try moving the Alpha Masked shaders (2D and 3D ones) into the Resources folder and let me know if that helps :)
     
  47. CunningGrayFox

    CunningGrayFox

    Joined:
    Jan 7, 2014
    Posts:
    23
    Hello DominoOne,

    I have an issue in my game and I was considering using your package to help me solve it.

    The issue is an issue with the Unity UI Mask component. I'm building a nail painting game using the Unity UI with a canvas set to Screen Space - Camera and in it I have a game object called "Draw Panel" which contains a Mask component. "Draw Panel" has a child game object called "RawImage" that has, you guessed it, a Raw Image component and the drawing script. In-game the source image for the mask looks like it has pretty clean lines but when I paint the Raw Image texture and the mask is applied it looks terrible. My understanding is that the Unity UI Mask's alpha check causes this sort of inconsistent masking behavior.

    Will your asset help me eliminate that rough border that's caused by the UI Mask component?
     

    Attached Files:

  48. DominoOne

    DominoOne

    Joined:
    Apr 22, 2010
    Posts:
    413
    Hi CunningGrayFox,

    Sorry for a late reply, I was away for a few days :)

    Yes, that is exactly what our Alpha Mask does and solves, because the standard Unity Mask does not support semi-transparency, soft edges or gradients.
     
  49. Celanda

    Celanda

    Joined:
    Sep 7, 2015
    Posts:
    1
    Where can I find tutorial or documentation? I have no idea how I can handle simple case with avatar and circle mask.
    I also have namespace problems with TextMesh Pro. Is it possible to mask TextMesh Pro objects?
     
    Last edited: Jun 24, 2016
  50. DominoOne

    DominoOne

    Joined:
    Apr 22, 2010
    Posts:
    413
    Hi Celanda,

    There is not much to document, because the usage is quite simple. All the necessary information is in the ReadMe file, included in the package itself. You can also watch the video that shows the usage of the plugin: https://www.assetstore.unity3d.com/en/#!/content/29764

    Of course, if that's not enough, and you need additional help, just ask here :) However, the plugin currently does not support TextMesh Pro, although, we're planning to look into it.