Procedural Generation – The Caves

Over the last several months I have been researching and experimenting with different types of procedurally generated maps. I was working on a top down, zelda-like game that used procedural generation to create the dungeons throughout which the player would explore, encountering monsters and hidden treasures. Development never got to far on this game, but it was a great learning experience and I got my maps to a state I was really happy with.

Over the last week, I’ve been doing more procedural generation for a game that my brother, Liam, and I are creating. It’s going to be a rather simplistic and casual game when done, but one of the most exciting things about it is that every level is completely generated from scratch, creating rich, varying, environments every time you play. You can check out what’s been done so far (as of this post) here.

Since posting that, I asked if people were interested in me writing up the process that my generation takes to create the maps seen in the demo above. I got enough interest that this definitely seemed worth while, so here it is!

 

PART ONE: THE BASICS

Before I explain anything, make sure you’ve actually seen how the generation looks in-game. If you missed the link above, see it here.

The idea for this game was to create a vast cave with interesting tunnels, pockets, and enclosures. I started off with a number of different methods that ended in very interesting shapes but nothing quite like how I wanted. I searched around a bit for different methods and ran into Chevy Ray’s example that he posted here (edit: dead link). I never actually took a look at the code for this (not sure if it’s available or not?) but I liked the basic approach he was taking, along with his results. My end method is relatively similar to what he was doing, with some variations.

CREATE THE MAP
The first thing that my generation code does is create a 2D vector (array), containing ID’s (integers) of the different types of cells. To start, I create a 400×300 size grid, all with the value “1″. In my case, ID=1 stood for walls, and ID=0 stood for empty space (titled floors, even though they’re not, really). Later on I add Water, which is ID=3, but that’s not important right now.

THE MINER
Once the map is created, I then create a “miner”. In my case this is actually just called a “Cell”, but it makes more sense if you consider it to be a miner. The miner is created in the center of the map (200×150) and is labeled as “active”. When generating the map, I create a loop that goes through every active miner, and runs their “dig” function. When the miner “digs”, it picks a random cell around it, that is not yet an empty space (ID=0) and digs it out, moving itself in that direction.
For example, if the miner was at 5×4, and decided to move UP, it would dig out the cell 5×3, and move itself there.

Whenever a miner digs, it also has a small chance of spawning a new miner in a random direction. In my generation code, the chance is about 8% that a new miner is added.

If a miner has no walls surrounding it (ID=1) then it unactivates itself, and stops digging. If this miner happens to be the last miner alive, then it just moves around until it finds a new wall to start digging.

CALL OFF THE DIG
Depending on how you want your maps to look, there are a number of different ways and times you can stop the miners from digging.  You can stop the digging when there is only 1 active miner left, which is what I was originally doing. The problem with this though, is sometimes you’ll have gigantic maps, and sometimes your maps will be 4 cells big. It’s too random for me.

Instead, what I decided to do was say that once 400 miners had been added, STOP digging. 400 is just a random number I chose, after experimenting with higher and lower values, and this size seemed to represent a good amount of miners for the size of level I wanted.

WHAT WE’VE GOT
At this point, my levels were generally looking like this:

The general shape is awesome (in my opinion) but it’s cluttered with horrible little bits of dirt everywhere! Which is why we needed ….

 

PART TWO: CLEAN UP!

So, as you can see from the image above, the map definitely needs some cleaning up. If we were to stick a player and run around in that it would feel horribly awkward and cluttered. This had me stumped for a little bit, because I was trying to think of ways to alter the original generation to remove these oddities. In the end though, I decided it would be much easier to simply run through my map one more time, and remove anything I found unfitting. So, I ran through every cell in the map, checking the following with each cell:

LONELY WALLS
These cells were walls sitting all by themselves with no one around. If I found any walls that had no adjacent walls (up/down/left/right) I would remove them.

STRANDS
These cells only had 2 adjacent walls, in most cases creating long strands of walls. These looked really awkward and just took up space, so I removed all of these as well. This also gave the map edges a more rounded look.

TINY ISLANDS
These cells were a group of 4 cells. I removed these as well.

This might sound like I over do it, but ultimately the end results are a lot cleaner:

 

 

PART THREE: WATER(FALLS)

This is by far the easiest part of the entire thing. I had a few people think that the water actually may be part of the generation, but, it definitely isn’t. Water is added in at the very end, after we have the result above.

THE POOLS
The pools at the bottom of the map are really simple. No, they aren’t generated by waterfalls, and no, there isn’t some magic algorithm that makes them. All I do is grab the lowest empty cell (ID = 0) in the map, and fill every cell 20 cells high from that point up, with water. That’s it.

THE WATERFALLS
The waterfalls are also really simple. I grab 4 random points that are adjacent to a wall (above it) and create that point as the start of the waterfall. Then, the water just automatically keeps moving down until it finds a wall below it, at which point it moves left/right until it either can’t anymore, or it can move down again. Once the water can no longer move down, it stops, renders out the waterfall (to a tilemap) and removes itself (well, the thing that generates the water fall does – obviously the graphics for the water doesn’t).

 

 

PART FOUR: TILE PLACEMENT

Not going to go into a lot of detail at all for this, because it’s not really part of the generation. But basically once the map was fully generated, I create a bunch of vectors (arrays) of different areas for quick access, such as floors, water, ceilings, sides of walls, etc. Once I have these, I can really easily and quickly place tiles (for example, I can just run through all the right-side walls placing the respective tile).
  

CONCLUSION

