[Released] Soft Alpha UI Mask

The UI Mask that comes with Unity3D is great, but it is a "hard" alpha test, that is to say, the alpha is seen as either "on" or "off".

With this asset you can implement the same masking to your UI components, but it will use a shader to do a soft mask of your UI component.

This means you can have some lovely fade in/out effects, have gently fading scrolling UI areas, rather than having a hard edge to your scroll-able in game map you can now have a lovely blended soft faded edge to your scroll area, or your scrolling text areas can now have the text gently blend away into nothing as the users scrolls through it.

Grab a copy here.

 

Just been updated to 1.2, now more UI controls can be masked

 

Hi, is it possible to swap masked sprite at a runtime? Seem it is not working.
Never mind - used RawImage.texture instead

 

Yes sorry for my late reply, a RawImage would be the way to go, that's a restriction of the Unity UI though.

 

Hello there!

Just bought tis asset - thank you for sharing it, it's amazing! The hard alpha of the native solution was getting on my nerves.

One question concerning the alpha mask - are sliced images possible?
I want to restrict an image by a panel, but the panel uses a sliced graphic. Soft Mask, however, only scales the sprite, which of course looks pretty different.

Best Regards,
Kristina Waldt

 

Ah, thanks for the kind words, glad you like it

I am not sure how it would behave to be honest. If you like create an example project and send it me, ill have a look at the behaviour and see if I can get SAUIM to handle it.

It may be tough as it works on the asset as a whole :/

 

Sure - I'll try with a few screens first, but if you like, I can also make an example project for you.

This is how the image currently behaves:


As you can see, the gradient doesn't fill the parent (see next screen) correctly.

This is because the parent panel uses the "background" image as a sliced sprite (you can test this yourself--just create a new panel in Unity's UI and look at the sprite).
I haven't looked at your code, so I don't know how difficult it is to implement, but all it is lacking is the "image type" option, where you can use it as a "simple" sprite (current mode, stretching to the transform), or as a "sliced" sprite (where it fills the transform, but repeats the sprite parts instead of stretching). Since your alpha mask already reacts to the transform ("mask scaling rect"), this part is already done.
[If you look into the sliders in your tutorial youtube, you will find that the slider handle also uses sliced sprites, so I'm sure that you're familiar with them.]

If you have any questions concerning this, or if anything way unclear, just tell me, then I'll create the example project.
Also, thank you for taking the time to look into it!

- KW

 

Cool thanks for that. The shader should be behaving as the base UI shader(s) do, but it works with the uv to know where to apply the mask (for images).

Ill give it a go though, see if I can sort it or find a work around

 

Demo zip file seems to be corrupted 7zip & Windows can't open it.

 

Sorry about that, ill get that fixed as soon as I can

 

Hi NemoKrad,

I'm using your asset to mask off a world canvas for an app that will be released on iPhone and Android. During device testing we noticed that canvases with Soft Alpha UI Mask are completely masked (no content visible at all) on Samsung Galaxy S5. Other Android and iOS platforms we tested were fine.

Any ideas why this one device would have this problem?

Thanks!

Matt

 

Hi Matt,

Sorry, but no, do the devices have different shader caps?

 

Just a quick update on what the roadmap looks like for SAUIM, in particular order

Sliced Textures (as posted by @KWaldt )
Rotation (at the moment no rotation is supported for content or mask)
Scaling (not tried it my self, but again been told it does not work too well)

I have other assets on the store and soon to be published so I have not been able to give SAUIM as much dev time as I would have liked. I am hoping over the next few weeks to remedy that

 

Hi @NemoKrad, I sent an email to random chaos!
Cool asset.
Thanks!

 

Hi, glad you like the asset, ill try and get to your email today

 

Any word on TextMesh Pro support?

 

Not at the moment, and it is not likely to be coming any time soon I am afraid. Sorry.

 

Hi all,

Sorry for the in activity, I have had a bit going on the past few months. I have a holiday coming, so hoping once I have been away I will come back re charged and invigorated and will try and get back on to SAUIM updates

 

Hi,

I have some problems with this plugin: is not working with Text component.
Text component is not displaying at all.

 

Have you set it up like in the demo scene provided?

 

Hi I just bought this asset and am having a lot of issues trying to get this working on a scrollview with text in it. My text is dynamic size and uses a ContentSizeFitter. My scroll content container uses a LayoutGroup and a ContentSizeFitter to be the right size for the text.

When I try putting the script on the scroll view content container my text disappears. I've tried a few combinations and had various results. I've had text only mask the bottom of the text, not to the container. Enabling/disabling the mask scripts at different points of scroll changes what is masked. Also my text doesn't respect the colour set on the Text element.

I read the documentation and looked at the demo scene but I can't get my head around it. If you could have a scroll view with dynamic sized content in a layout group so I could see the combination of what components on what elements are needed I would really appreciate it.

I was hoping this would save me time but it's causing me a headache.

 

Sorry you are struggling with SAUIM, I am on holiday at the moment, will be back next week, but in the mean time, could you create a simple example program with your issue and mail it to me, use the email address give in the documentation for support and I will have a look as soon as I get back.

In the future I might do another video to show how to set it up, might help people to have a nice descriptive video clip showing how to set stuff up rather than just a clip of it in action.

 

Wow, what an awesome asset. Very useful and it's gonna make my UI's look very unique & slick. Thanks!

 

Hi NemoKrad,

I'm looking at buying this asset — just wanted to ask, can masks be used to mask off sibling objects? I don't want to mask children — I want to be able to move the mask independently of the masked content.

Cheers.

 

Not really, it works in a similar way to the Unity default UI mask, but applies a soft alpha blend rather than hard alpha, sorry.

 

Hi NemoKrad,

I just bought the asset and have the same issue as mattirwin. I've tested on a Lenovo A6000 and found the entire RawImage to be masked.

I have no idea how to go about shaders. Any idea if I could make some changes in the code to make this work?

 

Hi vatsalAtFEI,

Sorry you are having issues with the asset.

Can you send me a cut down example of the issue and I can take a look, send it to the support email address in the documentation.

 

@NemoKrad Hello.

First of all, thanks for the great asset! It has been working great for the most part.

I had one issue though, related to nested masks...

Basically, if I have just one mask everything works as it should. But if I have a masked item inside another masked item (via parenting), the inner masked item seems to appear outside the parent as if it is not being masked by the parent. The child mask still seems to work, just the parent one does not.

Is this a known issue? Is there any way to fix it?

Thanks for any help and thanks again for the great asset!

 

OK, so is the child mask using the same mask as the parent? Can you create an example project and send it to me, use the address given in the documentation and I will have a look.

 

@NemoKrad Ok, email sent. Thanks for any help you can provide!

 

Everything works except for when this asset is used within a vertical/horizontal layout.

For some reason, the moment I apply a layout component to the parent of an object using this mask, the mask will stop updating properly when adjusting values. I have to disable/re-enable the object before I can see the mask update.

And ideas?

I am currently testing this in Unity 5.4.1

 

There is an issue with atlas and some UI formats that I have been trying to fix with no joy, do me a cut down version of the project causing the issue and mail it to the account in the documentation and I will take a look, see if I can get to the bottom of it.

 

Does it work with ListView Framework from Unity https://www.assetstore.unity3d.com/en/#!/content/69353 ?

 

We're having issues with this as well, only when it's inside something else that has a mask – such as when a softmask is applied to some text which is inside a scroll viewport.

As soon as you start the app, the text completely disappears, and the only way to make the mask refresh is to deactivate and reactivate the text object.