City Symbols (Part 8): Recreating the "Skies of Fire" Style

There's more to be done on building styles, but at this point I have the basic functionality to recreate icons as used on one of my example maps:
Generally speaking there are two types of icons on the map:  city icons and fort icons.  The only significant difference between the types is that the city icons have peaked roofs and the fort icons have battlements.

I'll start by duplicating the look of a single building.  I'll set the fill color of the building to red and the roof color to black.  I'll use the simple "peaked" roof type and fill the roof with black.  I'll also adjust the size and width/height ratio to match.  I've isolated a few icons from the map for comparison:

I've shown the icons at both 250% and actual size.  The icons from the reference map are in the first column and my icons in the second column.  It's a pretty good match, although the outline is heavier on the map icons.  That's easily adjusted:

Now let me work on combining buildings to create icons.

The icons are essentially a line of buildings with some constraints.  Icons for small cities have two buildings; icons for medium-sized cities have five buildings; and icons for the largest size city (there is only one) have seven buildings.  In small cities there are two and three story buildings; in larger cities there are also four story buildings.  Adjacent buildings are never the same number of stories.  All the buildings in an icon have the same baseline, but adjacent buildings overlap by a small amount.

Combining buildings into an icon is basically just a matter of drawing multiple buildings.  But since I'm creating these buildings procedurally, I don't know everything about them ahead of time.  That creates some challenges with placing the buildings -- if I don't know how wide a building will be until I create it, then I don't know ahead of time where to place it to get (for example) a certain overlap with the next building.  Likewise, if I want to center the icon on a particular spot, I can't do that until I generate the entire icon and know it's width and height.  In general, I address these challenges by first creating the building or icon and then moving it to where it needs to be.  Fortunately this is fairly easy to do with an SVG transform.

But for the moment I'll just work on generating an icon that looks right.  Implementing the rules above gives me this first cut:

Here the icons from the reference map are on the left and my generated ones to the right.  Here's the same thing blown up a bit to make it a little easier to inspect:

I see a couple of problems.  First, the reference icons have wider buildings than my icons.  That's just an adjustment to the height/width ratio of my buildings.  Second, the reference icons also have more overlap between the buildings.  (I'm also overlapping strictly left-to-right, but I'll address that next.)  Again, that's just tweaking a constant.  Third, some of the example buildings have the "Witches Hat" roofs.  I'm not sure that's terribly important, but I do like the notion of having some occasional buildings that "break the style".  I'm not going to implement a Witches Hat roof, but I can use a pagoda roof to get a similar look (especially at map scale).  Fourth, I have some buildings with no windows or doors; that looks a little odd in this style of icon.  Finally, the example icons have some faux 3D shading as if they were round buildings.  Normally if I made my buildings round they would have curved bottom edges, but if I set the curvature to zero I get "round" buildings with flat bottoms, and then I can add in some shading.

And here it is blown up a bit:

That looks pretty close.  So now let me fix the overlapping to be less regular.

As with most computer graphics, the buildings in these icons are overlapped in the order they're drawn.  I draw them left to right, so each building overlaps the building to its left.  To make that overlapping random, I need to draw the buildings in a random order.  But that's a bit problematic because I don't know, for example, how far building #1 should be from building #5 until I've drawn the buildings in-between.  However, in SVG it's possible to reorder elements even after they've been drawn.  So after I create the icon I can go through and randomly raise some of the buildings to the top.

One thing I haven't done is add the small circle at the bottom of the icon to indicate the city's map location, so let's do that:

I think that's a pretty good recreation of the original map icons.  (I don't use fort icons on my maps (yet?) but generating fort icons is mostly just a matter of switching the roof type to "battlements".)

One enhancement that I see used on some maps is to add a heavier border around the outside of the icon.  To do this, I have to take the union of all the polygons that make up the icon and then draw the union in a heavier pen:

This makes the graphic a little more recognizable as an icon and also helps separate it out from the background.

Next time, I'll start looking at using these on a map.