Why do my textures with gradient opacity not import correctly?

Hi,

I'm having an issue with textures for glow effects and particles not looking the same in Unity as they did in Photoshop, and I'm not sure what I'm doing wrong. Our game is for mobile, and I'm doing most of the Unity work, while my partner makes our graphics and textures in Photoshop.

Whenever we make a texture with a gradient opacity (for a glow effect or a particle system), it never looks the same in PS and Unity. It fades nicely in PS, but in Unity it looses the smooth gradient in favor of being more opaque at the center and very suddenly becoming more transparent.

I import them as Default in Unity if I'm just using them for a particle system, or as a Sprite (2D and UI) if they're for a non particle glow effect. Is there some setting either in PS or Unity I'm not doing right, or is it something else entirely? As an example I have a texture that is one of 6 layers for a round little fairy spirit creature, which has a glow on it. (The pictures below are low quality screengrabs, but show the difference). The top first on is from Photoshop, the second from Unity. Mostly we've been doing workarounds like messing with the alpha in Unity and layering copies, but it feels like a dirty hack solution and I'm hoping there is some better alternative.

 

Two possible reasons for this that I can think of.

One is how Unity handles psd files with a transparent background. At least how it handles them in 2018.2. The short version is Unity extracts the color (RGB) and the opacity (A) from the image, but since 2018.2 the RGB of the image is the color you would get after you flatten the image in Photoshop instead of the color you'd get after a merge visible (which is roughly the 2018.1 and prior behavior). That is to say it merges the image with a white matte background before getting the color. This behavior is likely the default official handling for reading psd files with an external application, Unity just uses the officially provided tools from Adobr that almost everyone else does for reading them. However no one is really sure why they changed this for 2018.2. PSD files imported in prior to this version continue to use the old behavior (the one that does what everyone expects), so the functionality to do both remains, and I think in 2018.3 on they added the option to choose which to do in the texture import settings UI.
edit: It looks like this is a feature that's in 2018.2 already, but only on old assets imported prior to 2018.2. You can enable it for new assets by modifying the asset's meta file manually by setting pSDShowRemoveMatteOption to 1.

The solution to this is to save your image to a TGA or PNG file and use that instead of a PSD, at least for now.


The second possible issue is if the effect is using any blend mode other than "normal". There's no way to support overlay, additive, or multiply, or soft light, etc. in an otherwise alpha blended image. Well, you can do additive and alpha blending in one image, but it requires quite a bit of additional work setting up the image properly.

 

Thanks for the reply! I should obviously have specified that all my textures are imported as PNGs, not directly as the PSD files, where my partner is giving me each effective layer as a PNG and we just put them together in Unity (and as far as I'm aware they're all "normal" blended, after we realized the effects like overlay don't transfer over, and then we simply do an overlay shader in unity which we're also struggling to get quite right, but at least we're got something close for now).

What type of extra work does the additive and alpha blending require? If it's very complicated, obviously I'm not expecting you to write it all out here, but maybe if you know a bit more specifically what I should search for to learn more?

 

It you're using Photoshop's built in PNG, that might be the problem. The built in support is really bad and aimed explicitly at web use. I highly recommend SuperPNG. It's probably not the problem here, but I'd still recommend never using the built in PNG save / open.

I'm guessing the issue is you're trying to do an overlay at all. Normal (alpha blending: Blend SrcAlpha OneMinusSrcAlpha), Multiply (multiply: Blend DstColor Zero), and Linear Dodge (additive: Blend One One or Blend SrcAlpha One) are the only blend modes that there are real equivalents to between Photoshop and real time rendering.

Overlay can kind of be emulated, but there's a lot of gotcha there with color space. If your project uses Gamma color space, then two passes can be used to get pretty close to an overlay, but I'm still not sure it'll be exact as I think Photoshop does some non-standard color space manipulation for its Overlay blend. If you're using Linear color space then you have to do a ton of extra work in the shader to handle color space conversions, and even then there's no guarantee it'll match.

Premultiplied alpha.
Blend One OneMinusSrcAlpha

The "Sprites/Default" shader uses this, as does the "Particles/Alpha Blended Premultiply" shader and "Particles/Standard Unlit" shader when set to Transparent mode. The way this works is by understanding that traditional alpha blending is two steps. First you need to mask the area the texture is going to go by multiplying the background by one minus the opacity, then multiply the texture's color by the opacity and add that to the background. Premultiplied alpha blending multiplies the texture's color by the opacity to remove one math operation, but it also allows you to have the color and the opacity not match. Anywhere there's color, but no opacity, it's an additive (Linear Dodge) blend!

To do this in Photoshop you first need to setup your image with just the Normal blend parts. Then duplicate the image and merge all layers. Copy the transparency from the flattened image into an Alpha channel in the first PSD, then enable any additive layers. Then add a solid black background and you're done. Save this to a TGA or use the PSD for Unity and you should be good. If you use Photoshop's built in PNG save it'll completely butcher the image and delete everything in the areas that have the Alpha set to zero! You need to use SuperPNG to save, select Alpha 1 for the transparency, and make sure Clean Transparency is checked off.

 

Yes that works much better.
Question: How do I change the default texture image editor in SU? It currently defaults to Microsoft Windows Picture Manager and I would like it to default to Photoshop.

Thanks for your help- you've made my day.

 

Hey, don't mean to necro the thread but I'm writing this so anyone who stumbles upon this topic will see it.
There's a "Remove Matte" option in the Import Settings of PSD files in the Inspector.



P.S: I don't know what they mean by saying "this is deprecated".

 

Oh cool! Thanks, I'll try that out then!

 

Sounds like the matte removal feature has been removed as of 2018.2: https://docs.unity3d.com/Manual/UpgradeGuide20182.html That's why they say it's deprecated.

Cheers,
Sam

 

If you are running 2018.2 or later, any texture that was added to the project in a previous version will show the "Remove Matte" option (and the warning). If you import a new texture into a 2018.2 or later project, the option is not available.

The term "deprecated" as it applies to software means it is a feature that still currently works for the purposes of backwards compatibility, but will be removed at some point in the (potentially near) future so you should not rely on it.

The "Remove Matte" behavior was what Unity default to in 2017 and all versions before that. They recently added the option to toggle that behavior off, and quickly moved to remove the option entirely.