Creating Balconies
April 7, 2022
March 29, 2022

Creating Balconies

Creating Balconies



April 7, 2022

We have looked at other ways to spice up your houses in the past, but so far balconies have not yet been in our focus - today we are going to change that!

To easier visualize what we are doing, I quickly built a nice large house in the woods. Obviously it needs to have more than one floor so that a balcony actually makes sense.

Before we start making balconies, we have to make some things clear to ourselves:

Do we want the player to be able to walk on it or is it just a decorative element we never actually enter?

There are several things to look at based on the answer:

  • A balcony that can be walked on has to fit the grid and actually have enough space for the player to stand on, which forces it to be within a certain size.
  • That also leads to your house having to have a certain size as well and depending on the scale you use for houses, you could run into a problem here.

What I mean by that:

If you use such minimalized houses, a fully functional balcony will not really fit your maps at all.

  • On the other hand, a balcony that can be visited might be a great place to tease an item or NPC that can be found there. It would also be a great place for a romantic cutscene or a place to stand and spot something in the distance.

Let's suppose we are going for a balcony that can be walked on by the player. First, let's see how far we can get just by using the default tiles.

Let's look at all the problems this construction has, so that we know what we have to change to get a proper balcony!

1, The balcony seems to be paper-thin. Even though I tried to give it some depth by using the bridge as a base, the bottom of the rail covers it and makes the construction look very weak. It would be a good idea to build proper support underneath it.


2. The rail needs to actually fit the shape of the balcony, as you can see here, the rail and its shadow go beyond the ground and a bit up onto the wall, where they are not supposed to be.


3. Also, if we simply have Reid actually stand on the balcony, we can see another important issue: the rail is far too high for him to see anything at all.


So, we are going to approach it in a way that addresses all these issues.

As I often do, let's start with a mapshot of the place where the tile is supposed to fit as a background.

I kept a screen of the “old” balcony on the side so we have the issues visible. Plus, I marked the area where we want the player to be able to walk on, simply a row of 3 tiles in the grid.

And we do the same as we would if we were about to cook something, we gather the ingredients:

This depends on where you want the balcony to be and which tiles you are using, but you need a proper fitting ground tile for the decking (My choice here needs to be edited, as I don’t want these metal sides, but we are editing here anyways), something for the joist and possible posts, and something for the rail.

You could even make all this out of a piece of wood texture, but since we have those already in these forms, we are using them.

You also see that I took both ways for the decking. Since we were already making a balcony I thought we could make them for all directions as well.

For the decking, all we need is a looping tile, which we can make by copy and pasting the middle part and puzzling it together to get a looping result.

Of course we also test if it works by mapping 4 tiles as square, this way we see if there are any clear problems!

We can now place Reid or any other character on our balcony draft so we can properly adjust the rail.

Remember that characters have a vertical offset of 6px!

We can now try to find a good position for the rail on a separate layer, so we can later just copy it from there on our tilesheet. I personally like to have it placed with a little offset to the feet of the charsets, but you can also have it be closer to the character of you want.

With some careful cut and paste we trim all the posts in the rail to a proper length - high enough to stop your heroes from falling off, low enough to actually see something.

But we need more than just the front!

While our front doubles as back without any further adjustment, we still need to close off the sides!

Therefore we repeat the adjustment process with the sideview rail, and now it is time to put the whole amount of rail possibilities together that we might want to have!

We keep the end pieces, and due to the post placements these are 2 tiles high each. We need a looping middle part in case we want giant balconies and we have the orange section, which is a tile, where the rail ends right after it was 48 px long - just when it would meet the wall.

If we don’t mind using multiple layers for the rail, we already have most we need.

Of course it is easier to map if we combine the side and front/back for these edges on the tilesheet already, which I did above.

But if we want to have balconies that are not just a rectangle, we need the inner edges as well:

We simply “map” our outer edges we just made in an arrangement like this in our graphic program.

And we see a massive problem that I ignored until now, because it is difficult to explain without this example:

Because these posts are cut in half it would look really weird to have the large edge post right next to them, but that is where they would have to be.

If we remove it for the edit, we need to add every possible tile combination with the removed post as well.

That is a problem that we don’t have, if there is no “half” post on any tile!

So, how do we fix that?

We simply move the whole row of posts to the side, so a gap is where the tiles end, and copy and paste one of the posts to balance the amount of posts out.

All we have to do is to copy and paste fitting parts of the rail to close off those holes!

Due to the post placement we would now miss the upper two inner edges from this version:

which we can also copy and paste to match!

With this as our resulting tilesheet so far:

Now that we've got the most difficult part out of the way, now we just need to make sure we have some proper material to support that balcony.

For the joist we need the rail on a layer on top of it (or on the same and we cut it out afterwards), since we want the joist below the rail, and not vanish behind it!

Since I don't really like the metal parts, I edited them out here, and by copy and paste we can make sure the posts have a proper length.

In this specific case we also had to get rid of the water by cutting it off!

Now all that might be left to do for the joist would be to add a “middle post”, in case someone wants to map a really wide balcony!

And there we go:

Before we make the final touches, let's import them into the maker and see if it looks as we wanted!

This works as planned!

What is missing though is some color adjustment and some shadows.

Plus, since the rails JUST hit the windows where they are supposed to meet the wall, I’m gonna make them a tiny little bit shorter than they are supposed to be so they don’t have that issue. I could also move the windows up, but I like their position.

For the color (made as in this tutorial here) and the shorter rails we get a quick result:

For the shadows, I like to add a new layer below the balcony layer and draw in the shadows with black rectangles, which I then set to an opacity of 50%.

We would need a shadow below the joist area and maybe one on the right side of the left rail:

Is that it?

If you need just a balcony, yes!

If you want to have stairs that connect the balcony with the ground, you will need further edits so everything matches each other. But that again is mostly copy and paste, you can use all the parts of the balconies for those with some proper editing work!

Now go ahead, time to add some balconies!

Recommended Posts