Creating Your Own Roof Variations
October 28, 2021
September 25, 2021

Creating Your Own Roof Variations

Creating Your Own Roof Variations



October 28, 2021

Do you want to dress up your maps with even more roof directions and angles? Want to learn how to make them yourselves from existing roof tiles. Then, let's go!

The default graphics give you quite a range of roofs to pick from, but when it comes to shapes, we could definitely use more variety.

I personally like the red tile roof here, but when I think about making my village all square houses facing the same direction… that seems to be a bit boring.

Luckily, making all the variations you need to make all different kinds of buildings is fairly easy - the main issue being the huge space that these will take up on your sheet. So it makes sense to make sure your village tileset only covers the styles you actually plan to use!

I will use graphicsgale for all the basic work, and switch to Gimp for recoloring and transparency.

For a good start, I like to have the roof itself as a non-autotile version on my B/C/D/E Sheet as well. That way I don’t have to toggle between the different sheets all the time when working on one roof, also it is much easier to make recolors of the whole set.

Since the autotiles use a more optimized grid, you need to copy and paste the default autotile so you have a 144x144 square instead of a 96x96 one.

With these tiles you can map most variations from this angle, but there are a few things left that you should also add at this point:

A 1 tile wide 3 tile high version, a 3 tile wide, 1 tile high version and a 1x1 version. Those might not be necessary, it depends on your final house design, but it is always good to have them ready when needed.

The most important variation is to have a roof that faces the other direction, so instead of looking on the side of the roof, we want to look at the front.

To achieve this, turn the large basic tile you made by 90 degree:

and then use “slope”, which in the case of graphicsgale should not add any blur to your graphic:

If you copy, paste and mirror this part, you can already see how well this works:

There are still three things left to fix here:

  • The roof sides need to be in different levels of brightness, as one is facing the light and the other does not at all
  • The middle part is not conjoined yet
  • The roof seems to be paper-thin, as there is no sign of depth on the lower rim

Let’s tackle them in that order!

To adjust the brightness, simply make the left half lighter, as it faces the light source (the upper left), leave the middle, as it is facing the same way as the ridge of the original roof, just plainly upwards and make the right side darker. There are no perfect values here, it depends on the roof and the colors used, just make sure there is a visible difference.

Now for the ridge:

Since in this case the ridge in the original file seems to be curved, I adjusted the shape and then fixed the structure to have them conjoined.

The third problem is a little more to explain, but no worries, it is easy to make once you understand it!

Add a rim at the lower side of the roof by using the outline color and the medium color of the “normal” tile we started with.

Zoom in and start shading this side area. You want the light to be slightly from the left and you only need to uniquely shade one shingle per side. Make sure to give each part a clear outline.

Now copy and paste that shingle side over the whole length.

For the basic front view, this already does the trick! Now as with the other view, we need those extra variations that could come in handy:

You might want to have a version where the roof is only two tiles wide, for example for a chicken coop, and also a version where the roof ridge is in the middle of a tile instead of spread over two, so you can make houses that are an odd number of tiles wide. Depending on what you want to map you might want that version also as one tile wide roof.

With those you can already cover a lot of different sizes and angles, but something important is missing:

We cannot make proper L- or cross.shaped houses, because there is no way to map the edge between the two roof types.

For a proper join we need something that is 3 tiles wide and three tiles high.

Take the front tile and cut the sides off in a 2 tiles wide 3 tiles high angle.

Make sure you have a 3 tile wide result per side, so you have one tile with the ridge and two tileable for the side.

You now want to adjust the ridge, as the ridge in our first example was not at the same height at the front as at the side, I made a steeper ridge edit for such L-shaped houses here and removed any outlines from the angled edit here.

And that is it!

With those edits there are a lot of different layout options available, as you can see in this example.

Odd front widths are not possible without further edits, but there is another downside to keep in mind:

A roof set will take up about a half B/C/D/E sheet and that can be a lot if you want to have different shingle types in one town. It is usually a good idea to focus on a few different roof types in one region anyways, but make sure to only add the roofs you really need for your town.

Besides that: Have fun!

Recommended Posts