Step by Step: The Layers of Map Design

Desperation Gameplay Pic 01

When making the maps for Desperation, I took numerous passes on the designs and layouts of each area before they became the completed forms you see in the completed game. These are those steps, seen over the course of developing the main play area of Oldtown in Desperation.

Step 1: Sketch it out


To ensure that the tiling process goes quickly and with little error, it’s always best to sketch out the areas first on paper, getting the play area you want to make down first and transferring them into the editor later. The pre-planning of maps allows for much more trial and error and faster iteration times for the simple top down maps that Desperation uses than simply messing around in-editor.

Step 2: Delineate Game Space

Desperation Map-Rough

The first step I took in the editor was to pick out the tile set I wanted for the ground and use it to cover the entire map. Then, I would take another tile, it didn’t really matter which, and use it to fill in the areas that would be inaccessible, mostly by the fact that they were buildings in Desperation’s case. This would have the map transferred to the editor completely, but abstracted, without any detail to the area shown.

Step 3: First Detail Pass

Desperation Map-First Pass Depth

This pass is primarily to add the depth of the environment to the map. The red tiles I used to mark the map were replaced with tile sets for the buildings that belonged there, and the wall that marked the ends of the game space on the top and left of the map went up. The map is still lacking most of its detail with buildings simply acting as maze walls, with no doors or windows to indicate their function.

Step 4: Second Detail Pass

Desperation Map-Second Pass Detail

The second pass adds most of the detail to the map, scarring it with cracks and fissures of the years of conflict and lack of maintenance that Oldtown has seen, alongside the patches of grass taking back this urbanized landscape. Roofs now have holes, buildings have structural damage, and debris and remains block off the bottom and right edges of the map from player access without making it seem too artificial of an obstruction. The top of the map has also seen changes, with the land beyond the wall now seen to be the coast, cutting in and out of the tiles making  up the ocean. The map is almost complete, with all tile work more or less done at this point.

Step 4: Final Pass for Touch-Ups and Eventing Effects

Desperation Map-Final Pass Touch Ups

This last pass adds the effects done through eventing, like the nighttime, rain, and lightning effects and sounds that are seen in the area’s completed form. It’s also here wher I added in the enemy and item locations on the map through eventing, as well as some small details that couldn’t be added to the map via tile painting, like the doors on the openings to the interior spaces. This step can go the fastest, or the slowest of the steps presented, all depending on whether or not you are using multiple of the same events (like enemies or items) that you can copy and place over the map, and whether the scripting process for creating events goes smoothly.

After that last pass, the area is officially complete, aside from periodic tweaking, of course, but nonetheless,  the area looks how it will in the final game. If you want to check out more maps form desperation, check out a gallery here.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s