AuthorTopic: Stairs in top down perspective  (Read 8284 times)

Offline Afelium

  • 0010
  • *
  • Posts: 115
  • Karma: +0/-0
    • View Profile

Stairs in top down perspective

on: November 10, 2018, 09:31:25 pm
Hi,I'm making a pixel art version of my school with a top down tileset, and I'm confused by stairs:for instance,I have no clue how to make stair tiles going up from north to south.
Here are the ones going up from south to north


Also I don't know if I should add shadows on the nearby ground and from which direction it should come.

Any advice about stairs in general is welcome

Offline eishiya

  • 0100
  • ***
  • Posts: 1266
  • Karma: +2/-0
    • http://pixeljoint.com/p/28889.htm
    • View Profile
    • Website

Re: Stairs in top down perspective

Reply #1 on: November 10, 2018, 10:59:33 pm
Stairs with their tops in the south are typically avoided in RPG view because they don't read well for gameplay. If you want to make them anyway, then we'd not see the vertical planes of any steps, we'd see the entire top step, and parts of the other steps.


Not very appealing xP

If some stylisation is acceptable, consider having the steps get narrower towards the bottom, for some fake perspective. This can help the top/bottom read more clearly.

These examples don't tile well, but hopefully they convey the general idea. Perspective like this tends to make the stairs a bit less modular.

Offline Afelium

  • 0010
  • *
  • Posts: 115
  • Karma: +0/-0
    • View Profile

Re: Stairs in top down perspective

