Common alpha-blending problem

So a while ago I tried to convince myself that I’d start blogging more. I told myself that I’d stop caring about post quality and just write because I want to write. Obviously, I care more about quality than I had thought…

Now on to something useful. I’ve been wanting to write this post for a little while…

A number of open-source games I’ve played put emphasis on various lighting effects. For whatever reason, quite a few of these games don’t use an additive blending mode for these effects, choosing instead to blend the image based on opacity. If you have no idea what I’m talking about, just take a look at the image below.

As you can see, additive blending takes the values and adds them together, whereas normal blending based on opacity averages the two (as a side note, I have no idea whether these are official terms or not). So how does this matter in games?

The problem arises when textures intended to be overlayed with the additive effect are blended according to an alpha channel that is generally created by creating a grayscale version of the original texture. The alpha channel for an explosion looks something like this, then:

As you can see, the in-game image lacks vibrancy and doesn’t feel “hot”. This is mostly because the alpha channel is blending the center of the explosion with the background. Most games don’t settle for these results, and brighten the alpha channel to look like this:

This explosion looks a lot better, but now there is a dark ring around it. This is caused by the fact that the outer pixels of the image are not being blended as 10% red/orange, but 10% dark red/orange. Here is the solution I’ve found so far:

Making the background red has eliminated the dark band, and bumping up the brightness in the alpha channel prevents the explosion from being dimmed by the background.

Now, you might say that “it looks just fine without the red background! The dark ring adds contrast and hints at ash or smoke.” If that’s what you’re going for great, but the red-background version fits into the game better without popping out of the scene, and ash/smoke should fold around the form of the explosion and not remain simply around the edges. An explosion against blue sky only emphasize this problem.

Besides, this problem doesn’t apply only to explosions. Laser blasts, lens flares, etc are all vulnerable to having dark-alpha edges. With a little work, however, your opacity-blended effects can look almost as good as additive ones!