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
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:
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:
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:
- 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.
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)
- 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
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
