Unity does a great job of automatically importing Photoshop files. but it has an issue with transparency that, while easy to resolve, is poorly documented in my opinion. Here’s my attempt at writing the definitive guide on the subject.
To illustrate the problem I’m going to use the following texture that I created in Photoshop:
I also made a little demo scene that has a plane positioned to face the camera. I then created an unlit, transparent material with the image I made above as a texture, and applied that to the plane:
Here’s what the texture looks like in the game view:
Notice the white fringes around the border.
Why this is happening and whether Unity Technologies should fix it is the subject of some debate, but here’s what I was able to gather:
- The problem happens with anti-aliased pixels that lie on the boundary between opaque areas and transparent ones. These pixels will be partially transparent.
- When exporting images with such pixels to a format that supports transparency, Photoshop assumes that the background behind these partially transparent pixels is white, which causes the white fringes seen above.
- When importing Photoshop files, Unity will faithfully follow the same procedure, effectively acting as if the file in question was exported from Photoshop to a transparent image format like PNG or TIFF.
- My guess is that Unity is doing this to be consistent with Photoshop’s way of doing things.
That is all good and dandy, but it doesn’t solve the problem. Fortunately there is a relatively simple way of working around it, although it does require some legwork.
There are two components to the solution:
- First, we will need an appropriate background for those semi-transparent pixels so that when Unity imports the file, it won’t default the background color to white.
- Since we will no longer have a transparent background for our image, we will need another way to communicate transparency information to Unity. This is easily done with an alpha mask.
I’ll illustrate the solution using this slightly more complex texture:
First the background: I’ll need to create a new layer underneath the text, and then manually paint red behind the the red pixels and blue behind the blue pixels. After some wrestling with the brush tool, I ended up with the following:
Now for step number two: Creating an alpha mask. For this we will need to use Photoshop’s Alpha Channels
To create an alpha channel, you’ll first need to hide everything except the layers that will be visible in Unity. In my case this will mean hiding the background layer that I’ve created above. So my image will now look like this:
Then open the Actions panel, look for an item called Alpha Channel from Visible Layers under the grouping Video Actions, and run it by selecting it and pressing the little play icon at the bottom of the actions panel:
A dialog box will appear. Click the “Continue” button. The action should finish almost instantly. Now switch to the Channels panel and notice the new alpha channel that was added there:
Notice that it is set to invisible. Make sure to make it visible before continuing, as shown below:
Finally, make the background layer visible again:
Save the file and view it in Unity. In my case I used the same demo scene from before, and here are my results:
Notice that although the image preview looks completely wrong, the actual texture in the game view look correct and doesn’t show any white fringes.
And that’s it!
Too much work?
Unity Technologies also provides a Photoshop action that automates the whole alpha channel creation process. I have never used it myself, but I think it should be able to produc acceptable results for most simple images.