City Symbols (Part 14): Recreating the Torfani Icons

(You might notice that Part 13 is missing.  That's not superstition.  It was a posting on some more fantasy elements that didn't work out, and turned out to be too short to be worth posting.)

Now that I have all (or at least most) of the elements in place, I'm going to work on recreating the icons from the Torfani map.  (Very similar icons are used on the Domhantyr Orientalis map.) To refresh your memory, this is a portion of that map:

There are roughly three different city sizes on this map.  The smallest icons look like this:

There's a fair amount of variation but typically the icon has one to three single or two story buildings.  Buildings can be round or square (but more often square) and are shown in (faux) 3D, although sometimes the sides of buildings and roofs are not shaded.  There are no decorations except an occasional “shed" peeking out from behind a house. Roofs are generally “peaked" for square buildings (with an occasional battlement) and domed for round buildings.  Some buildings lack doors, but all have windows.  Roofs and buildings are both the same color as the land, and doors are not filled in.  The building outlines are drawn in a dark brown color.

Putting all that together produces this:

Which (given the constraints) looks like a pretty good reproduction to my eye.  The shading is probably a bit too dark, so I'll tone that down.

The next size city looks like this:

In most ways, these are the same as the small icons.  They typically have 4-5 buildings and some buildings are now entirely behind the front buildings. Sometimes neighboring buildings are the same height.  Also, there are also no obvious sheds on these buildings.  Some of the towers seem to be taller than the other buildings.  Interestingly, the side shading seem to have completely gone missing in these icons.  I could reproduce that, but I'd rather keep it in.

Putting all that together produces this:

This brings us to the large cities, the most complex icons on the Torfani map.

The large city icons introduce a bunch of new features (many of which I implemented in the past few posts).  Most of the large city icons have tall towers, and often these are “fantasy" towers with some kind of strange architecture.  For the first time, buildings can be three stories (or higher) and some of these tall buildings have pennants.  There are typically about seven buildings in a large city icon, and sometimes there's one building substantially larger than the rest.  The buildings are more shaded than in the smaller cities, and many roofs are now colored.  The city is surrounded by a city wall, often with slanted sides and usually with a door or gate in the front center.

Some features I haven't implemented:  There are some “cast shadow" effects where entire buildings or parts of the city wall are in shadow.  Cities on rivers are split across the river, or are shown with a bridge over the river.

I'll start with the medium city icon and up the number of buildings.  I'll also allow three story buildings, which are tall enough to trigger the pennant code.

At this size and with this many buildings, it becomes obvious (looking at the baseline of the icon) that Dragons Abound doesn't handle overlapping correctly, particularly with round buildings.  Since I'm faking the 3D aspects of these buildings and not actually modeling them in 3D, it's pretty hard to get this right.  But in this case the bottoms of the building will be covered by the city wall and it should be less obvious.

Speaking of the wall, let's add it.

The distribution of building heights in the Dragons Abound looks wrong.  I'm randomly selecting buildings between 1 and 3 stories high, but in the real icons there are fewer tall buildings, and they're rarely next to each other.  Another problem is that while the Torfani buildings have some faux-3D shading, in the biggest icons the buildings don't show any side depth.  I'm not sure I want to entirely eliminate the side depth but I can certainly dial it back.  Here's a first attempt at that:

Upon examination, almost all of the tall buildings in the Torfani icons are round and narrow (e.g., towers).  They mostly have eaved or domed roofs, but I'll throw in the occasional onion roof.

Now I want to start to add in some of the "fantasy" elements.  The first element is to sometimes have a cupola on a big domed building.

Next I can add in the "fantasy" towers like in the leftmost Torfani examples:

Finally, I can add the towers with skybridges between them:

I can also throw in "pyramid" towers where each successive floor becomes smaller:

That more-or-less completes the large city icons, so let's see how this all looks on a map:

That's not too bad.  The long blank city wall in the Suit icon looks a bit jarring, though.  I can address this a bit by encouraging more inflection lines and coloring in the door.

Better perhaps, but I'd still like to figure out a better way to do some more painterly effects in SVG.

Meanwhile, here's another problem:

The icon for Shimpes is “in" the lake.  This occurs because the icon largely ignores whether it overlaps with features.  In general, since the icons represent something “sticks up" from the map, it's okay for it to overlap another feature behind it.  However, we'd like to avoid have the baseline of the icon right in another feature like a lake.  I can accomplish this by adding another criteria to the label placement algorithm that tries to avoid overlapping the baseline of the icon with a feature:

This also helps city icons in mountains and along the coastline find better positions.

Here's a side-by-side comparison of the Western Torfani map and the current Dragons Abound replication: