Sprite Sheet Animation

Create Explosion Graphics Tutorial

Create an Explosion Effect with 3DS Max, Photoshop, and Sprite Sheets

Exploding Coffee Pot Example Introduction 3DS Max Fire Effect Photoshop Sprite Sheet Tips Summary Graphical Explosion Effect Tutorial

Introduction

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 fire. Move the smoke gizmo behind the fire gizmo. Make the smoke gizmo much larger than the fire gizmo.

Select the smoke gizmo and auto key. 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 Fire Effect. Use the default colors. Select the Pick Gizmo button. Select the gizmo we named fire.

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 smoke effect to shades of black.

Turn auto key on again, then modify Flame Size, Flame Detail, Density, and 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:
Sprite Sheet with Grid

Load all the files created by 3DS Max, and place them in order on the sprite sheet.

After the files are placed in order on the sprite sheet, save the image file and use a test run with JavaScript. Verify every frame is placed in the correct position. With animation any frame that's off even one pixel, may not look right.

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%.

Tips

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.

Summary

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.

More HTML5 Animation Examples

Copyright © 2015 Seven Thunder Software. All Rights Reserved.