City Symbols (Part 10): Adding Features

In the previous two postings, I recreated the map icon style from the "Skies of Fire" map and then modified Dragons Abound to be able to use map icons on the map.  In this posting, I'm going to start adding the features I need to recreate the map icons from the "Torfani" map:

There are quite a size and variety of icons on this map, and I'm not going to attempt to recreate every detail of these obviously hand-drawn icons.  So it might be better to say that I'm creating icons inspired by these icons.

To start with, the icons are generally colored the same as the land color of the map, with a gray color for some roofs and shadows.  Generally speaking the houses are more squat than the "Skies of Fire" houses, and are given some shading for faux 3D look.  Adding those stylings to the "Skies of Fire" icons gives me this:

That's not very close to reference icons, but at least the colors are better.

The smallest icons on the Torfani map are typically two houses.  The same artist did a map called Domhantyr Orientalis that has some single house icons in it, but they always appear in the mountains and have an odd shape, so I suspect they're intended to be cave entrances.  At any rate, I'll concentrate on the two house icons on the Torfani map.  Here's a selection of them, at map size on top and then enlarged to make the details more visible:

There's a good mix of different styles and details here.  The most common version is a single house with a peaked roof in a 3D view.  The roof is uncolored (the same color as the house), the door is also not filled in, and there's sometimes a single window above the door.  The icons are also pretty small -- typically only about 5 pixels high for a "story".  Adding these constraints to Dragons Abound gets to this:

It's not clear to me whether it's totally intentional, but some of the roofs of the single houses on the Torfani map come to a single peak -- this is the "peaked" style of roof in Dragons Abound So I'll adjust the generation to get some peaked roofs in the mix.

Finally, some of the Torfani icons have small additional shapes sticking off the rear or side of the icons.  I can't really tell what these are intended to be, but they do add a little visual complexity and interest.  One way to do something similar is to add another small house behind the main house, and force the new house to have no roof, windows or doors -- in short, just a featureless cube.

That's probably (definitely?) overkill, but easy enough to add.

Next up are the medium-sized cities.  Some examples:

The medium-sized icons are not just more houses, but add some additional complexity.  First there's a mix of different house types.  There are square houses with peaked roofs as in the small cities, but also battlements and round houses with dome roofs and peaked roofs.  For the most part the buildings are in 3D view, but there is very little shading.  There's a mix of one and two story buildings (or at least short and tall), and adjacent buildings are usually different heights.  The icons are three buildings across in size, but there are sometimes towers sticking up "behind" the front buildings.  The buildings are all overlapped enough that you only see the side of the leftmost building.  It's difficult to be certain, but there seems to be some variation in baseline between the buildings -- that is, the bottoms of buildings further back are higher than the bottoms of nearer buildings.

It looks a little odd to have battlements or a dome on a single story house, so let me restrict those to the two stories houses.  Let me also add the possibility of a tower sticking up in the background.

The icon in the back row has a tower directly behind one of the front-row houses.  That looks odd, so let me add some logic so that the back row tower is between two front row houses.

That's good enough for the medium-sized icons.

Let's have a look at the major cities.

Once again, these icons aren't just a bigger version of the medium icon, but add new features.  On the building front, some interesting new towers have been added that seem to change sizes and have interesting bulges and decorations.  Some buildings and towers are flying pennants.  There's been some shading added to the buildings as well -- both shading on the individual buildings as well as shading out some of the buildings that are in the back of the city.  Finally, a wall has been added around the base of the city.  The wall follows (or defines) the contour of the city.  In some cases the wall is very tall and looks more like a mount that the city has been built upon.

Let me work on the towers first.  Before I get into trying to recreate the towers in the reference map, I'm going to create a couple of simple towers.

A tower in my system is just a skinny multi-story building.  So a default round "tower" looks like this:

An obvious refinement is have a tower that narrows towards the top.

The problem here is that the roof no longer matches up with the top of the tower.  So I need to re-write all the "roof" code to get the actual size of the top of the building, rather than assuming it is the same size as the bottom.  That turns out to be non-trivial, but gives this:

I made this work for rectangular buildings as well.  This was quite a bit more work because the roofs and the building have sides.  I'm not certain it was worth the effort, but it looks like this:

I probably don't have all of the combinations of roofs and overhangs and buildings quite right, but I'm not sure I'll even use square towers, so this seems sufficient.

There's another style of tower in the reference icons:

These towers have segments, and sometimes the upper segments get smaller.  This seems pretty straightforward for the 2D versions shown in these icons, but in faux-3D having stories of different sizes gets quite complex, with different bits of roof showing, the size of the sides of the house changing, etc.  This seems pretty intractable, but it occurs to me that I've implemented flat roofs, so maybe I can create a multi-story tower with changing sizes by stacking up buildings with flat roofs.  

There's a little bit of work involved to figure out how to place each building so that it appears to sit on top of the previous story.  Here's what it looks like with round buildings and each story getting a bit smaller:

I've adjusted the parameters for each story so that doors can only appear on the bottom floor.  One obvious problem is that the top floors are casting shadows in the wrong way.  Completely correcting this might be difficult, but a simple solution is just to turn off the cast shadows for the upper floors.

Here it is with that fix and using rectangular buildings:

This looks a little more awkward than with round buildings.

In the examples I generated above I stacked up three one-story buildings, but in the icons the tower segments look to be two or more stories individually.  That gives me this:

So that's a couple of different tower capabilities.  Next time I'll look at doing walls.