Making Round Tower Tiles
November 16, 2021
November 16, 2021

Making Round Tower Tiles

Making Round Tower Tiles



November 16, 2021

We talked about diagonal walls already, but what about round ones? No matter whether it is a giant castle or an impressive temple, there are many cases in which a round tower with the needed pattern and the right diameter can make a huge difference.

When we look at the default graphics, we see that there is only one very thin tower available and while we will use it as a reference here, it is not really “all” we need.

There are already a lot of things we can look at and we will at least try to emulate them when we make our own unique tower.

Since winter is getting closer, how about a nice icy one?

Of course we need a structure for our project, in this case I picked the ice wall from the default tiles.

Now we should pick our diameter, but before we just draw a random circle, let me zoom in on the default tower:

The circle becomes an oval due to perspective: instead of a circle with a 96px diameter we have an oval that have a width of 96px and a height of 72px:

So we note: for every 48px width, we want to have 36px in height.

Let’s say our new tower will be 3 tiles wide

48 x 3 = 144

then we need in height:

36 x 3 = 108

which we can simply sketch as a circle in our pixel program of choice - mine is graphicsgale.

Make sure your circle has no weird “steps”. If we zoom in in the one I drew with the cricle tool, we see the following:

There are some areas where we have such irregular steps. You don’t want them, they will mess up your texture in the result, so get rid of them as in the right.

Since we plan on having our resulting tower 3 tiles wide, does that mean, we go with 3 tiles of texture?

No! As I already said in the round cave walls and the diagonal wall tutorials, perspective is a thing.

Our circle has a diameter, so if we rolled out the texture that is wrapped around the tower, we would have a π x 48 ≈ 452 wide sheet with that pattern.

Since we only see the front, we see half of that, an around 226 wide part.

Here you see both the wall of that width and the circle.

Now we use copy and paste and “push the sides in”, the more, the further we get to the rim:

Make sure that every stone that is more in the middle is the same width or wider than the one next to it that is closer to the rim.

You can already see, there is no shading nor shape, but the result already looks a bit “round”.

Now let’s make it round!

Use cut and paste to bring your texture at the rim of your pixelated circle. For the longer diagonal parts you can possibly use the slope tool as a shortcut, but this just takes its time.

This already looks pretty neat and round, right?

We have two main issues here:

First, we have no proper “top”, and second, we have no proper shading.

If you have your own plan for the top, skip the next part but make sure to read the bit about shading that comes after that!

We are going with a pretty classic top, so what we do is the following:

Using our circle as a guide, we can crop a piece of matching floor and place it on the top.

Next, we need the circle shape again, but this time with a pattern that matches our stones, here ice blocks:

I used one of the default cave textures and made it lighter, also I cut out the middle of this shape as we need this to be the width of our stones. You will see what I mean soon!

Separate two rows of stones, one of each of the two repeating patterns, I also added the rim we have in the autotile to one of them.

This section needs the most time, as it is pretty fiddly work! But the result is worth it!

First we add the prepared circle to both of these.

Let us start with the one for the pinnacles:

We mark the center to get the perspective right and connect each interspace with it. Since this is a symmetrical thing, you can copy, mirror and paste your sketch from the lower half for the top half!

You can erase the middle of your sketch and recolor it to your interspace line, and now it is edit time. Yeah, this is time consuming.

First: We delete every second stone.

Second: We reconstruct the missing sides of the stones by a lot of copy, paste and some sloping of one of the regular front sides:

For example here, we need two sides, so I prepared the texture by copying it together from the texture.

And then cut and pasted it to match the actual shape.

After some time you have a circle of stones that looks pretty okay. Time for an additional round of adding lines and highlights to the top:

And we have the pinnacles.

We can place them on top of our other circle, as every part they cover does not need to be touched up, preferably on a separate layer.

But generally this area needs the same treatment, just without deleting any stones.

We draw the interspaces…

… recreate the inside by copying in the texture from the front.

Also we fix outlines and highlights where needed.

We already have a very neat tower, but all the shading is missing… not for long, let us tackle this now!

Until now everything I did was made in Graphicsgale, but for the Light and more important, the shadows, I’ll switch to Gimp.

First we make sure we have a tower that is the perfect height: it needs to be set up so you have one row that tiles perfectly, without the upper or lower rim reaching into it. Bonus is to place the top in a way so you can have a character stand on it.

Now: Shadow on the Front

Duplicate the Layer with the tower and add a layer mask.

I know layer masks seem scary, but they are nothing to be afraid of. A layer mask is simple: where it is white, that part of the layer it is applied to is fully visible. If it is black, it is fully transparent, and for all shades of grey you have the according levels of transparency.

And that is exactly what we need here.

It does not matter whether you start with a white or a black layer mask, but with the gradation tool (hold Ctrl to make sure is is perfectly horizontally aligned) you can make one that looks like this:

The left rim is a little white, and on the right side we have a broad gradation from black to white.

Since that is applied to the layer of the copy, we can now recolor that one to a shadow tone that looks nice:

Now we use an eraser on that layer or a black pencil on the layer mask to erase the shadow from anything that is not the rounded front surface.

Not necessary, but possible addition:

After that we duplicate the layer again, but now it is time for a different layer mask:

This will be a small highlight to make the curve even more visible.

We brighten up that layer and erase everything that is not the front and our tower will look something like this:

Whether you use this additional highlight is up to you.

Okay, this is already very round, and since it worked well, we will use the same technique for the “inside front surface”.

I personally also changed the color of the shadow layers a little, as I found the contrast a bit too harsh.

That was the first part, but no worry, the second is much easier!

We create another shadow layer, and use the circle selection to erase a piece that has the shape of a slightly less wide circle than the floor and that is moved right from the center. Now we erase everything that is not the floor.

To save ourselves a lot of fiddly eraser work, we select the whole image and subtract the floor circle from it, then only a few pinnacles are left to remove.

After that we might lower the opacity of that layer if we think it is a little too dark for that area, and tadaaaa:

Now only the shadows from the pinnacles are left.

Here we can use a copy of the shadow layer and a layer mask again, add a shadow on the sides of the pinnacles that face somewhat right-ish and let every pinnacle throw a shadow to the right:

And we are done!

Enjoy your more versatile giant buildings!

Recommended Posts