Download

Transparency with PNG

What are the steps to make a PNG with transparency actually work? Or any file type with transparency for that matter. Still new to unreal so maybe its something simple I’m missing. Here is what I have.

Dropbox - startgamepng.PNG - Simplify your life This is the PNG that I imported, opened in unreal engine.
Dropbox - startgamepngmat.PNG - Simplify your life This is the material created from the PNG which looks completely wrong. And then set up on the right side to be used in my widget.
Dropbox - startgamepngfinalbutton.PNG - Simplify your life This is how my button turns out. Any Idea how to fix this? Please?

Thanks for any help offered.

here’s the thing about game dev: there’s always something new to learn!
The way that the ‘white’ top output on the texture sampler works is it only combines the red, green, and blue channels. that bottom output, alpha, isnt included there (dont ask why). to fix this, you’d have to add an ‘append’ node out of the top output and plug in the bottom alpha output in to the append to bring all 4 channels (r,g,b,a) in to it.
but i would suggest not doing that, as that doesnt help you here.

what you’ve done, is plugged the colours in to ‘base colour’, but base colour doesnt define opacity only colour. you need to put the opacity channel in to the opacity or masked inputs on the material. (opacity is a sliding scale of see-through to opaque, while masked is solid/invisible)
but the opacity/masked inputs are greyed out, meaning you havent set the material to be translucent or masked.

also: for me, ive always had trouble getting alpha channels to work with PNGs, I always prefer to use .TARGA or .TIFF files for this instead, especially if I’m exporting them out of Photoshop. this is to do with how files are compressed in UE4. the way .PNGs work, is they don’t really (afaik) actually have an alpha channel, they just treat a ‘null’ colour value as opacity. This means they wont work in UE4, because you actually need an alpha channel to get it to work properly.
i hope this is understandable.

When using an image with transparency in a material you need to set the blend mode to translucent or masked and plug the bottom-most output from your texture node into opacity or opacity mask. Details on transparency in Unreal are available here.

Additionally, I recommend the TGA format over PNG: the PNG compression format is prone to white fringing and iffy alpha values in general when converted to engine formats.