Reply #2 on: November 11, 2018, 10:49:28 am
It still doesn't feel right,but I have to make stair tiles going in all four directions,there's no way around it :(.Do you think that making the steps lighter as they go up would help?Or is there some way to cheat on perspective for the sake of readability?
I was also wondering if any game in the past had this same issue and if it was solved without avoiding to face it
« Last Edit: November 11, 2018, 10:58:49 am by Afelium »

Offline eishiya

  • 0100
  • ***
  • Posts: 1266
  • Karma: +2/-0
    • http://pixeljoint.com/p/28889.htm
    • View Profile
    • Website

Re: Stairs in top down perspective

Reply #3 on: November 11, 2018, 02:02:52 pm
Lightening the steps towards the top would certainly help!

Unfortunately I can't think of any game that had rising southern steps. I vaguely recall one with descending ones ones, they were clearly shown to be in a hole and employed shading and perspective to show descent. They were also tiny, a single tile. Can't remember the game, but it's very far from what you're going for.

I think lighting and perspective are the way to go, but for that to look good, you'd need to have similar Zelda-esque perspective on the walls too, and that would probably be too cartoony ):

Offline Vinik

  • 0010
  • *
  • Posts: 211
  • Karma: +0/-0
    • View Profile

Re: Stairs in top down perspective

Reply #4 on: November 11, 2018, 07:39:06 pm
Ah, actually being geometrically rigorous, if the game looks at the world at 45°, and the stair are also like 45° slopes, then you wouldn't even see any of the steps except for the first one, all below would be obscured. Before saying you need north oriented stairs, try to show us what how the map is supposed to look like, because chances are that the very difference between the two levels will already be obscured enough on the north direction. If you solve that differentiation between levels, maybe with some sort of ornate border, then interruption in those borders might drive the view of the player to understand that the walkeable terrain continues downstairs, even if it is obescurednfrom view. Does your game allows the character to hide behind walls? Can some part of the character be covered because he is behind terrain of a higher level?

Apart from that, vertical oriented stairs only look downstairs when they are inside a dark doorway, and usually the steps are shades on a gradient from light (closer, upper) to dark (further into the shade of the door, lower).

The third way is having spiraling downwards steps, and all above tricks are also used with this, but it is also common with trapdoors on the floor.
« Last Edit: November 12, 2018, 01:56:28 am by Vinik »

Offline Afelium

  • 0010
  • *
  • Posts: 115
  • Karma: +0/-0
    • View Profile

Re: Stairs in top down perspective

Reply #5 on: November 11, 2018, 09:54:48 pm
made before reading Vinik's post,here's my attempt(this one in ortogonhal )

while this one is in perspective

I have to admit I have to fully understand your answer yet(sorry,not a native speaker)but I'll try to answer your questions
Quote
try to show us what how the map is supposed to look like
I'm working on my school's architectural map so I agreed not to share it online,plus there's no scale on it :-\
but I can tell you that all the staircases are dog-legged
Quote
because chances are that the very difference between the two levels will already be obscured enough on the north direction. If you solve that differentiation between levels, maybe with some sort of ornate border, then interruption in those borders might drive the view of the player to understand that the walkeable terrain continues downstairs, even if it is obescurednfrom view.
that's the part I didn't understand,but I can say that the map doesn't have to be 100% precise,so I can tweak some measures to make your method work
I also forgot to point out that the staircase(in the game)should lead to another map(the 2nd floor one)
« Last Edit: November 11, 2018, 10:13:40 pm by Afelium »

Offline Vinik

  • 0010
  • *
  • Posts: 211
  • Karma: +0/-0
    • View Profile

Re: Stairs in top down perspective

Reply #6 on: November 12, 2018, 02:22:02 am
Ah, I was considering the difference between levels would be of only a few tiles of height, but it is a difference of a whole floor, so the viewer is very less likely to be confused distinguishing levels. This part of the map is more than enough to get a feel of it, you don't need to post the whole map. You gave a concrete gray color to the tiles on the stairway which is good. Frankly, this is nice enough, I think it would work even without the forced perspective trick on lower set of stairs. If you are doing it for the lower one, you might as well do it for the upper one also.

Is the map going to be interactive with walking characters and stuff? If so you should consider what happens if the character moves  under the stairs (if they are allowed under it). Also, consider making the stairway cast a shadow on the ground.

They way you arranged it, I think it is pretty clear, you can ignore my suggestion of ornate borders etc, and you should keep the north stairs as they are, like eishiya's suggestion. I am not a native speaker also and what said might have come out more complicated than it should :) . I like the clear contrast between white walls, red floor, grey stairs and black cross-sections. As you mentioned before, giving a bit of gradient towards a brighter color on the north oriented stairs might make it a bit more tridimensional and bring attention to it, which is good since it leads to another floor and thus it is a point of interest on the map.

Edit: I just noticed a big geometric inconsistency lol, your walls are not tall enough for the stairway to fit as you wanted it to. Pardon my very very dirt edit, it was made from my phone because I had no access to aseprite, also the image was double sized, and I wasn't able to resize to make a cleaner edit. I think it gets the idea across:


« Last Edit: November 12, 2018, 02:41:49 pm by Vinik »

Offline Afelium

  • 0010
  • *
  • Posts: 115
  • Karma: +0/-0
    • View Profile

Re: Stairs in top down perspective

Reply #7 on: November 15, 2018, 06:30:27 am
Here's the final result:

(sorry if I copied the yellow hue shift, I made sure to study the relationship between colors before using it)
thanks for your help,now it is way more readable.
I started doing horizontal stairs,but I don't know how to make diagonal narrow lines without making them fat and blocky.I tried using antialias,but I don't exactly now how to use it
« Last Edit: November 15, 2018, 06:34:29 am by Afelium »

Offline Vinik

  • 0010
  • *
  • Posts: 211
  • Karma: +0/-0
    • View Profile

Re: Stairs in top down perspective

Reply #8 on: November 16, 2018, 03:29:05 am
Cool, you still have some wrong wall heights here, if you want your walls two tiles high then do it also in narrow wall in the middle. As the walkway between the sets of stairs is elevated, then at there you should have a only one tile height wall (think it like cutting the top of the rim at the same height everywhere)

OR you could extend the wall up like you did, at the cost of a little confusion, but you should also keep it 2 tiles high there then, I see no reason why that particular part would have a taller wall above the walkway. This is not the best option because a viewer could read that vertical extension as meaning that the wall is receded back rather than extended up, you know what I mean?

A compromise would be to have 3 tiles tall walls every where, and at just 2 tiles on the walk way between the stairs, but to do that correctly your stairs and the shadow they cast would need to be shorter. Your current stairs look two tiles high to me, they are as tall as the walls.

As for the diagonal handrails, I don't think they should be so narrow. Narrow diagonal lines packed together are indeed prone to cause banding which you should avoid. I am on a trip without a PC, I can make an edit with suggestions when I get back, but you would do well to read Helm's stuff on banding, there are a couple of good general solutions for this on that thread. In fact you should read all of it.

Offline Afelium

  • 0010
  • *
  • Posts: 115
  • Karma: +0/-0
    • View Profile

Re: Stairs in top down perspective

Reply #9 on: November 17, 2018, 08:55:30 pm
Thank you for the advice!
Tried following it

Quote
think it like cutting the top of the rim at the same height everywhere
here I sliced all the walls at the same height

Quote
OR you could extend the wall up like you did, at the cost of a little confusion, but you should also keep it 2 tiles high there then
here I made the walls adjacent to the stairs higher and I kept the wall height on the walkway 2 tiles high

The wall on the other side of the thin wall being at the same Y as the ones on the wakway for sure doesnt help,
so I decided to make the walkway 2 tiles wide:

Quote
A compromise would be to have 3 tiles tall walls every where
for mapping reasons I need all the walls to be 2 tiles high,except for the stairs(the more the walls are high,the more the map will be covered by them)
 
you would do well to read Helm's stuff on banding, there are a couple of good general solutions for this on that thread. In fact you should read all of it.
I read  this thread but I still dont understand how to cast a uniform light on a tight,stright line without causing banding
« Last Edit: November 18, 2018, 03:12:51 pm by Afelium »

Offline Vinik

  • 0010
  • *
  • Posts: 211
  • Karma: +0/-0
    • View Profile

Re: Stairs in top down perspective

Reply #10 on: November 19, 2018, 02:32:40 am
It is tricky, but what I get from all that theory is that we should try to avoid vertical alignments of pixels, and sometimes just shifting the lines horizontally by one pixel is enough. In your case it also helps if the diagonal lines are also sufficiently spaced from each other, and after you have done that you might consider AA. However, overdoing AA can make things so blurry that it hurts readability. Consider these many ways of rendering an inclined cylinder with a one pixel wide highlight, and see if you get any ideas from it. Some are very banded, some mitigate it by displacing the highlight horizontally, and then there are different levels of AA: