Monday, December 12, 2011

Back with a BANG!

I was asked to write a tutorial on explosions, which didn't seem that hard until I started... It's become common practice to use particle effect for most ingame explosions, so doing an explosion by hand was a bit of a challenge.

I stared out with a simple very generic explosion and took it from there, added to it and added some more. Let's start with the first simple explosion.

It's a fairly generic, cartoon style explosion - quick and easy to create [and animate - by scaling the elements and fading to either light or dark as the explosion progresses].

Usually blowing things up leaves more than just a flash of light. Dust and smoke clouds and debris are part of a good explosion. Let's add some of that.

This is still a very cartoony look. Let's try something a little less 'flat' and add some volume to the explosions.

This explosion is a bit more work to animate. You would start with a smaller light centre that would grow and add more circles to it that go darker as they reach the outside. The flash in the centre is just that - a flash - don't keep it on for too long or it will look more like a light source than an explosion. As this explosion dies down the dark circles would go grey and black, shrink and fall apart [either by imploding or falling to the ground].

As this is way too much fun - let's try another one. Similar to the last one but a little more compact, detailed and with some shading.

I hope you enjoy this one as much as I do... It's just too much fun to blow things up in style and I have to stop myself now and try and catch up with work (before writing the next tutorial that's already playing havoc with my imagination).

If you don't mind, can you do a quick tutorial on exporting images from Inkscape to a png? I have used the export to bitmap command and it seems like it doesn't handle the transparent area very well. I get small little white spots around the edges of my images between the colored area and the transparent area.

There is no download here... but a similar tutorial is on tutorial at http://vector.tutsplus.com/tutorials/illustration/quick-tip-how-to-create-a-cartoon-style-big-bang-explosion/and it has a svg download... :)

These explosions look so cool! I really wish I had someplace to use the technique... :) You can also make the little spiky shapes with the polygon and star tool. Set the tool to make stars, set the number of corners to something relatively high, like 10, and you can even set a randomization quotient so it's not completely regular, and you have nearly instant spiky star shape. You can manipulate the star with the tool-provided handles (change the length of the spikes, the size of the center, the angle the spikes connect to the center), and of course you can always convert it to a path and manipulate it more precisely if you need to. Either way, it's a lot faster than copying a shape and rotating it a bunch of times. :)