…or the art of how wot I make things prettier than they have any right to be via the medium of art.

First up, before we start, there’s something you should know. I’m not a natural artist. Hell, I’m not even a natural coder. I’ve often said how painful I find the actual development part of things and that includes the art parts also. You will, I fear, find better advice on how to doodle really nice things elsewhere. Like from an actual artist. You’ll find better advice on how to code these things than I could give you by sticking your head down the toilet. Or asking a coder.

There is one thing I do enjoy doing though and as I’m sure you’ll not be surprised to read – it’s making things that wot go boom. I like things that go boom.

One of the things that makes me sad about a lot of games is that things go boom in a really cack manner. How many times have you seen a game where a space ship explodes in what should be the most sterlingly beautiful display of pyrotechnics only to erm, sort of go pop with a tiny “I’ve seen this explosion in about 500 games now” sprite? The campaign to be down with that sort of thing starts right here, right now.

If you’re lucky, sometimes some folk will be a bit daring and throw in some additive blending too. How very exciting, people. How very exciting.

This is Razor2, recently released on Steam. Clearly a lot of time and possibly money has gone into making these lovely spaceships and space battles. So why then do the ships puff out of existence?

Tick, tick…

I never wanted to make games that did that. It seems like such a disappointingly mundane thing to do when you’ve got a metric megabeast of processing power at your disposal.

The problem was I didn’t know where to start.

There’s plenty of tutorials on how to make lovely particle emitters at a technical codey level and they’re all well and good, there’s plenty of applications out there that can help you with your particles and that’s all well and good, cripes – if you’re a decent enough coder, you’ve probably already got your own particle code ready to go because particles are brilliant and useful and all that jazz. If like me you use Gamemaker, it’s built in. Which is nice. Yet still, despite all the technical articles out there, all the tools, no-one really tells you anything beyond that.

So, for a while, I thought I was screwed. No-one was going to tell me how to do these things so I was going to have to learn.

And if you’re going to learn, you learn from the best.

This is Gratuitous Space Battles. It does what it says on the tin. It also has rather fantastic explosions. Where did Cliff get his inspiration for the explosions from? ILM.

Boom

I don’t write the sort of games that deal well with realistic explosions so plundering the work of Industrial Light and Magic was rather obviously not going to work for me. I write videogamey videogames that do videogame things.

So I was going to need to seek out some videogamey things to study.

But first I made some mistakes. They were good mistakes as they’re the sort of mistakes you learn from and take the working bits from and throw away the bad naughty bits. Mistakes they were, all the same.

This is Vector Infector. It went wrong.

Vector Infector was my first foray into the land of the glowy. I’ve told the story of how it all went wrong many times so I won’t repeat that here again (short version: Geometry Wars came out on the Xbox and that kicked my confidence for six and I proceeded to mess it up by trying to make it not-Geometry Wars).

I experimented with pre-rendered particle effects rather than actual particles for maximum big-ness in the explosions. Thing is, to get a decent effect out of that sort of thing, you need to render off a ruckton of frames. This is not the way to do things. If you need to do particles, learn how to do the bloody particles and don’t be me.

What I did learn from it though was that perhaps, just perhaps, there might be something you can do with scaling and rotation to make these things work. Not just with particles but hey, what can you do with images?

But we’re getting ahead of ourselves here. Let’s take a step back. Back to learning from the best. Before you start with all that guff, you need stuff a little more do-able, not necessarily basic but do-able.

We need the three best explosions in the history of gaming. Where on Earth can we find them?

1: Minestorm on the Vectrex.

Pic via this chaps Flickr stream.

Look at it. How perfect is that?

It’s the simplest thing. It’s on the Vectrex, it has to be. It’s just some lines that start at the centre and extend themselves out.

Which is wot explosions do, isn’t it? Except without the lines, obviously. I wonder what we can take from this? Could it be that we start at the center and extend outwards? Hmmm… let me see…

2:Robotron

Robotron is the most videogamey videogame there is. It oozes videogame.

