How AlphaTest textures work best (the ones with the blue crap on them)
AlphaTest Transparency – 255 colours, last extra colour is the transparency mask. Good for railings and vents.
How does AlphaTest work?
Textures with blue crap on them and
named with a { prefix are known as AlphaTest textures, this can vary from different
games engines, but in HL/CS, AlphaTest textures are 255 colours with a extra
last colour being the ‘mask’ that represents the area that is transparent.
You can in fact use any colour for the invisible bit, but everybody just uses
a strong blue255 with 0green and 0red. Simply making a texture with this strong
blue included in the pallet WILL NOT make it transparent. (See
this more more info about the colour pallet)
As you can use any colour to then become transparent, you could make a texture like this, every colour is black, but the last colour still occupies various areas of the texture.
.
So when it is used in-game it still is able to hide parts of the texture.
Not that you would want to make a texture like this, it just shows how unique the last colour is and how it works.
The best way to make and use AlphaTest textures
As you are working with pixels, you need to give a little thought to how you are going to mask an area out.
When you make things transparent, then the mask is made with pixels, this means you cant mask a nice diamond shape like in fig 1. It will follow the pixels precisely like in fig 2.
@100% view | @600% View |
In software mode it will be displayed with pixely edges like this. In other video modes it do the same but round them off slightly.
This can look ugly on some things.
Plants etc can still look ok after this, as there are quite random and bitty
anyway. Ladders look fine too as the square angles of the ladder go with the
pixels and what’s transparent is square.
The most common mistake is making
a transparent wire fence that has wire that intersects at 45 degree angles.
Many people would then make the texture for this like the one above.
When the texture becomes transparent however, it shows the wire like a set of
stairs as the mask is following the pixels.
(Texture used)
(Texture above, placed in front of a grey checkered wall) |
(Closer View) |
The way to solve this
is to just make the wire texture like a ladder texture, at square angles. (Vertical
and horizontal lines)
Then rotate it 45 degrees in the editor. Nice sharp edges, even if the texture
is small.
(Texture used)
(Texture above, but at a 45 degree angle, placed in front of a grey checkered wall) |
(Closer View) |
Both of the textures are applied at the same scale, notice how smooth the edges are on the second one
You can even see an improvement with the texture itself by looking at the highlights. The first one has single pixel highlights because of the angle it was made. The second one has highlights that are a continuous line of pixels, so the engine ends up turing the first ones into a set of blurred diamonds whist the second is nice and smooth.
Conclusion
Just try and give a thought to how the texture will be used as you can rotate them to any angle in the editor.