## Procedural Maps

July 18th, 2015 9:15 am

Hola!

While playing Invisible Inc. I suddenly wanted to build procedural maps like the game does. So I wrote a small procedural map generator capable of doing some pretty cool stuff. At the moment It produces maps like these:

The algorithm producing all of these maps is the same. Hovewer I programmed different “map-renders” to get different visual designs. As you can see it is capable of building simple rogue-like maps as well as more complex maps (like the valuts-and-caverns map you see or the hex-field landscapes). The main feature is: (other than using random maps … ) There is always a way from point A to point B!

You can generate some levels here:

“What does this algorithm do?”

Basically you feed my algo with sets of “rooms”. A “room” in Javascript looks like this:

[

[new JTile(1),new JTile(1),new JTile(1)],
[new JTile(1),new JTile(1),new JTile(1)],
[new JTile(1),new JTile(1),new JTile(1)],

]

This room looks like this:

As you can see its a simple 3×3 room. JTile(1) in the code above means “JoinTile” (or more simple: a Tile) of type “1”. As you can see in the image my map-viever interprets a “1” as a field of a vault-room. If I change the center tile to 4:

[

[new JTile(1),new JTile(1),new JTile(1)],
[new JTile(1),new JTile(4),new JTile(1)],
[new JTile(1),new JTile(1),new JTile(1)],

]

It looks like this:

As you can see, my map-viewer interprets a 4 as a field of dirt.

Now, here comes the main feature!

JoinPoints!

Lets change our room to this:

[

[new JTile(1),new JTile(1),new JTile(1)],
[new JTile(1,(1)),new JTile(4),new JTile(1)],
[new JTile(1),new JTile(1),new JTile(1,(1))],

]

See? I added a “,(1)” to the fields in the west, and south-east. Now lets generate 3 rooms instead of one and let’s have a look:

These are two of many possible combinations the generator may produce now. (Some parts of the rooms are hidden behind walls due to my map-viewer).

What happened?

By adding the “,(1)” I told the tile, that it may join with another tile of type 1 in any direction. You can read:

new JTile(1,(1))

as: “I am a Tile of type 1 and I will join with other tiles of type 1 in any direction!”.

Using only this, we already have a powerfull tool here. Add some more rooms of different types and shapes and give them different “join-partners” such as: “A toilet room always joins with a corridor” or “a vault entry always joins with a cavern” and you can build maps like this:

I’m working on a detailed tutorial at the moment, so if nothing of the above makes sense to you, just be patient 😉

“How can I use it for my games?!?”

If you want to, just go to my website and copy some of the current code under development. I wrote the generator in javascript for web browsers and in c# as a library for unity. Once I have the import/export part done I will publish it for everyone to use. Stay tuned!

Greetings:

Prowler!

Tags: , ,

### 3 Responses to “Procedural Maps”

1. Prowler says:

Thank you ^^

I just pixel’d a very basic tileset there. But I do like that one to

You can see the code in action an generate some of your own at http://www.scriptology.de/coding/proc/city/index6.html (in case you missed the link.)

2. darbycostello says:

Very cool. Quite similar to some of mine. Can I ask, are you using a cellular automata approach to your proc gen?

• Prowler says:

Hey! To your question: no In short I simply define 2D integer arrays where each number represents a tile type (dirt ground, tree in grass, wooden floor, etc.). I call them rooms. A map is generated by predefining a start room (for example a save room where your character can spawn) and then adding a defined number of rooms in a for loop. Not every room can be added to another room. For two rooms to join, they need to have matching join points. Like in a jigsaw puzzle. These are defined by saying something like: the entry (2,4) of my 2D integer array can be placed next to any of the following integers … So only matching rooms can be placed next to each other. With a clever room design you can build all kinds of maps.

[cache: storing page]