Create Explosion Graphics Tutorial
Create an Explosion Effect with 3DS Max, Photoshop, and Sprite Sheets
We demonstrate how to create an explosion effect with 3DS Max, then composite the effect with Photoshop. The final result will be a sprite sheet for use with the HTML5 canvas element. The Exploding Coffee Pot Example and Explosion Over Text Example use the sprite sheet described in this tutorial.
3DS Max Fire Effect
We used two instances of the 3DS Max Fire Effect to create the explosion effect sprite sheet. A bright orange red fire effect is placed in front of a smoky fire effect.
Create the Fire Effects
In the top view select Create>Helpers>Atmospherics>Sphere gismo, twice.
Name one gizmo
smoke and another
smoke gizmo behind the
smoke gizmo much larger than the
smoke gizmo and
Over the next 14 frames set keys to make the smoke grow.
Do the same for the
fire gizmo, let the
fire start much smaller
and grow to almost the size of the smoke. Turn off auto key.
Select Rendering>Environment from the drop down menu. Then scroll to the
Atmosphere roll out. Tap the
Add button, then select
Use the default colors. Select the
Pick Gizmo button.
Select the gizmo we named
Follow the same series as above, to add another
Fire Effect, yet
this time select the
smoke gizmo. Set all of the colors of the
effect to shades of black.
auto key on again, then modify
Flame Size, Flame Detail, Density,
Phase settings to create varying effects for both the fire and smoke atmospherics.
The fire effect only renders in camera view. We created a target camera, then moved the camera around a little for the desired appearance of the explosion. We set the maximum frame number to 13, which provides 14 frames in the range of 0 to 13. We set the size of each frame to 128 pixels wide x 128 pixels high.
The series of images were output from 3DS Max as 48 bit PNG files with alpha transparency.
Photoshop Sprite Sheet
To determine the width of the PSD file, multiply
7 by 128;
7 x 128 = 896.
To determine the height, multiply 2 by 128;
2 x 128 = 256.
Create an empty PSD file 896 pixels wide by 256 pixels high, with
a transparent background.
We'll place a strip of seven frames along the top of the PSD file,
and seven frames along the bottom of the PSD file.
To accurately place each frame we created a separate layer with a visible blue grid. Each grid element is a rectangle 128 x 128 pixels wide, with a solid blue stroke on the inside of the rectangle. The grid elements extend perfectly across the top and bottom of the PSD file.
Solid squares of different colors work better than grids with lines. If the sprites are off by even one pixel they appear to jump. However the sprite sheet with a grid worked fine for the explosion examples. Perhaps explosions don't need precise placement. For other sprites it's probably better to use solid colored squares behind transparent, semi transparent, or sprites with reduced opacity.
Sprite Sheet With Grid:
Load all the files created by 3DS Max, and place them in order on the sprite sheet.
We used the Photoshop eraser tool to smooth out some of the edges. In some instances the 3DS Max fire effect touched the edge of the image. If the fire effect touches the edge, then the explosion will appear cropped with a straight line. We also modified brightness and contrast in Photoshop.
Finally we merged all of the 3DS Max rendered frames into one layer, hid the blue grid layer, and reduced transparency to 35%.
Reducing transparency allows code to draw one frame over the other, which improves performance. Otherwise code would have to clear then redraw the background and effect frame, for every frame of the animation. See the final sprite sheet with 35% transparency over a white background.
We demonstrated how to create an explosion effect with 3DS Max, then composite the effect with Photoshop. The final result is a sprite sheet for use with the HTML5 canvas element. The Exploding Coffee Pot Example and Explosion Over Text Example use the sprite sheet described in this tutorial.