Fix white outline in textures with transparency in Unreal Engine

So you have a cool texture with some transparency you’re trying to use in UMG but the pretty PNG is ruined by ugly white outlines when you bring it to Unreal Engine. You’ve heard people say the outline is actually in your image and you should clean it up. You’ve heard people say to use nearest-point filtering. Use a masked material. Use TGA instead of PNG. You’ve heard “mumble mumble premultiplied alpha”. Nothing works. What gives?

Well, assuming you don’t have any errors in the texture, you may indeed be dealing with premultiplied alpha issues.

There’s a large amount of info on what premultiplied alpha is and how it works out there on the internet if you’re curious. I’ll skip all that, instead of learning all the details now and pretend I knew it all along, and keep this short. Here’s what I did to fix my white outlines in UMG textures with transparency.

I’m using Photoshop but I imagine you’ll have equivalent options in the app of your choice.

I start with a layer that has my image I need. Here’s a thingamajig on a transparent background, nothing fancy. This is a straight PNG export from Photoshop, and it just works on the web, to taunt us gamedevs.

Ctrl+click the layer to select everything that’s not transparent.

Go to the Channels tab, and hit Save selection as channel. I only had RGB channels initially, and this basically creates an alpha mask.

Go back to the layers tab, create a new layer that sits behind the main content, and fill it with black.

That’s it for the texture. Since PNG doesn’t do pre-multiplied alpha, you need to export to TGA, or just save as PSD and bring that into Unreal.

At this point you may be able to use this texture as is. In my case I still had some artifacts in Unreal Engine, this time a subtle dark outline. There’s one additional thing we can do to improve results.

Instead of using the texture as an image brush in UMG, we create a new material, set the domain to User Interface, and the blend mode to AlphaComposite. RGB goes into Final color, A goes into Opacity, and we’re done. Use your texture with the material, and use the material as the brush in UMG.

Hope it solved your issue as well as it did mine.

Don't forget to wishlist Terralysia on Steam, it would mean a lot! <3