Back with a Bang – Creating Explosions

Inkscape Tutorial

I was asked to write a tutorial on explosions. It didn’t seem that hard until I started… Lately, 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 get started with the first simple explosion.
2Dgameartguru inkscape toolbar

Starting Simple

2dgameartguru - creating explosions

Using the straight line tool create a pointed shape.

Move the pivot point close to the node in the lower right, duplicate and rotate the shape.

Repeat the process to form a star.

Move the outer nodes to make the shape more irregular. Deleting some shapes might help.

Combine the two shapes via the Path/ Union option [CTRL++].

2Dgameartguru - creating explosions
2dgameartguru - creating explosions

Delete the nodes in the centre to close the hole (should it exist).

Duplicate the shape and colour them lighter [in this case going from red to orange to light yellow].

Adjust the nodes to avoid too many overlaps and ‘fill in’ empty areas.

2dgameartguru - creating explosions
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].
2Dgameartguru inkscape toolbar

Adding Detail

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.

2dgameartguru - creating explosions

For the second explosion start with some circles to create a cloud behind the flash.

Duplicate the shapes and variate the rotation and scale to form a cloud shape. Fill the hole in the center [should it exist] with another circle.

Add a few more circles to the shape and group the lot.

Use the straight line tool to draw an irregular star shape.

Select the inner nodes and turning them smooth. It will most likely overdo the effect and require some fiddling.

2Dgameartguru - creating explosions
2dgameartguru - creating explosions

Adjust the nodes to create a spiky shape by manipulating the node handles.

Duplicate the shape and colour it lighter. Due to the shape being uneven you will have to touch up the nodes to bring the lighter shape in line with the darker one.
Place the flash on top of the cloud shape and add some motion lines.

2dgameartguru - creating explosions

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

2Dgameartguru inkscape toolbar

Creating More Volume and Depth

2dgameartguru - creating explosions

For the second explosion start with some circles to create a cloud behind the flash.

Duplicate the shapes and variate the rotation and scale to form a cloud shape. Fill the hole in the center [should it exist] with another circle.

These four balls will form the base for layered clouds.

Duplicate the shape and change the scale and rotation.

Setting the gradient off centre allows for the light of th cloud to come from its centre.

2Dgameartguru - creating explosions
2dgameartguru - creating explosions

Adding more circles adds more complexity and more realism to your explosion. The balls form sort of a particle effect.

Add the flash shape from the previous explosion in the centre and add some debris.

2dgameartguru - creating 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].
2Dgameartguru inkscape toolbar

Making a BIG BANG!

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.
2dgameartguru - creating explosions

Let’s do another one based on the same method with similar colours.

Keep the cloud more con-densed this time by using larger circles for the base shape.

Add mor circles to build up the cloud.

Duplicate the shape and change the scale and rotation.

Create two circles und combine them with the Path/ Difference [CTRL + -] command to create the highlight.

2Dgameartguru - creating explosions
2dgameartguru - creating explosions

Fill the ‘moon shape’ with a transparent shade of light yellow and place it on some of the circles.

Add the flash shape from the previous explosion in the centre and add some motion lines.
Try out different shapes and colours to create the right explosion for your needs.

2dgameartguru - creating explosions
I hope you enjoy this one as much as I do… It’s just too much fun to blow things up in style. I have to stop myself now and try and catch up with work, before writing the next tutorial. It’s already playing havoc in my head.
Have fun and as always let me know how you go with the tutorial.

Get the source art (svg file) of this tutorial for free!