July 13, 2021
If you are going to stare at a tutorial, it might as well be about stairs. Learn to how to make your own Stair Tiles with Avery!
Besides making round cave walls and shelf edits, I think the edit task I performed the most is making stairs. Interior stairs, exterior stairs, stairs facing up, stairs facing to the side…
It just gives you so many options to design your map layouts when you have more than one way to change elevation.
When it comes to the normal stairs you would use on basic interior maps, you have a bunch of different colors and materials, but overall just a very narrow set of “styles”. You have these small side view stairs for up and down and the normal one tile high stairs that work in both directions.
I don’t know about you, but for me that is by far not enough flexibility for my maps.
I quickly made ourselves this very weird testing room. Its only purpose is to make sure that our created tiles will fit in perfectly.
This is how far we would get with the default wooden stair tiles. We cannot make side view stairs and we cannot really make a good length for a 1 tile height difference.
Since vertical stairs are easier, we are going to start with them.
As you probably want them to tile smoothly, you need to set up how many stair steps fit into each tile.
You can either go with: 4x12px or 3x16px
I prefer to go with 4x12, as this enables me to have a “half” stair tile. Let me show you what I mean:
Since I need 3 tiles of stairs for a 2 tile wall, I need 1.5 tiles for the 1 tile wall. This is especially useful when you have rooms with pedestals.
I used two colors to mark the top and the side of the stair step.
For the top part you usually can use the tile you are using for the surrounding floor anyways. Depending on the design you might have to edit it a little, but here it is pretty much just copy and paste.
for the sides you can often use the same structure, just make sure it is a lot darker than the top (as our light usually comes from the upper left).
This already kinda works:
I usually make the now needed edits on a 3 tiles wide section so that I have all the parts I need for later modular versions:
The contour of each step is made darker and the top gets highlights on the sides.
And this is the result you can add to your sheet, the one tile wide version is just the 24px of each side combined and the “half” tile is literally the upper half of the tiles.
For sideview we need something different:
There needs to be something on the bottom to support the steps and as you have a different perspective you get different sizes for the tops.
I sketched out two possibilities here, the top is the more “common” one, for the lower I added more steps in. With 6 steps per tile of height difference, you have the amount of steps to cross a 1 tile high wall as you had for the other perspective, but if you feel like these are too narrow you can use 4 steps per tile of height difference as well.
We start with the top again:
Use the structure of the floor to create the tops of the stair steps and arrange them as we need them for the stairs.
For the right side you add some outlines and highlights and you are done, for the left one, remember what I said:
light comes from the upper left corner
That means every step casts a shadow on the next one - all but of course the first, which is “shadowless”.
To achieve that just take the first two pixels of each step and lower their brightness by the same rate.
These are already half of the deal:
For the sides you have to set up a base idea that works for the material you are using.
As these are pretty simple wooden stairs I felt that they should just be simple wooden beams that the steps are attached into, resulting in me constructing this out of the “top structure”:
Of course it needs to be darker than the top as well, so darken it and then assemble the stairs:
The parts on the top are meant for 1 tile wide stairs as otherwise one of the highlights is cut off.
You can also support the stairs with “wall” underneath:
Now that we have our neat stairs, we need a handrail so our clumsy heroes don’t take a tumble down them. Or just because they look pretty - whichever explanation you prefer.
For the vertical ones I like to place them next to the stairs instead on top of them, due to the character’s width.
So basically we need a post - the same height on the top and on the bottom - as you can see on the right side.
On the left side I connected these posts with a rail already.
Looks simple, right?
Again, I’m simply using the floor structure, you can go with anything you like here.
Simply take the wooden structure and edit it into the length you need. Then you make sure to make the side darker than the top and edit outlines and highlights where needed.
This is a very simple post of course.
You don’t have to stop there. If that post is too simple for you, just zoom in and edit it carefully.
For example you can carve things into the post or change the shape a bit.
I like the slightly rounded one the most, so that is the one I will keep using here.
Now we rebuild our sketch. Post, long rail structure (which I like to recolor slightly darker since the handrail top is tilted towards the screen and therefore brightness wise in the middle of the top and the side) and second post add up to the handrail and with a minor fix (here two pixels to match the rail and the posts) - we are nearly done. Just edit a second version for the “half tile” stairs, place them into your sheet and you are done:
You can see that there are some literal edge cases where you might have to place the rail differently or leave it out. Anyways, the vertical rail is done:
For sideways, you already have most of the tools after you made the vertical ones - you just need to arrange them differently.
I expanded our test screen a bit so we have more room for showing off our handrails.
Since both handrails for each stairs look the same, I will just build the front one here.
To do so, we start placing the post on the top and bottom.
Use the rail of the vertical one as base. Turn it by 90 degrees and add some depth to it by adding some more of the top structure to the bottom and recolor it darker.
Then make two recolors for the top - one should be brighter, one darker.
Now use the “slope” to create the needed slopes. I love graphicgale’s pixel perfect slope, if you use a different program you might want to do this manually cause you could end up with blurry results.
You remember what I said about light coming from the upper left corner? That is why one of the sideview handrails is brighter on the top and the other one is darker!
Adding them to the posts already looks pretty nice.
Since these are already pretty low (as my posts were not that high) I don’t want to add a copy of the railing to the bottom, but you absolutely can.
You could have a design like this (this is straight from the RTP) for example, but I will just add some stilts to support my handrails.
and this is already all you need.
By copy&pasting the front rail and moving it to the matching position you get the back one as well!
These are the resulting pieces to be placed on the sheet!
And here is the full set:
As MZ allows you to have transparency on A-tiles as well, you can place them either onto A5 or B/C/D/E.
Have fun!
