Monday, January 15, 2018

City Symbols (Part 7): Faux 3D Redux

In a previous posting when I added faux 3D effects to simple houses, I didn't yet have a battlement roof like these:
So now let me add faux 3D effects to these kinds of roofs.  In my last posting, I fixed up round houses by using ellipses in the faux 3D view:
If I make the battlements follow the ellipse line and fill them with the same gradient, the front of the building looks fine.  Now I need to fix up the back of the battlement roof.  In the above picture, I've drawn in the basic ellipse for the back half of the roof.  Now I need to add battlements to that line.  This is basically the same as with the front part of the roof.
Here I've added battlements to the rear line.  But there are a couple of problems.  First of all, the gaps in the battlements (which are called crenels; the solid parts are called merlons) tend to line up between the front and rear since the two lines are the same length and the pattern is the same.  Second, since I'm forcing merlons at the sides of the building, I end up with a double-wide merlon at each side.  The solution is to reverse the "polarity" of the rear battlements and make it start with a crenel (gap) at either side:
Now I need to color in the back part of the roof.  Because the back is concave, it gets the opposite gradient from the convex front part.  There's no simple way in SVG to reverse a gradient, so I have to create a new reversed gradient myself.
There are still a couple of shortcomings here.  The roof is probably too "deep" -- we should be able to see a floor between the front and back.  And the walls themselves are just lines -- there's no depth to the battlements.  Neither problem shows up at map scale, though, so I can ignore them. :-)

The parapet style roof is like the battlement style, but it sticks out from the building.  (So that defenders can drop burning oil and the like on anyone at the walls of the building.)  Drawing this in faux 3D is much the same as for battlements.  The two differences are that I draw a line around the bottom of the parapet and I add a shadow underneath the parapet.
The shadow underneath the parapet is probably overkill at the map scale but I left it in anyway.

Doing battlements on square buildings turned out to be more challenging because there are three pieces to deal with.  There are left and right sides with slanted roof lines that are in the shadows and then a back wall that is lit.  With a routine to take a line and add crenels to it to create battlements, it's mostly a matter of bookkeeping to determine the four lines of the roof, the fill areas and sorting out the order to draw them.  That only took me a few hours :-).
Surprisingly enough (to me, anyway) parapets on square buildings fell into place without any additional work.
And here's what that looks like put together to create a "castle":
Note that the wall -- since it's really just a narrow building -- has picked up a second set of battlements, but the door remains just a piercing through the front of the wall.

No comments:

Post a Comment