Here's a relatively quick tutorial on how to achieve a decent glow effect for sprites without using shaders. It requires that your rendering engine supports render states or blending states. OpenGL, DirectX, SFML (and I think SDL) all support render states.
The gist of the method is to draw a special "glow-sprite" over the original sprite, using additive blending. I will show you an easy way to make a glow-sprite for your regular sprites using a few transformations in GIMP.
Let's say this is your sprite:
To make a glow sprite, first save a copy of the regular sprite under a new name (call it spritename_glow.bmp, for example). All our work will be done on this copy.
We must first paint all the transparent parts of your sprite black, and all the opaque parts white. (Note that this will not work as well if your sprite has per-pixel alpha values; it needs to have sharply defined contours to get the glow going).
[This "silhouette view" is easily achieved in GIMP by using the Magic Wand tool (with antialiasing off), selecting the mask color (magenta in this case), filling the selection with black, then inverting selection (Ctrl-I) and filling the new selection with white.]
Now, let's make that silhouette glow. Select the entire image (Ctrl-A). In the main menu go to Filters->Edge Detection->Difference of Gaussians.
When you get the dialogue, deselect Invert, select Normalize, make sure Preview is on, and experiment with border values until you are satisfied with the glow. To generate outward glow (which is our goal here) "Radius 1" should be at least 10.0, depending on how large you want your glow, whereas "Radius 2" should be left at zero. Inward glow (which you might also need for some reason) is achieved by keeping Radius 1 at zero and increasing Radius 2.
When you are satisfied with the preview click on "ok" and presto - you have your glow sprite.
That's it! Now all that's left is to use the sprite in-game to get the glow effect.
In-game, when ever you render the regular sprite, you ALSO render the glow sprite immediately over it, with the exact same parameters (location, scaling, etc.) except the glow sprite's blending method must be set to additive blending.
Naturally this step depends on the particular graphical library you are using, but pseudocode would go somewhat like this:
// draw the regular sprite:
draw_sprite("airplane_sprite.bmp", x, y, rotation, scale, color, sprite_alpha, blend::normal);
// now draw the glow sprite "above" it
draw_sprite("airplane_glow.bmp" , x, y, rotation, scale, glow_color, glow_alpha * sprite_alpha, blend::additive);
Note that the glowsprite inherits the same scale, rotation, and position, so that the two sprites will be drawn the same and over one another. On the other hand, glow should have its own distinct color value, which can be anything you want, yellow, red, white, etc. One possible use for this method would be, for instance, if you have only one kind of soldier sprite and need it to render both allies and enemies, you can surround the enemy soldiers with a red glow and the allied ones with a green one.
An example of this in action:
Well, that's it! Hopefully you can now include glow in your games without the need for shaders. Here's some other technical stuff:
- please note that due to the nature of additive blending you can't have "black" or "grey" glow; this method only serves to give a bright, colorful glow, which should be enough for your needs. I have a method of achieving a "black" glow as well if anyone is interested, but it is a bit more complicated and is beyond the scope of this tutorial.
- note that by varying the glowsprite's alpha value you can achieve a fuller or more subtle glow. By changing the alpha value dynamically (in a sawtooth wave or a sine wave, say, from 0.2 to 1.0 and back again) you can achieve very nice pulsating effects.
- is the glow too weak for you even at full alpha? One solution is to increase the radius of Difference of Gausians when creating the glow sprite. Another is to always draw the glowsprite TWICE in the same spot. Due to the way additive blending works, and the gradient of the glow sprite, this will act like increasing the "intensity" of the glow.
- caveat for advanced users: if you intend to render a lot of sprites with the glow effect on, you should probably bunch your "base" sprites in a single layer, and their "glow texture" draws in another, to avoid the overhead of constant changing of render states.
- you should take care that your sprite has at least some distance from all the texture edges, ideally as many pixels as you specified in Radius 1, otherwise glow can look blocky.
Community
