Red Blob Games: Labels on Maps

首页发现

Red Blob Games: latest blog posts

Red Blob Games: Differential heuristics Red Blob Games: Responsive design calculator Red Blob Games: Academic citations Red Blob Games: Highlighting interactive code blocks Red Blob Games: Optimizing page size Red Blob Games: Writing a guide to SDF fonts Red Blob Games: URLs with trailing punctuation Red Blob Games: What I did in 2025 Red Blob Games: Goodbye Sass Goodbye Sass Red Blob Games: RotMG map seeds Red Blob Games: Mapgen4 Mapgen4's use of WebGL2 Red Blob Games: Mapgen4 river shader Red Blob Games: Mapgen4 renderer Red Blob Games: Harnessing ChatGPT hallucinations Red Blob Games: Let Let's write a search engine, part 2 of 2 Red Blob Games: Let Let's write a search engine, part 1 of 2 Red Blob Games: Hexagon conversions Red Blob Games: Mapgen4 trade routes Red Blob Games: De-optimizing mapgen4 Red Blob Games: Hexagon spiral coordinates Red Blob Games: Thoughts on Flash Red Blob Games: What I did in 2024 Red Blob Games: Hexagon page animations Red Blob Games: SDF Halos SDF Halos Red Blob Games: SDF headless tests, part 2

2024-08-21 · via Red Blob Games: latest blog posts

Blog post: 20 Aug 2024

My friend L recently mentioned that he hadn’t seen any blog posts from me. It’s true, I haven’t posted for a while. Earlier this year I had explored signed distance field fonts, in particular using Viktor Chlumský’s multi-channel distance fields^[1]. I really enjoyed the many experiments I did, and I learned a lot. I had intended to use it in a real game project but the timing wasn’t right. So I put it away. Then before I got started on a new project, life happened. I had to take a break and attend to other things. I haven’t been blogging because I haven’t had projects to blog about.

Then in July I started thinking about other places I could apply the font code. I thought back to my 2019 blog post about map annotations^[2], where I observed that even small amounts of text added to a procedurally generated map could make the map much more interesting. I started dreaming up a new map generator. Broadly, the tasks would be along these four categories:

Procedurally generate a map that has interesting “point” features including chasms, volcanos, waterfalls, and towns.
Identify large scale “area” features on a map such as peninsulas, bays, and mountain ranges.
Generate names for both point and area features, tied into geography, history, cultures, etc.
Place labels on the map corresponding to these features.

Normally I’d approach this as separate steps, but I wanted to consider the possibility that these steps influence each other. For example what if I identify two adjacent mountain ranges that are each too small for a label? I could modify the map to turn these into one larger mountain range. Maybe I modify a label to match the size of the mountain range, or modify the mountain range to match the length of the label. Maybe I favor east-west oriented geographic features because it’s easier to read the labels for them.

Before I got too far, I wanted to get a sense of what the final maps would look like. Seeing the end result can help me decide if this is going to be inspiring or mundane. For now, I can manually identify features and generate names to get started. I wanted to quickly get something running, the equivalent of rendering a triangle in a 3D world. I used a static map image and then I drew text on top of it using my distance field font renderer from earlier this year:

That’s the “hello world” level for this project. The next step was to try text that I might actually want to render:

I decided yes, this would be a nice summer project.

The next step was to spend a lot of time reading about map labeling. I made notes for myself. I don’t normally share these notes because interpreting them is dependent on what’s in my head, but I’m going to share them here so you can get a sense of the kinds of notes I take while reading:

https://en.wikipedia.org/wiki/Automatic_label_placement^[3] and also a paper evaluating algorithms suggests simulated annealing is best
for areas^[4] - polylabel
Positioning Names on Maps^[5] - paper by Edward Imhof, 1975, paywall
https://observablehq.com/@veltman/centerline-labeling^[6] - @veltman’s page used by Azgaar’s project
heredragonsabound has many posts on this subject
- mewo2’s post http://mewo2.com/notes/terrain/^[7] → code^[8]
  - city labels are placed on one side of the city icon, with penalties for overlapping with other things
  - region labels get a score for each possible location, with overlaps decreasing score, bonus for being over land
- https://heredragonsabound.blogspot.com/2017/04/use-force-layout-luke.html^[9] also - on imgur^[10]
  - scott says mewo2’s tries label positions but doesn’t let them move around; he’s using force layout instead
