Like most old-school platformers (and many modern ones) Bleed is a tile-based game. For those who don’t know, that means the game world exists as a big grid. Each space in the grid gets its graphics by using a section from a larger image called a ’tile set’. A picture will express it better than any words I can muster:
See? Sections of the tileset are re-used and arranged to create whole levels!
So with that out of the way, let’s be honest. That tileset? Not so hot. It’s all muted and monochromatic and where the hell is that supposed to be, anyways? Well, it was supposed to take place in a mansion during a stormy night, but the Dream Build Play 2011 deadline was looming so it was brainlessly rushed out. Oops.
I started over, this time putting a lot of thought and research into the location I was designing — doing sketches, picking colour schemes, that kind of thing. “Mansion during a stormy night” sounds pretty simple, I guess, but there’s a lot of different types of mansions out there — as evinced by a Google image search — and having a strong visual goal is very important. I decided that climbing up the roof of the mansion would add some drama to the level, and I started by designing a tileset for the exterior.
So. Here’s my method, more or less. Once I have a clear idea of where I’m going, I rough out the important parts of the tileset. It’s done in greyscale so I can focus on making well-defined tiles that blend into each other well without worrying too much about little details. The player is stuck in there for a size reference.
Next I colour in the important tiles, which is usually where silly mistakes come in — much more useful than it sounds! Here I had decided on a dark purpley-blue as the main colour for the tileset to evoke the darkness of a stormy night. Good idea, sucky implementation, but I feel making mistakes is an important part of the process! They let you know what’s not working and help you improve, so every time it’s a step in the right direction.
Changing my colours a bit and putting them to better use. I experimented with patterns of roof tiles until I found one I liked.
Refining the colour scheme and colouring in the rest of the tiles to match the roof.
I had made a test level in Tiled (an excellent and free 2D tile editor) to check that all the tiles were repeating well and looking good together while I was doing this. You can see the test level here.
With all the important tiles done and looking good, I was free to use the remaining space in the tileset to add flavour to the level with trees, windows and other small details.
From there it’s a matter of revising and revising, changing colours and removing tiles that weren’t very useful to make room for ones that are.
Unfortunately I didn’t take any in-progress shots as I remade the interior tileset but I put the same level of research and thought into its design and followed the same basic method, both of which I believe helped immeasurably and I think you’ll agree.
Finally, a few tileset pointers I picked up along the way:
Hiding the grid: By their nature levels made with tilesets can look a bit artificial — just square images aligned in a grid. Good tilesets seem to hide their grid-based nature when possible, as I have tried to do here. The grass, for example, takes up two tiles vertically instead of just one. It uses more space but it breaks up the grid and looks more organic.
Maximizing tile use: It’s another big plus if your tiles can be used for more than one purpose. Most people are aware that the grass in Super Mario Bros. uses the same image as the clouds, only painted green. I’m not that clever but the tops of my trees double as bushes when placed on the ground.
Intelligent use of contrast: The further away something is from you the less contrast it will generally have. Keep this in mind when creating tilesets, making foreground elements brighter and richer in contrast than elements intended for the background. It’ll help give depth to your levels and better express where the player can and cannot stand. Two big pluses!
That’s it for now! Thanks for reading!