
You will often need to create textures for environments that you can see through or textures that give you on/off visibility.
Some examples of this include chain link fences, metal grates, decals like graffiti, logos, dirt, leaks and many more.
These textures are done through the creation of Alpha Channel using black and white values that give you this visibility control.
For example: instead of modeling a chain link fence, you create a black and white texture to define which parts are visible (chain link - white values) and which parts are invisible (between the chain link - black values). This information is then used in game engine to define what is visible, what is invisible and if there are any see-through parts in-between.
Here is a chain link Alpha Texture:

Here is a chain link Material with Alpha Texture that controls the opacity applied to a flat plane:

Now there are two terms often used to describe visibility: Opacity and Transparency.
Alpha textures tend to be used as Opacity: black or white, on or off.
But it's also common to have some degree of gray values in-between to define degrees of transparency. All this depends on the texture and the Alpha you are trying to create. Basically, what are you trying to show and hide with your Alpha texture?
Important to Know Alpha Color Values:
There are 3 formats you can create this Opacity or Transparency texture:
All these methods have their pros and cons and in this post I will breakdown all of them.
By the end, you will know what you should be using and what are the pros and cons of each method so you can decide the best way for you to create Opacity/Transparency with your textures.
I will be using UE5 game engine as an example to show how all of this works but these methods can be applied to other game engines as well.
Let's get started.
In this video I'll show you how to create transparency with PNGs using Photoshop and how to get them to work in UE5.

Tip: Wand tool will often give you varying degree of transparency (unless it's a solid color selection) but if you want solid transparent separation such as for graphic logos then use the Marquee tool and delete areas what you don't want to show so you see the transparency behind the image.


Note: DXT5 files will be larger in storage size due to Alpha transparency. For optimization you could separate alpha into packed texture masks instead, more on this later.
Create a new Material in UE5 to test your texture. In this example, I'll create a decal.

Drag the Material into the level, this creates a Decal Actor and begins to project it onto the surrounding assets.
Here is the dirt decal example:

Here is the solid logo decal example:

For full control and to avoid Normal Map and Roughness showing up from the texture below through your decal, add Normal Map and Roughness maps in your Decal Material.
Artifacts Bleed: If you are experiencing color texture bleeds around the edges, then use TGA texture format instead and create an actual Alpha channel. More on this below.
In this video I'll show you how to create transparency with TGAs using Photoshop and how to get them to work in UE5. This will often be a better option to reduce texture color bleed that often can be seen with PNG Alphas. I'll then also give an option for how to reduce texture size and pack opacity alphas into a separate texture.
Targa (TGA) textures allow you to put color into the transparent areas of your Base Color texture to help avoid color bleeds on the edges of Alpha. Something you cannot do with PNGs, as PNG transparency inserts a solid white color into your background Base Color by default.


Important to Remember Alpha Color Values:

Here is a comparison of PNG vs TGA:

The following technique will allow separating Base Color from having an Alpha channel by creating a packed texture that will contain Opacity Masks packed into its individual Color Channels.
This will reduce the texture size in half for Base Color, from DXT5 to DXT1.
Here is an example from the video where I have 2 Opacity Masks being used, one in Red, one in Green and nothing in Blue:

Then in UE5, use the packed Opacity Mask Texture and either Red, Green or Blue channel plugged into Opacity of the main texture node. You can also use a Component Mask converted to a Parameter to control which channel you want to use through the Material Instance. I've covered how to use UE5 Material Editor in this tutorial course.

See this tutorial for more on how to pack multiple black and white textures into single RGB texture with Photoshop (w/UE5 Example).
Home Terms of Use/Trademarks/Disclaimers Privacy Policy Donate About Contact
All content on this website is copyrighted ©2008-2024 World of Level Design LLC. All rights reserved.
Duplication and distribution is illegal and strictly prohibited.
World of Level Design LLC is an independent company. World of Level Design website, its tutorials and products are not endorsed, sponsored or approved by any mentioned companies on this website in any way. All content is based on my own personal experimentation, experience and opinion. World of Level Design™ and 11 Day Level Design™ are trademarks of AlexG.
Template powered by w3.css