- simulated annealing part 1^[11] and part 2^[12]
  - uses simulated annealing because force layout got stuck in local minima
  - tip: put margins on the left/right of labels so that they don’t merge with an adjacent label
  - tip: save intermediate steps because sometimes with simulated annealing the final result is worse
  - tip: spend more time moving labels that are currently bad, and not the ones that look good already
  - tip: use a spatial hash to speed up the intersection tests
- labeling areas^[13] is different than labeling points
  - some shapes are much harder to label, but he avoids making those shapes
- labeling coasts part 1^[14], part 2,^[15] part 3^[16], part 4^[17], part 5, part 6
  - measures the curvature of the coastline to decide what goes there (coast label vs bay)
  - labels along a curved path didn’t look good in his experiments, but arcs worked ok
  - to make a mysterious area like “The Lost Coast”, eliminate some of the features generated there
  - he also has a special “islands at the end of a peninsula” feature he wants to label
  - he’s using code to detect existing peninsulas and bays; try the simplest thing, test it a lot, tweak it
  - bays can have multi-line labels
  - also label “points” as navigation aids
- labeling oceans part 1^[18] and part 2^[19]
  - unlike other area labels, there’s an implied extension of the ocean past the map border
  - places candidate circles in water, bonus for touching the map border, might be better if circle goes partly off the map
  - labels along an arc
  - arc curve should be pointed away from the center of the map
  - label text should be upright
- river path labels part 1^[20], part 2^[21], part 3^[22], part 4^[23], part 5^[24], part 6^[25], part 7^[26]
  - looks for less-curvy location along the river
  - smooths out the path using Visvalingam’s Algorithm^[27]
  - offsets the label from the river
  - uses simulated annealing to rule out bad placements
    - uses the Greiner-Horman^[28] polygon clipping algorithm to detect polygon intersection
    - the Martinez-Rueda can handle more cases
    - Sutherland-Hodgman^[29] is faster but more limited, and he uses it first before Greiner-Horman
    - getting the area of the polygon intersection worked better for overlap avoidance than a boolean yes/no intersection
    - he plotted number of iterations vs quality of results, and found most of the improvement happens at the beginning
  - check the font metrics to make sure you’re getting the bounding box you want
  - don’t need to label all rivers; he labels the ones that are “substantially longer” than the river name, and only ones that are straight enough
  - Imhof’s paper suggests adding more labels for the same river, above major fork points
  - he’s using svg so he can reuse svg’s text along path, zoom for debugging, and other svg features
  - using a rectangle approximation to the curved path led to labels not being placed right, so switched to a polygon approximation
  - fixing upside down labels was trickier than it seemed at first
  - sometimes it’s ok to have labels drawn on top of graphics (forest, mountains), but masking/outlining can help make it stand out
  - to make labels look hand-drawn, he offsets/rotates characters occasionally
- island labels part 1^[30], part 2^[31], part 3^[32]
  - he generates groups of islands with a separate algorithm, not just single islands as part of noise generation
  - draws convex hull around them
  - wants a label for the whole group
  - had an issue where an island merged into the mainland, so the labels were wrong
  - when there are lots of islands, the labels are often too crowded
https://frozenfractal.com/blog/2024/7/24/around-the-world-18-charting-the-seas/^[33]
- instead of force layout or simulated annealing, tries a bunch of possibilities in one pass

I’ll sometimes take parts of my notes and turn them into a proper page, but most of the time I don’t. I use text files instead of bookmark services because I want to be able to group things together in outline form. I hear good things about Obsidian^[34] but I use emacs org-mode.

That’s just for step 2 of the four steps I listed. There are also lots of things to learn for step 3 and step 4. After reading all of this, I felt overwhelmed. Scott’s heredragonsabound blog is amazing, and you can see he’s put many years of work into these problems. I wanted a summer project, not a multi-year project. I decided the scope of this project was too large for me with my current skill level. To level up, I should work on smaller projects first.

So I started a one week project to manually place and style labels on maps, focusing on step 4. That was six weeks ago. I’m still working on it. I’ve had many more bugs and unexpected rabbit holes than expected. I’ll blog about them soon!

此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。原文来自 — 版权归原作者所有。

推荐订阅源

Red Blob Games: latest blog posts