A map that starts under the mist

· 3 min read · game-design, game-dev, cozy-game, rendering

The first time a player opens the map of a game, they learn how big the game is. In Lantern Valley that was a problem: the map only showed the valley, so a new player assumed the world was that one island. The truth is that there is a whole archipelago across the sea, and the map is the best place to say so.

The idea was to show that there is more, cover it with cloud and say that it is not visible yet. This post is how it was built.

A ring of mist #

The first thing the map draws is a ring of mist around the valley. It is not a decoration. It is the same bank of mist that exists at the horizon of the world, at 236 meters, with the tunnels that the lighthouse beam opens toward the first islands.

To keep the map and the world in agreement, the map code uses the same formula as the shader. The function that says "how much mist is here" is shared, so a tunnel opened in the world is a tunnel opened on the map, without anyone copying numbers by hand.

Islands you cannot see yet #

The islands of the route are on the map, in the right place, covered by clouds with a "?" and a caption that says "Not visible yet". They come from a single source, the same coordinates that the silhouettes at the end of the chapter use, so the map and the horizon cannot disagree.

The map opens wide enough to show the ring and the clouds at the edges, with a line that says there are more islands beyond the mist, and the minimum zoom shows the whole archipelago. Clicking on a cloud says that the island cannot be reached yet. Clicking on the ring says that the mist is too dense.

Three states, never two at once #

Each island is one thing on the map, in exactly one of three states:

State What the map draws
Under the mist The mist, as part of the ring
In the chart A "?" cloud, with a dotted route
Visited The island's ground, with no cloud at all

The chart is what makes an island pass from the first state to the second: when a lighthouse beam opens an island, it enters the chart and leaves the mist by itself. Once the character has been to an island, the cloud goes away and the map draws its ground.

A test enforces the rule: an island is never in two of these states. It is the kind of invariant that is easy to break when you add a new island, and a one-line test is the right protection.

Clouds drawn, not images #

The clouds are drawn on the map's own canvas, with the cloud function the chart already used, plus a ring painted once into an image. I considered using PNGs, and I decided against them for four reasons: the clouds stay sharp at any zoom, they follow the palette and the time of day, they add nothing to the download and they need no art and no license. A PNG would only be worth it if the art asked for a brush stroke that the canvas cannot do.

Why it is worth the work #

A map is the one screen where the game talks directly about its own scale. Covering the unknown with clouds, instead of leaving it blank, turns an empty space into a promise, and it costs almost nothing: a pure function, a shared formula and a few cloud shapes.

You can try it at lanternvalley.vercel.app.

Related projects