Procedurally Generated Images

Animated Snowflake Explosion (originally under Pixel Art Sprites):
snowflake explosion

Basic Muzzle Flash (has alpha):
basic muzzle flash
8 more as a zip file.

8 Point Star:
8-Point Star
This is based off the same algorithm as explodeFizzleC below.

Generic Star backgrounds (400x400): If the black background is made transparent, these can be overlay and moved at differant speeds for a quite good illusion of depth. They can also be cropped to any size and still work.
stars 1 stars 2 stars 3
Originally under Miscellaneous Images

Additive Explosions with Shadows:

The basic idea here is we have twinned animations and draw the corresponding frame from each.
  1. The shadow is drawn with subtractive transparency (a term I made up). A fraction of the current value on the screen is subtracted based on the RGB values for the image. If the image has a value of 0.4, the existing value on the screen is multiplied by 1.0 - 0.4 = 0.6, so if it was 0.7, it becomes 0.7 * 0.6 = 0.42. In OpenGL, this is acheived by glBlendFunc(GL_ZERO, GL_ONE_MINUS_SRC_COLOR).
  2. The main explosion is drawn with standard additive transparency. This means the RGB values for the image are added to the current values on the screen. For example, if the old value was 0.42 (as above) and the value in the image is 0.5, the final value is 0.42 + 0.5 = 0.92. In OpenGL, this is acheived by glBlendFunc(GL_ONE, GL_ONE).
The combined effect has the glowy effect of additive transparency, but is visible even on light backgrounds. This means that many overlapping explosions can be drawn, although they need to be sorted for depth. Draw the shadow for each explosion immediately before it. Do not draw all the shadows folowed by all the explosions, or the effect will be lost and you will just get white.

The shadow images are generating using this REBIE script. REBIE is my own image editing software, which I have not released. However, this script is pretty simple. The blur is just blurs with the pixel's 8 neighbours (I forget the weights offhand, but it won't matter). The second part is a transformation that calculates new RGB values for eah pixel as a function of the previous RGB values. It could be simulated by a simple program (but not by any other image editing software I know of).

I left the shadow images at maximum intensity, even though they have to be multiplied by a scaling value to display correctly. I have included my scaling values with the images.

The explosions are are stored as sequenced PNGs. This is not an ideal format, but it is small and relatively easy to load. I wish someone would invent animated PNGs, like the old animated GIFs.

explode-b: (zip)
explode-b sample
I did not mske the origial (non-shadow) explosion. It is from the sample game MISSION2 that came with the Acknex 5 game engine.
Scale the shadow to intensity 0.6.

explode-spiked: (zip)
explode-spiked sample
I did not make the origial (non-shadow) explosion. I could not find the origial source of the image, but it is available as Exp1_sparkring.gif at".
Scale the shadow to intensity 0.75.

Fizzle Explosions: (,,
explode-fizzle-a sample explode-fizzle-b sample explode-fizzle-c sample
These ones I did make. They were intended to mark shot impacts that did no damage. The first 2 were intended to be used at random so all the explosions did not look identical, but they still looked too ordered to me. The third one looks good in large numbers.
Scale the shadow to intensity 0.6.

Back to resources page
Back to home page