Week #1: Making a Map Editor!

Color TD is looking ok, and the boring stuff is out of the way (drawing to screen, making creeps, making towers shoot at creeps, etc). Here is a very very basic look at the game so far

Don't mind the programmer art!

 Before I got too far ahead of myself though, the first thing I had to do was whip up a map editor! This is a really necessary tool that allows me to quickly throw together all of my components without needing to worry about too much brute force coding. If I don't do that, things like this happen:

And this is just for the tiny map above!

The map editor was great fun to make, and I was able to include some really awesome time saving features. Check it out below!

The Map Editor

This is an overview of the map editor. The main components are:

• A grid of tile obects, which contain information about the type of tile, an image, and if a tower can be built on it.
• A tileset. Think of this like a palette. It allows for a group of tiles to be reusable so that if a tile needs to be placed, I don't have to make each tile from scratch. Here is an image of the tileset editor:

Auto-generate tileset lets an entire tileset be loaded at once by loading all tiles of a chosen naming scheme

• Paths, which are essentially the tracks which creeps will walk upon.

This is a pretty basic overview, but it has great functionality. However, one thing I realized early on is that manually creating the map would still take a lot of effort, so I decided to let the map editor do the work for me by implementing a system by which tiles are automatically generated based on the paths drawn.


Automation: A Lazy programmer's Best Friend

Generating tiles is based on paths starts by first looking at horizontal and vertical path sections. For each tile while traveling along the section, a straight tile is drawn in empty areas, and, if another path is crossed, a cross tile is drawn. Lets take a look at this in action:

  

The next step is to add in corners. To do this, the program looks at each path node that isn't the first or last (obviously these can't be corners), and for each node, gets where it is in relation to the previous node and the next node. Once these 2 locations are determined, the corner is rotated so that it matches up with these locations. Lets take a look at how this works:

After that step, we add in what I call T tiles. These occur when a straight path merges with another existing straight path. Since the above approach cannot be used, and also as these types of connections can span over multiple paths, the best system is to check the tiles to all 4 sides of the current path node, and see if they share a border with the node. Again, let's look at how this works visually:

Finally, we cap off the path by setting the first and last nodes to the start and end tiles! The order of these is very important also, as we don't want to draw a crossing where T-tile or corner should be, or a straight path where a crossing should be, etc...

And there we go, a completely automated map!

Working out bugs took a lot longer than I expected, especially when it came to saving and loading maps! Luckily everything is worked out. All that is left now is importing these maps into the game engine! I still need to make editors for creeps and towers, but I think for now I'll be getting back into working on the engine, expect to see updates on UI soon, as well as maybe a couple videos!

Thanks for viewing and stay tuned for more soon!