Squidi.net Sites:     Webcomics   |   Three Hundred Mechanics   |   Three Hundred Prototypes
 Free Pixels
   - License

   - Default
   - Community

   - Dungeon
   - Interactive Map
   - Zombie Town

   - Making Zombie Town


Mar 25th, 2008
Tutorial :: Making Zombie Town
Remember this?
 - - - O - - - - - - - - - - - -+- - - - - - - - -
                     Z          |                 
+-----------------+========+-+     +-+=========+-+
|..+===[*]========+        |.|  |  |.|         |.|
|..|                    g  |.|     |.+---------+.|
|.t+-----------------------+.|  |  |.|#########|.|
|..|###::#########::####::#|.|     |.|#::###::#|.|
|..|######[ | ]############|.|  |  |.|###[ ]###|.|
+--------------Z------Z------+     +-------------+
   @    Z Z   Z   Z  Z          |    Z    Z       
 - - - - - - - Z - - - - - - - -+- - - - - - O - -
         Z     Z   Z  Z   Z      Z      Z     Z  Z

The origin of the Zombie Town tileset comes from one of the ideas in the Three Hundred, namely Mechanic #048 - ZombieRL. In it, I specified a sort of ASCII version of a city inhabited by zombies. Though I don't normally begin with a step like this (I usually look in videogame strategy guides for my visual reference), but it worked just as well at setting the visual direction of the tileset.

The next step is prototyping. I find it immensely useful to grab a sheet of graph paper and just draw out a proposed tileset on there first. It's very quick and you can get a feel for how a tileset will feel before you get down in the pixels and do your thing. For example, the building to the left in the above image uses two tiles per floor of the building, which makes the building seem flat and off perspective for the overhead view I was going for. Creating a city of buildings this scale, including skyscrapers with a dozen or more visible floors, would look entirely warped.

The building on the right is much closer to the feel I am going for. You'll notice that there is still something a little fishy about it. The sidewalk that goes around the building extends too far north of the building. However, in a world build from tall buildings, the gameplay disadvantages of not being able to see behind the buildings is very bad. So, we just hope the player isn't too bothered by it and explain it away as having a basketball court or something behind it and continue with the knowledge that there will be no horde of zombies hiding out of site of the player.

Now that I've got a decent scale set, I do the line art. Simply put, I draw the big black outline that defines the shape of things to come. It's a very square, very quickly done outline. The details will be refined through an iterative process. Right now, just need to block out the general shape so I can get a feel for the size. You'll notice that it is tile for tile the same as the picture I drew earlier. A reference for this sort of thing helps keep tile boundaries in the right places. As I'm going, I usually keep a character sprite or two around to keep some perspective. I do this when drawing backgrounds in the comic too. There is nothing more frustrating than drawing a level, only to find out that your characters look like midgets in it. In this case, I've designed the character sprites first, so the tilesets must match them rather than the other way around. You'll notice that I use a checkerboard pattern in the background. This is to help me keep tile boundaries clear, and to help with small things like centering a window in the middle of a tile.

Happy with the scale and perspective, I then do a tile count. I try to figure out how many unique tiles I'm working with. Here, there are 37 tiles, which seems like a lot, but this isn't even remotely a robust set yet. For instance, the small wall around the roof will require probably another dozen tiles to fully allow for any combination of turns, but those can be created relatively quickly. Usually, you'd probably not bother to do all of them and just accept that there are some floorplans you cannot create, but since these tiles are 16x16, there could be thousands of them before memory usage becomes a problem.

This is a quick color. The purpose of this phase is simply to figure out the color scheme and getting the shading right. The main thing I spent time on here were those light edges that separate each floor. They actually go around the building on the sides, so I needed to make sure the building and ledges were shaded in such a way that it was obvious. I'm still not happy with the ground floor edge tiles. Also notice that the shading has added a few extra tiles for the sidewalk on the right, and one on the roof. So far, to get to this colored state, I've put probably three or four hours into it, over about three days. Building an entire world is not easy. It's a long road that will represent literally hundreds of hours of work on my part.

This is an old mockup (you'll notice tiles that are changed or missing from the final tileset. The blue hue is to give it a nighttime feel. You can see where I've experimented with different colored buildings, buildings elevated from the ground with a staircase, different types of windows (included boarded up and with flowers), parking spaces (in the north part), and in general have tried to create a basic layout that would put the street layout tile system to the test. I likewise have some other mockups that try to put together buildings with odd shapes (like U's or L's) or that are tiered with parts of the building being shorter than others. In general, I try to put the tileset through its paces by trying out odd combinations and seeing where I need additional tiles to make it work.



Copyright 2008 Sean Howard. All rights reserved.
Creative Commons License