How to use Alpha channels for transparent textures

Using Alpha Channels in Roblox

The Problem:
Roblox’s image compression/mipmapping creates a white haze edge to models
with transparent textures (commonly foliage) and blurring transparent textures
sometimes to the point of being unrecognizable.
The fact that Roblox does not allow for a “Alpha” channel option within surface appearance can make it difficult to resolve this issue for many developers.

Example of blurred edges

Example of white edges
Screenshot 2023-04-27 162157

Why it happens:
When a texture is compressed or mipmapped (lowers the resolution of the
texture based on distance) it grabs the nearest neighbor and averages them out.

  • .PNG’s being the most common transparent texture format used on Roblox
    automatically sets all the transparent pixels in your image to white in most
    situations, so when the texture is compressed or viewed at a distance, it averages
    the edge of your texture detail with those white pixels creating that pesky white
    edge.

Example of .PNG texture on an old fern model of mine:

How to fix the Problem:

Use .TGA image formats!

  • .TGA/TARGA (A image format often used in games) allows you to control the color
    of the pixels around your alpha cutout/mask by adding Dilation (Padding around
    the edge of the image) in the RGB channels and having a unique alpha channel.

So when it is viewed at a distance it no longer has that white haze, AND as a
benefit it makes for a much sharper edge up close.

Example of a new fern model using a .tga image with an embedded alpha mask:

Make Sure to use Dilation!

  • Dilation in terms of textures is when you create a border of pixels around the edge of your
    texture in the RGB channels. Usually, It will stretch the same color pixel as whatever is on the
    edge of the texture to the edge of the image.

  • If Your texture does not already have dilation you can always use the most common color on the edge of the image and simply add a rectangle to fill the background of the image with the most common color.

  • You can also duplicate your RGB layer and scale the duplicated layer by a couple pixels using the
    “minimum” filter set to 1px. Then repeat that for about 3+ pixels then stack them in reverse order, and
    you should have a solid enough padding around the edge.

Example Of Dilation:

Example Of no Dilation:
Screenshot 2023-04-27 163109

What is an Alpha channel/mask?

  • Alpha textures are a black and white cutout of your texture that dictates what is
    and what isn’t transparent.

  • In this example white is what won’t be transparent and black is what will be
    transparent. It shows the edge of the leaves in this example.

Example of Alpha mask/texture:
Screenshot 2023-04-27 163412

This example shows the alpha mask over the albedo/color map masking out what will and wont be
transparent:

How to add your alpha channel to you color map in Adobe Photoshop:

First you will want to open your color map and your alpha map into separate tabs
in photoshop:
Screenshot 2023-04-27 163723

  • Once they are both open, go to the tab with your alpha channel and select all (cntrl + A)
  • Copy the alpha (Cntrl + C)

Then Navigate to the “Channels” window for your color map and select the + symbol on the bottom
right.
Screenshot 2023-04-27 163738
This will add your alpha channel to the color map.

  • Once you see this, and you have a black color filling your image paste your alpha mask into the channel. (cntrl + v)

Screenshot 2023-04-27 163757

  • Once it is added to the channel correctly, select the top RGB layer. And then you can export your image.

MAKE SURE YOU USE File > Save A Copy > Save as Type > Targa (.tga
Screenshot 2023-04-27 163815

While importing the image in studio make sure to use either the Asset Manager or the Creator
Dashboard or your image will likely fail to import!

Special thanks to bloxskellington for assisting

48 Likes

wonderful tutorial! this really explains a lot of the problems i’ve had to deal with. a lot of self-taught artists definitely make the mistake of using .png’s for textures like this. very valuable information for them, thank you so much for sharing! :smiley:

2 Likes

MAN!! I can’t thank you enough. Yestatday, I was trying to make stylized bushes with .png textures but noticed the white edges and was disappointed. Today, I saw your article and realized the issue. THANKS A LOT for the info and the tutorial !!

3 Likes

Glad it could help! I remember being super frustrated before I knew how to do this too!

3 Likes

This is incredibly helpful and greatly appreciated!! Thank you Caleb!

2 Likes

Thank you so much for this! It’s a huge help!

1 Like

I wanted to ask if you could achieve the same results without using Adobe Photoshop. I haven’t been able to replicate what you did in Photoshop with any other software.

I haven’t personally tried in any other software but id just look up “how to use alpha channels in ___ software”

Hi.
If you figure it out via a free application, such as gimp or inksacape can you post the steps here?

Thanks

1 Like

I think I’ve found a way, or maybe another way, with just a similar result.
(the small outline on the right palm tree is probably just because of the texture I am using)

I watched this video: Tutorial Link

Give it a watch and follow along with the steps outlined. Hopefully, it’ll solve your problem too!

If I misunderstood something and this isn’t what the chat is about than I am sorry!