And look, look at that explosion. It’s amazing. Again though, we’re starting at the centre and spreading out but this time we’ve got space as it’s ripping the sprite apart.

We don’t need to be ripping the sprite apart but, well, y’know, look – it’s a bloody cool effect anyway.

3:Gridrunner++

Wait. Gridrunner++ is doing a bit of what Minestorm does and a bit of what Robotron does and hang on a minute, what else do we have here?

Let’s ignore the text for a minute because whilst that’s lovely and all that it’s not what we’re focusing on. It’s the circles. We’re stepping out of straight lines and into circles of particle dottyness.

Boombangabang

Ok, now we’re talking. We’ve got 3 videogamey videogame effects and we can work out how those are all done easily.

On their own, each one of these makes for a great videogame explosion. But…

What happens when we combo them up?

Ah poo, yeah. This happens.

Or this.

Same effect, different sprites. Oh man, do you think we’re onto something here or what?

Do you know, I think we might be.

Ok, so we’ve got 3 fundamentally simple effects that when combo’d up produce 1 fantastic effect. But why do they work so well? And y’know, surely there’s more we can add too…

Hmmm, ok, let’s take a looksy round about…. here…

It was obvious that it’d crop up sooner or later, wasn’t it? After all, Geometry Wars:RE kickstarted the whole glowy thing big style. Yet, it still uses the same principle of “start from the centre and spread out” that we’ve seen in Minestorm, Robotron and yes, even GR++. Only now we’re throwing an extra influence into the mix – fireworks.

Fireworks are cool. No arguing at the back, we’ll have no discussion on this matter here. Fireworks in videogames? Also cool.

I wonder…

Aren’t videogames brilliant?

The Centre Of Awesome

But Rob, you keep saying this stuff about starting from the centre and spreading out as if it’s some magical thing you’ve discovered and not wot explosions actually do. Are you an idiot or something?

I know at least one of you has been thinking that. That’s ok, I don’t mind. You can think that. Just remember when you’re thinking it how many people seem to think that an explosion doesn’t behave like that when they’re splutting their sprites on the screen, ok?

The art of the good videogame explosion is in the spread.

And in the emphasis.

Let’s talk about the emphasis for a second or two before we go any further.

To do that we need to understand the most important truth about the videogame explosion. Its purpose is that when thingy A collides with thingy B, awesomeness occurs.

The exact point where your bullet collides with the nasty in a game is what is officially known as the centre of awesome.

That’s where your actions as a thingy that’s required to shoot something, having now shot something, will require the game to say “hey, you did something awesome”. We do this with some lovely visual feedback or as you might prefer to call it, an explosion.

You want to emphasize the centre of awesome. There’s a couple of ways you can do this, have a play and see what you come up with. You can make it the glowiest bit (yes, glowiest is totally a real word), you can ensure there’s a sprite directly at the centre where the collisions occur… have a toy. The important thing to remember is what you’re trying to indicate to the player.

Just to recap in case you missed it, you’re telling the player that he is the cause of this. That thingy A hitting thingy B is what did done this.

Having a big sprite just dumped on the screen does not appease the gods of awesome. Having the explosion occur around where the collision occurs does not appease the gods of awesome. Having a teeny tiny sprite do nothing but appear and go away again does not appease the gods of awesome.

Worse still, they don’t make the player feel like he’s responsible for causing awesomeness to occur. That’s badnaughty.

Also, it’s a known fact that explosion size is directly linked to the amount of awesomeness. If you have a small enemy, sure, have a small explosion. If you’ve got a big enemy and when shot it has a small explosion, do you seriously think the gods of awesome will be happy with you?

Want a handy way to emphasize the extra big extra awesomeness?

The age old shockwave trick.

Easy out? An expanding circle that, wait for it, expands outwards from the centre of the blast. And because this is a videogame, it doesn’t really have to be a circle. It could be a square, a triangle, some text. We can do anything. We’re making videogames.

Not only does it say “woah, this is moving” but it also says “Man, that was an extra awesome and big explosion you just did there! You’re so cool.”

