A5 Bitmap Fade In and Out

Back in the Allegro 4 days, we had those nice high color fade in and out functions that made fading bitmaps in and out perty easy. Now that I am using Allegro 5, I need to figure out all this blending and alpha channel stuff. I have been reading the posts in the forums, and playing with some of the code in those posts, but it seems some people are using the blending methods, other are just multiplying by alpha values, and what not, and to be honest, I am still very much confused.

I guess what I am asking here is, if there is a tutorial, or some code snippets that are known to work as of (3/8/2012) that could help a dummy such as myself learn his way around this topic?

Thanks for any and all assistance.

Trent Gamblin

All you really need to know SPECIFICALLY is you can draw a translucent rectangle with:

// This is the default blend mode. You don't have to do this unless you changed it earlier
al_draw_filled_rectangle(0, 0, SCREEN_W, SCREEN_H, al_map_rgba(0, 0, 0, alpha_from_0_to_1);

The alpha value there is a float and SCREEN_W/H are not real variables, substitute those as necessary.

So you're set up some timing method, and draw progressively higher alpha (0, 0.1, 0.2 -> 1.0 or whatever) as above. That's a fade out to black. To fade in, do it in reverse, ie: 1.0, 0.9, 0.8 -> 0.0 or whatever calculated values for alpha you have based on time of your timing method.


Thanks for the reply. Call me crazy, but I fiddled with your code there, and I had to tweak it a bit to get it to work. I had to change the al_map_rgba call you had below to al_map_rgba_f and multiply each value by the alpha value. So basically I did the following:

1for(float alpha = 1.0; alpha > 0.0; alpha -= 0.1) 2 { 3 al_draw_filled_rectangle(55,55,60,60,al_map_rgb(255,0,0)); 4 al_draw_filled_rectangle(50,50,100,100,al_map_rgba_f(1*alpha,1*alpha,1*alpha,alpha)); 5 al_flip_display(); 6 al_clear_to_color(al_map_rgb(0,0,0)); 7 al_rest(0.1); 8 }

It also appears that progressively higher alpha (0,0.1,0.2 -> 1.0) is a fade in and the reverse (1.0,0.9,0.8 -> 0.0) is a fade out. So unless I totally botched something, the above fades a white square to black.


1*alpha should be same as alpha ???
You've got the hang of it. "Alpha" just means how opaque[1] the pixel is. 0 alpha means you can look through it. You can change the background colour to see that. So technically you're not doing a fade to black; you are making the square less transparent or more transparent.
You were right to use the '_f' suffixed function. Otherwise you'd have to use int's ranging from 0 to 255. It is easier to understand using float colours.
Especially when doing 'multiplication' on tinted bitmaps.

al_map_rgb_f(0.5, 0.5, 0.5) tinted by al_map_rgb_f(0.1, 0.2, 0.3)
gives the same colour as: al_map_rgb_f(0.5 * 0.1, 0.5 * 0.2, 0.5 * 0.3)
                         =al_map_rgb_f(0.05, 0.10, 0.15)


  1. The opposite of transparent is opaque.

DOH!!!::), you would be correct... 1*alpha is just alpha. I guess what I was confused about was I had seen other examples where they were doing something like 1*fadeSpeed... Anyhoots, thanks for the push in the right direction, I will goof around with this a little more.

Trent Gamblin

They do 1*fadespeed sort of things so that other things can run at the same time in the game loop. With your for loop, everything stops while a block fades.

Thread #609721. Printed from Allegro.cc