Dividing the Map into Regions

So in my last post I had a pretty good randomly generated island. My next task was to split it up into selectable regions to make the map for my strategy game. As mentioned last month, I ended up not using voronoi cells after all to generate the island; well, I realized that could still be a good approach to generating the map regions, just layered onto the more organic looking island.

Here are a couple examples of the end result:



I may want to make the borders more irregular later, but overall not bad for a prototype! Incidentally, the colors are just random for now in order to test the look: the red and blue regions would be the colors of different empires, while the dotted lines are unexplored regions.

As implied by my first post about this game, I had originally intended to have a hex-map overlaid on the island. However that looked pretty bad when I tried it, so I tried a different approach using voronoi cells.

First I needed to pick a bunch of seed locations on the island for the polygons to be generated around. The algorithm I devised was pretty straightforward, although kinda inefficient (but hey it only has to run once, so who cares): first pick a random location somewhere on the map, then run that location through a series of checks. Reject this location and pick a new one if any check fails, but if it passes all the checks then add it to the list of seeds. Keep doing this over and over until the list is full. The list of checks got added to and refined as I worked on it: first I just made sure the picked location was on land, then I made sure it wasn’t too close to any other seeds, and eventually I needed a couple more edge-case checks like making sure it wasn’t on a tiny outlying island.

With this list of seed locations, I simply passed this list to the voronoi library and it returned a list of polygons. I used that list to draw a bunch of SVG (ie. vector) objects. Then I split the island image into two layers, one underneath and one on top of the vector layer, so that I could draw the sea onto the top layer and cover the polygons with the nice coastline. Finally a little tweaking of the CSS and the visuals were all done!

I did also need to generate a list of connections for each region. In this image I drew ID labels for testing, the darker region is being selected, and the output at the bottom is console logging of all connected regions:


The voronoi library already generated most of the connections actually. Like picking the seed locations however I needed to reject some of the polygon connections because those regions weren’t actually connected on the map (eg. the polygons touch in the voronoi diagram but do so out at sea on the island map). And then after rejecting bad connections I found that sometimes there were rare cases where all the connections were rejected, so then I checked for regions with no connections in order to restore one of the rejected connections. Somehow I’m guessing one source of bugs when I release the prototype will be just tweaking the generated region connections…

Anyway, my map is complete and ready to play on! Now I’ll proceed with the rest of the game, starting with building the high level UI surrounding the map and a sample popup. However as also mentioned last month, my publisher wants to do a second edition of my book about programming in Unity so I may not work on this game much until that is done. I guess we’ll see how much happens next month…

Incidentally, I’ve been referring to them generically as “map regions” in this post because the naming is currently a bit up in the air. In the code I’ve been referring to them as “fiefs”, mostly as a nod to Nobunaga’s Ambition, but now I’m leaning towards calling them “provinces”, like in Dominions. I suppose I can still change it after releasing the prototype, but I’d prefer to have this naming nailed down sooner rather than later because it’s pretty fundamental.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s