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 
Yes! I’d love a tutorial on this! ^^ Awesome work! Keep it up! And that second screenshot better be from an actual game, cause I really want to play that! :3
The 2nd screenshot is from a game!
Hopefully will have it done in a week (no idea if that’s possible or not but Liam and I are trying).
Also, will definitely write a tutorial when I get a chance.
This is absolute genius! Do you pre-render the level into a BitmapData or do you redraw it every frame? I can imagine scenery that wiggles around a bit but I’m not sure what impact you’re seeing on the frame rate.
Thanks! When the level is loaded, I create a few BitmapData’s that have the bits rendered to them, and then every frame I render these.
So, on level creation I create 3 bitmaps, the first one being the dirt, the second one being the solid wall, and the last one for the grass. Everything at the start is rendered to these, and then every frame these are rendered (in the case of Flash Punk, they’re all rendered to one bitmap that acts as like a buffer).
I think you would see a considerable drop in the frame rate if the grass and dirt was being re-rendered every frame.
Looks sweet! I too have used and enjoyed Ogmo, but never tried using nodes. How do you choose which regions should be walls/space? Do you use different objects in Ogmo, or do you actually calculate number of edges surrounding each point?
Hey Danik,
I actually place an object that defines which side is the outside, and which side is the inside. So, wherever that object is placed is where it starts to fill the wall from, and once the wall is filled I can detect which side the grass should be on.
I have however been using a script that can detect which is the inside/outside of a particular shape, but I was finding that, sometimes, I actually wanted to fill what would be the outside, rather then the inside …
(in the Ogmo screenshot above you can see an object called “F” placed near the center of the screen. That’s the “Filler” object)