We like making the player feel cool, yeah?

This is Bangai-O. Not only is it cool but it uses every explosion trick in the book.

Set the cool-o-meter to stun!

So far, we’ve just talked about particles. Particles are great and all that, we like particles. It’s not just about particles though is it? So let’s talk about other things we can do to maximise the cool.

Additive blending is your friend with explosions. It’s the secret of the glow, obviously. If you want something to really glow, crack out the additive blending. Thing is, we don’t necessarily want every part of the explosion done with additive blending. It can be a bit… well, a bit much.

Have a tinker with the different parts of your explosion and see what looks nice. There’s no hard and fast rule, it all depends on what you’re trying to achieve. Most of all, it all depends on what looks the coolest. If you use no additive blending at all, the explosion can look a bit dull and washed out. Maybe that’s what you want? If you use it sparingly, you can still achieve something really quite striking.

Vary the speed, trajectory and stuff and things. If I blew up your house then blew up the house across the road then neither of the explosions would be exactly the same. This is, again, why simple sprite explosions are generally terrible. Each explosion looking the same is boring. So vary stuff. Tweak the directions slightly, rotate things. Find different ways to add subtle differences to the explosions.

If you’re using particles then why not have the particles interact with their surroundings? To use the technical terms: bouncing off things and stuff.

Remember: Explosions do not come to a dead stop then amazingly disappear. Fade them out, shrink the particle sprites to nothing.

But wait: VIDEOGAMES!

We can bring particles to a dead stop. Sometimes it looks amazingly cool to have stuff drift along in a natural way then do a videogamey thing and freeze on the spot before disappearing naturally again.

Some other things to consider. Small amounts of screen shake, slow motion, camera twiddling (Squid Harder does a slight zoom every time you shoot an enemy, it’s really, really, subtle but it makes quite a difference) and of course, everyone’s favourite – controller rumble.

I like crayons!

Work with colour. We’re talking videogames here, we don’t have to be orange and teal. We don’t have to have explosions that go from white to red or from white to dark blue or from white to grey.

If you’re not great with colour, that’s ok, the gods of awesome invented places like ColourLovers and Kuler to assist you there. Don’t be shy in using them.

Don’t restrict yourself to just squares or circles. Use sprites. And remember, scaling and rotation is your friend.

Looky here:

Awww, it’s a love heart. One sprite. Gradually getting bigger. And it’s a heart. Doesn’t it look lovely?

You don’t always need to go particle-y or go particle overkill, you can do a lot with just one sprite, some scaling and if need be some rotation too. Spin things round, make ‘em grow, make ‘em shrink. The best effects come from playing and fiddling and sometimes they come from the most surprising of sprites.

A good sprite can have many different uses.

For example. For Fish Fish Bang Bang I doodled this sprite:

It doesn’t look very exciting, does it? However, what if every time the player shoots something the sprite is drawn underneath the player and scales upwards? Well, you end up with something that looks like this:

Now we’re talking.

How about if we scaled the sprite and rotated it too, fading out as it gets larger?

Oh, we’ve got a spiral galaxy effect. Nice!

Why not grab that sprite and see what you can do with it? There’s two examples, I’m sure with some minor code wangling you can come up with a whole lot more uses.

Once you’ve got some practice in with that, do some different shapes of your own and switch them about where you previously used that sprite.

Experiment, experiment, experiment.

In fact, that’s the key to any effects really. Experiment. Don’t be afraid to do something a little out there, a little different.

Don’t just think “right, I’ve got a small particle explosion that appears and sods off again”, see what happens when you switch the sprites around, what happens when you tweak some values, what happens when you scale and rotate things at different values, what happens when you try to do something subtle with it, what happens when you go completely batdroppingly overboard. Overlay stuff. Don’t be content with just one effect, layer, layer, layer. And learn.

All the “explosions” in War Twat are made up of small animated sprites scaled and rotated to extreme levels.

Play. And be cool.

There’s only one golden rule and that rule is be cool. I think you can be cool.

Try it today. Make something go bang.