That’s it! Hopefully it was an interesting read and helped you make your own maps. If you somehow missed the live example of this in action, you can find it here. Feel free to post any questions or comments, I appreciate them! :D


 

Simplifying Level Creation – Source

I recently posted a blog post about how I was generating quick levels with dynamically-placed tiles, and a fair amount of people I talked to asked if I could share an example/source for how this worked.

 


“An example of a level with automatically placed tiles”

 

So, today I threw together a quick example using FlashPunk for people to download and mess around with!

 

DOWNLOAD: Get it noooow
Try it out, and tell me whatcha think! :)

Simplifying level creation

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 :D

Flash Punk Example – Lights & Shadows

Mentioned this on twitter and on the FlashPunk forums, but forgot to post anything about this here…
Screenshot
Basically this example shows how to create a simple, yet fast and flexible light system using Flash (and more specifically, Flash Punk, although it’d be easy to use in straight up AS3 as well, with a few modifications). It allows you to create lights where ever you choose, and then move them around, resize them, and modify how bright they are.

Try it out here, download the source here, and check out the topic on the Flash Punk forums here.

Advanced Platform Engine [FP1.3]

I recently started creating an Advanced Platform Engine for Flash Punk 1.3. I think it’s come together quite nicely, but I’m still looking for some general suggestions & feedback on what to add next, and obviously any feedback I can get on the code already there.
 
You can check the Flash Punk forum topic here.
 
Or you can get all you need right here in this blog post!
Download:Open Sourceness!
Give it a go: Play!
Ogmo: Get!
 
Anyways, hope people find this “advanced” open source platform engine useful. Any feedback, again, is obviously very welcome.
 
Cheers!

FlashPunk Open Source Platform Engine

Hey, I updated my Open Source Platform Engine to Flash Punk 1.3, and also cleaned up, and commented (a frequently asked addition) the code.

 

Check it out on the Flash Punk Forums!

 

I’m hoping in the near future, after Leap 4 Blue is all wrapped up, to recreate the engine with a whole lot more features. Basically make like a super customizable, easy-to-use, readable, Flash Punk platform engine that people can use.

 

Currently, even though this current engine is really, really simple, I’ve seen a large number of FP users who have stated that they use the engine, so I think a fair amount of people would find a more in-depth engine to be useful.

 

It’s a thought. Probably be fun to make. Maybe finish that tutorial as well while I’m at it.

Flash Punk + Tutorial

Yesterday I decided to try out the newly released Flash Punk, an AS3/Flash Library created by Chevy Ray. I had previously made games in AS3, and also had tried out Flixel. I never really went very far with either.. AS3 was too frustrating for me, and too complicated much of the time. Flixel, though much better, still  didn’t do quite what I wanted.

 

However, even after 2 days of using Flash Punk, I realized that it’s just want I want when developing flash games. It’s easy to learn, organized, and does everything I need it to do, from drawing sprites, to doing nice collisions with walls.

I’m still experimenting, but you can definitely expect to see a few games in the future using this library and flash. I’m really enjoying it. I already created a small platform engine.

 

I also spent the last 2 and a half hours writing a tutorial on how to create a platform game in Flash Punk, which can be found here.

 

I’m really too tired to type anymore.. soo, that’s it. Good night.

Adventures with AS3

[Brought over from last blog]

I thought it was about time to post my adventures with AS3. As most of you know (if you follow my blog), I’ve recently started to mess around with AS3 using Flash Develop.
I first started over a month ago, but had to stop for almost 3 weeks while I was away on a trip.

However, throughout the last week I’ve picked it up again, and started making my little flash shooter, found here.


AS3 is a really interesting language. It first reminded me of C#, as the syntax scheme is similar, and the way things are run are also similar.
I don’t know all that much C#, so I couldn’t go into very much depth as to what is similar, but the basic layout of the code didn’t seem all that different.

Anyways, it really didn’t take me very long to pick up the basics of AS3. I had a running platformer with pixel perfect collisions within the first 4 days. I think this is due to the fact that I’ve been programming in Game Maker for over 3 years, and messing around with other languages such as C#, VB.NET and PHP. However, if AS3 was my first language, I can tell you right now I probably would have stopped dead in my tracks and quit programming the first day. Not to say AS3 is extremely hard. From a programmers perspective it’s relatively easy. But, in comparison to Game Maker, it’s a lot more difficult to work with.


Some things that bothered me right away was the fact that when a child of an object is destroyed, some of its events aren’t destroyed with it. If you think about it in terms of Game Maker, say you have an object that then destroy’s another object. When that instance is destroyed, its step event doesn’t necessarily stop. So, in the case of my shooter game, it caused very weird bugs when the game was restarted, enemies were killed, etc. The only way to fix this problem is to make sure you destroy the “ENTER_FRAME” event (along with all the other possible interfering events).


Game Maker has rooms, where you can place objects of certain types. When you’re done with that room, you can simply switch to a new one, without a single problem.
AS3, however, does not have rooms. It basically just has one stage, and you have to create and remove objects appropriately to build each part of the game (be it a menu, a level, or a highscore table). I’ve come to build objects for each part of the game I want. One sets everything up, another acts as the menu, another as the main game control. The Menu then adds more objects when it’s created (such as the title, or the menu buttons). Once it is removed, all of its child objects are removed with it… a bit more complicated than Game Maker!


So, it takes some time to get used to it, switching from Game Maker to AS3. (Not to say I’m stopping development with GM – I’m certainly not! I really like it). They both have their ups and downs, but Game Maker is definitely easier to use.

hmm.. thats all I have to say about AS3 at the moment.

Cheers.