Making Discrete Overland Tiles

Moving to a Discrete Map

We've been having some trouble with our old Overland Map.

It's too open, and players get confused about where to go and what to do. Moving heroes around the map felt awkward, and you were never sure how to defend your territory from enemies, who might enchroach from... wherever?

So we decided to move over to using discrete tiles instead of an open field.

• Heroes and monsters are always on one tile or another.
• When heroes and monsters are on the same tile, they fight.
• Moving between tiles takes time.

We think this will make the overland map more approachable. We maybe lose some of the simulationist value of the old map, but being honest with ourselves, we weren't really taking advantage of it, and that's not what our game is primarily about.

Wildermyth is a game about characters - your heroes, and their journeys. We feel like the new map is going to get out of the way and let those stories shine.

How to make a compelling Discrete Map

Maybe it's compelling. I don't know.

The gif above shows you basically the process we go through to generate the map.

We start with a Poisson Disk sampling, not random points. [math note: see http://devmag.org.za/2009/05/03/poisson-disk-sampling/]

That gets us a nice distribution of nodes. Then we make a Voronoi Diagram.[https://en.wikipedia.org/wiki/Voronoi_diagram (using this library: https://github.com/ArlindNocaj/power-voronoi-diagram)]

Now we have tiles, but there's a problem. Some of the boundaries between tiles are really short. Is the player going to understand that they can move across that one pixel border? Will they spend a lot of time squinting at the map trying to figure it out? So, we correct the short edges by pushing them outwards. [math note: we can get away with this because we're using Poisson disks, and we can control the size of the perturbation relative to the node size, so we don't break the diagram.]

Ok, that's better, but now we want it to look more natural, so we're going to perturb each line a bit. [math note: again, we get away with this because we have roughly equal cell sizes no real sharp angles.]

Cool, that looks like some interesting regions. Let's add elevation data, [math note: using fractal noise and this library] then use elevation to identify mountains, lakes, and oceans. Then we can make rivers in between. We want rivers to show up between the tiles, because that's how you think of them. [math note: polygon offsetting is cool and complicated. I explored using an inner straight skeleton approach (https://github.com/twak/campskeleton/) but in the end it was faster and easier to use an ad-hoc approach using our specific knowledge of each tile]

Ok cool, now let's take these contours and extrude them into meshes:

And then let's clean up the aliasing with some fancy shader tricks, add some trees, and some depth of field:

And that's where we're at. This isn't playable yet. That's the next step. But at least I know it can look good, and that's what I was mainly concerned about ;-)