My Level Design Pipeline

Saturday is the day I share screenshots, as is the olde tradition of #screenshotsaturday. It's very tempting not to bother this week, and just get back to development, in fact, perhaps that would be the right thing to do. I started to fall behind schedule on Thursday this week, I ran into a series of really tough bugs that demanded my attention, and I find myself almost two days behind where I thought I might be now. Oh well! I endeavour to have caught up by this time in a week.

Managed to finish two more levels and get them in game. One of them is a private library where there is evidence of a battle having taken place:

The other level is more of a reception area, which for an unknown reason has a rather fancy chandelier hanging within it. Doesn't make a lot of sense, but the level looks less sparse. In an effort to be interesting this week, I've posted the various stages my level goes through in its' painting.

The very first step is to use my rubbish level editor tool to decide upon the layout of the map, where the obstacles are. It's a very quick tool I made for a project long, long ago, that lets me click and drag on tiles to set them as obstacles (or not-obstacles) and then compile them down to a simple string of 1's and 0's. I can also read strings back in. Here's what the tool looks like when testing the collision array string for the reception level.

I pretty much paste that image into Photoshop, enlarge it to my painting size, and then commence sketching straight on top:

It has been remarked to me that my initial sketches aren't particularly sketch-like, in fact, they are rather neat. I agree somewhat, perhaps I should be messier and put more effort into the inking, but if I'm drawing within an isometric perspective I'll feel more comfortable getting solid lines down early. The grid I'm drawing on top of, which I've pasted from my level editor tool, helps with that. You might also spot a few black lines, which shows I've got going on the inking. Which looks like this when it's done:

Magical. I have a favourite inking brush I use in Photoshop, it's not completely round and it's certainly not the fluffy-feeling default brushes that come with Photoshop. I do think it is worth trying a bunch of brushes out till you find one that mimics how you actually ink in real life, I like to get lots of varying line widths all up in there; making it a little more natural, so I went for a brush that is wider than it is tall.

Then I colour. My colouring skills are the weakest of all. I made the decision early on in Miasma Story's development to abstain from shading or shadows, after all, I would like to finish it this year, please. But I'm still not good at picking good colours, and I think that shows in the indoor levels, in fact, I'm moving it back outdoors in the next few because I think they have turned out better. No matter, I'm practising!

I copied and pasted the candles round the chandelier there, not everything is hand drawn individually. Oh, and a quick beginners tip for making lines and colour edges really crisp, paint at at least 2x the resolution they'll be in game. Then there is a little blurring when you shrink it down, and it all looks cleaner. Particularly helpful for me, my strokes are not usually without unevenness, and so it helps there too.

The tricky thing to not just remember but practice effectively, when painting isometric graphics, is to keep things on different layers. In this level, players and enemies will want to wander behind the desk, so the desk needs to be another object in the game world. Layers! Important stuff.

And that is my level design pipeline. I don't really pretend to be a fantastic artist, nor a fantastic programmer, but I'm doing both and hopefully it'll be 'fine'. That's what I'm going for. Now to get back to development!

posted by Matt on 16/7/2011 at 8:46 Return to blog