Unity: dealing with white edges on transparent textures 2018

Any graphics element like UI, sprites, meshes etc. that uses textures with transparency, can potentially suffer from white edges around transparent areas. There’s some good articles written about it here:

I will use this image with a white background as a starting point, which will most likely cause issues when trying to remove the white background.

After a simple keying, this is the result. See how much worse this texture suddenly looks? Photoshop on the left, Unity on the right. Note: I enabled mip-maps, which emphasizes the effect.

The source of the issue most often comes from “dirty” semi-transparent pixels around the edge. Notice how the pixels become more white as the they fade into the black in this example.

Using Photoshop, we can quickly clean up these dirty pixels.

First, make a selection of the visible images. If you only have one layer, Ctrl/Cmd + click on the layer thumbnail to make a selection of the visible pixels. Otherwise, group all layers and go to Select > All. Then select the Move Tool (V) and with the group selected, use the arrow keys to go left and back right again. As a last resort you can also merge all visible layers and Ctrl/Cmd + click that.

Then, go to Select > Refine Edge and enable the Decontaminate Colors option and set it to 100%. In some cases you may also need to use the Shift Edge to remove a bit of the edge. In combination with a small amount of Feather (like 0.3%), you can get fairly nice results. Again, Photoshop on the left, Unity on the right.

Some articles also suggest that you use a combination of filling the transparent pixels with a color and use an alpha channel to export the transparency information. We can make use of two free plugins to achieve this; SuperPNG by fnord and Solidify, which is part of Flaming Pear’s freebies.

Make an alpha channel by making a selection of the visible pixels as previously described. Then go to Channels and click the button that says “Save selection as channel”. It looks like a square with a hole on it.

Deselect. Merge all the visible layers, and with the layer selected, go to Filter > Flaming Pear > Solidify A. Your image will look something like this.

Finally,  go to Save As and select SuperPNG. Set the Alpha Channel to “Alpha 1” or whatever you named your alpha channel.

I hope this article shined some light on the issue and helped you get rid of those nasty white edges.

Comments

  1. Torben
     • 2018-05-16

    You could also the command in Photoshop under Layer/Matting/Remove White Matte

    1. Morten Andersen
       • 2018-05-16

      Thanks for the tip, Torben! I wasn’t aware of that command.

Write a comment