The Big Bangs (explosions in Missile Command)

Posted by

There's actually only two animations that I needed to create for my DevSta { Challenge 2008 } entry, Missile Command, an "explosion" and some smoke for the missiles themselves. Both animations were created the same way, and I'll details the steps here. It's quite basic, and for anyone who's worked with any kind of animation before should understand the basic principle.

As before, here's a screenshot showing the explosion at work (it's hard to show a screen shot of an animation, but I'll try!

Missile Command, Explosion

Now, I actually didn't create my animations, they'd been lying around my hard-drive for ages... I probably got them from Google back in the days when I thought I'd be a professional game-designer by trade... ah, youth! But anyway, the basic structure of the animation is that you divide a bigger image into a bunch of smaller ones. In the case of the explosion, it was a 256x256 pixel image that I split up into 16 32x32 pixel images. So the top-left section was the first frame and the bottom-right was the last frame.

Now I knew I wanted the explosion to stay on-screen for about 1 and a half seconds so I decided that each frame should last 0.1 seconds (that actually ends up being 1.6 seconds, but that's good enough). So each game tick, you simply calculate the amount of time since the explosion started and divide by 0.1 -- giving the frame number. Then you simply call Graphics.DrawImage() to draw the correct sub-portion of the source image onto the screen.

Originally, the version of DrawImage I linked to above was actually the one I used, but I discovered that it was extremely slow. At first, I thought it was because I was actually rendering a 32x32 portion of the image to a 64x64 rectangle on screen (because I wanted the explosion to be a bit bigger) but even pre-scaled, that overload is really sloooow. In the end, I figured out that if I split the image up into 64x64 sections at the start of the game and then use Graphics.DrawImageUnscaled, it was much quicker. I don't know if it was maybe just my particular graphics card's drivers or if it's a universal thing, but I figured it's better to be safe than sorry.

The only other thing I'd mention about the explosions is those circles you can see in the screenshot above. See, if you compile with SHOWLINES, like I described last time, it draws a circle at the explosion's "circle of effect". That is, anything inside that circle will also explode (including vehicles and your rocket launchers). You can probably tell from the screenshot that as the animation progresses, the "circle of effect" also increases. If the radius didn't increase, you'd get vehicles exploding at the exact same time as the rocket exploding, which just looks funny.

One thing you discover making games like this is that much of time is spent tweaking things so that it doesn't "look funny." In fact, physical acuracy is less important (in my mind) as long as everything looks good. There are a number of parameters that I spent quite a bit of time just tweaking slightly - things such as the speed of the vehicles vs. the speed of the missiles, the rate at which the "circle of effect" of the explosion increases and so on. It was only after several hours of play-testing that I feel like I got those values at an acceptable level.

Anyway, that's about it for today. Next time, I think I'll go into the rotations that are applied to the vehicle and rocket launcher images. It was surprising to me how easy GDI+ made it to rotate the images. I remember back in the day having to write image rotation algorithms by hand... talk about "old school, new cool"! :roll:

blog comments powered by Disqus