Over the last few weeks and months I’ve been having fun creating levels that don’t really use tilesets, for numerous different games. Instead, I’ve been using different level editors that produce shapes (by placing a bunch of points around) that are loaded into the game and used as the walls. You basically end up with levels that look something like this:

The walls are created from a bunch of nodes laid out in ogmo editor.

Last night, however, I decided it would be fun to try and place tilesets over these walls automatically, to create really dynamic and interesting levels. This way, I don’t have to painstakingly place each tile in every location as I flesh out vast levels. Instead, I can trace the shapes I want, save the level, and BAM the basic key tiles are automatically placed.

Looks pretty, right? Well, it’s just a single grass tile, and a single dirt tile, looped over and over again across the edges of the walls that would otherwise look like this:

So, I had a few people asking me how I got the grass tiles to loop like that. It was actually really easy. Basically, I would loop through all of the nodes that ogmo editor output for each wall, creating a bitmapdata (this is in Flash, AS3), drawing a line from one to the next. Then I would fill in the shape. After it looks like the image above, I would loop through all of the nodes again, except this time placing grass and dirt tiles (rendering them each to their own bitmapdata).

What would happen is that on each node, it would look back to the previous node and figure out the distance between the two. Then, it would divide this distance by the width of the grass tile, and place one at each interval between the two nodes, while at the same time figuring out the angle for each grass (which is just the angle from the last node to the current one).
Then my loop would go onto the next node and do the same thing all over again, until all the places between every node of the wall was filled with ever-so-lovely grass.

I think I’ll probably throw together a quick flash punk tutorial on how to do this in the next few days, for those that are interested on the exact details