Transparent textures using the PNG alpha channel

Preparing your texture

The prefered file format to work with textures in PF is PNG, it is preferred over JPEG because it uses a lossless compression which ensures your image will not be degraged and displaying artefacts (read this wikipedia entry for more details and examples).

Note: Pf supports JPEG if you need to work with it.

Moreover, using PNG files for your textures allows you to access to the multiple options offered by this fileformat in terms of transparency. From single pixel transparency to full alpha channel support or indexed alpha palettes, you have many choices that we will not detail here (you can have a look at this page for some transparent PNG tests for browsers).

The most commonly used transparency is achieved by using an alpha channel. Most of the time you will be working in 24-bit RGB which means that in order to compose a color you will be mixing one value of Red, one value of Green and one value of Blue. Each of these values are taken from an 8-bit channel which means each color channel can handle 256 different values. The 3 channels combined together provides you a "Truecolor palette" that can output 256*256*256=16777216 different colors.

These colors can be considered as opaque, so in order to add transparency we need an extra channel which is not representing any color value but a transparent factor linked to an already existing color. Such a channel is called an alpha channel and, in our example, is also 8-bit, hence handling 256 values. As a result we are now working on a 32-bit RGBA image (the total number of transparent processed colors is then 4.294967e+09).

Most of commercial and free image manipulation software can work with layers and transparent background and can export this into a PNG file while doing all the alpha channel business for you.

For example, on way of creating a transparent texture in the GIMP can be done by creating a new image with transparent background (File, New, Advanced Otions). Once finished you can save your work of art as a PNG file.

Note: When exporting you may be prompted to flatten or merge layers. This is normal. Please also note that it is recommended to work with images which dimensions are power of 2.

Texturing a bunch of squares

Using wisely alpha textures can dramatically change the look of the rendered graphics. In this example using the "puffy.png" file attached below, we can create a cloudy effect using only squares.

load-opengl                     
load-png                        
400 300 display                
2d                             
drawing                       
2 blend                         # we turn blending mode 2 on
"puffy.png" import-png >texture # we convert the file into a...
constant puffy                  # ...texture called puffy

We then describe how our squares should be generated. You should know by now what the following means. Please note tha we are using here the normal word instead of random so as to generate pseudo random values from a normal/gaussian distribution centered on 0 with a standard deviation of 1 (means you'll tend to have most of the time values close to 0. We do so in order to have objects mostly centered on the screen)

: newXY   normal 0.2 * transx normal 0.2 * transy ;
: cloud   m-push newXY 360. rand rotz 1. rand square m-pop ;
: clouds  clearscreen puffy texture for cloud next ;
60 clouds

Oooooooh preeeeeettyyyyyyyy .....

blending mode 1

So far we have been working with the blending mode 2, which is doing an average mixing of colors (layered glass). You can also work with blending mode 1. This particular mode do not mix the colors but add them all together (film exposure). Successive accumulation of the same color will eventually end up with at least one channel saturated (except for the black color or completely transparent pixels obviously).

1 blend
20 clouds

Instant Star Trek ...