Conveying Depth without intense coding?

mikmaxs

Member
I'm working on a very basic prototype for a platforming game with a 2D/3D mechanic. I've put together a single level that runs pretty smoothly, but I've hit a minor problem: It's hard to tell, visually, what's going on.

The basic idea is that there are a couple 'layers' that the player can travel on, and movement between these layers is in the control of the player. (Right now, there are three layers - foreground, middleground, and background. I don't plan on adding more right now since it'd turn into visual soup, fast.)

When you're on layer one, you only collide with obstacles that are also on layer one. You can move into layer two, unless that would put you *inside* a layer two obstacle, and it's the same with layer three. Navigation involves, not just jumping from platform to platform, but shifting between the different layers at the right time.

Right now in my pre-alpha build, items in the foreground grow more transparent as the player moves back, and items in the background get darker. (So an item two layers behind the player is black, one layer behind the player is grey, one layer in front of the player is 50% transparent, and two layers in front of the player is 75% transparent.)

However... it looks bad. It doesn't convey itself quickly or easily, so it's hard to respond reactively. Right now, going towards the background or foreground are bound to up and down keys, but the opacity/shading doesn't really convey depth very well at all.

One idea I have is to convey depth with a bit of perspective, so that all the props move a little closer to the camera (and get bigger) when the player moves to the background, and visa versa when they move to the foreground. I think that would *look* good, but it seems way out of my league in terms of programming and animation skills.

So... I need a simpler workaround. If it's impossible to easily tell what's going on just by looking at the screen, then it won't be fun to play and I won't be able to make the rest of the concept work.

Suggestions - especially suggestions that won't be hard to program - are appreciated!


EDIT: I forgot to mention, there *will* be enemies, eventually, and it'll be necessary to get around these enemies by moving along layers that the enemies aren't on. (Sidestepping them, basically.) So whatever solution I come up with needs to work for moving, attacking enemies.
 

Attachments

Last edited:

SirGouki

Member
More information on your idea is needed. What do you mean by moving between layers? Do you mean something reminiscent of Super Castlevania 4 where the player can "change layers" by entering the doors in the first level? or do you mean something like Fez where the player rotates the world about an axis?

If its the first, this can be fairly simple to demonstrate in a few ways: keep all the layers visible but order them into a logical front middle and back, and place decorations on them to reflect as such. I'm not sure how collision detection handles this, as I usually only have 1 layer for instances, but I would imagine that an object on a different layer should not report a collision normally.

If its the second, I'd recommend looking more into 3d stuff, as checking for 3d collision usually involves a combination of all 3 coordinates.
 
D

Deleted member 13992

Guest
Would you say you're trying to achieve a similar idea to Wario Land on the Virtual Boy (minus the stereoscopic 3d that is)?

 

Rayek

Member
Couple of ideas:
  • like Wario Land, use scaling, but instead of the character, scale the foreground layers up and down when moving between layers
  • use parallax scrolling for each layer, and when the player moves to a different play layer, adjust the parallax effect accordingly, i.e. when moving deeper, speed up the scrolling of the foreground layers relative to the layer on which the player resides
  • depending on the overall lighting and colour scheme: lower the colour saturation of deeper layers, and change hue towards colder colours. Increase luminosity a bit, for example, of deeper background layers in outdoor sunny scenes. In dungeon/dark cave/dark room scenes, darken the colours and luminosity of the deeper layers. When moving between layers, adjust these colours accordingly.
  • optionally, when moving between layers, adjust the colours and luminosity according to the previous tip.
  • blur the foremost top foreground layer(s) when the player moves to a deeper layer.
  • allow the foreground layers to drop down a bit to avoid obscuring the action on deeper layers too much
Not sure though how well this will work for a 2d platformer, though. A layer effect is used in some of the levels of Shantae: Risky's Revenge, but to avoid cluttering the screen the layers are pretty much just visually separated, for the same reason as you have discovered for yourself: it would otherwise ruin the readability of the action and levels.

Wario Land avoids all these issues by just scaling the character, and some very clever level design. It is more of a gimmick than anything else (to justify the virtual boy's 3d effect). This looks more like a solution looking for a problem to solve.

Perhaps consider a forced axonometric 3/4 viewpoint? Or a cabinet view with separated lanes to jump between? Lanes that adjust parallax speed as well to indicate depth?




Or a 'frankenstein' view like this one? Perhaps with a vertical scrolling/scaling component/effect when moving between layers?

 

mikmaxs

Member
Would you say you're trying to achieve a similar idea to Wario Land on the Virtual Boy (minus the stereoscopic 3d that is)?

Yeah, that's pretty similar.

I also posted this question to reddit, and after some discussion I think some good ideas were presented there:

Add a 3D camera with a small parallax to convey the depth of layers.
Add a dropshadow effect so that layers in the front cast shadows onto layers on the back, making it clear exactly who is on top of what.
 
D

Deleted member 13992

Guest
Yeah, that's pretty similar.

I also posted this question to reddit, and after some discussion I think some good ideas were presented there:

Add a 3D camera with a small parallax to convey the depth of layers.
Add a dropshadow effect so that layers in the front cast shadows onto layers on the back, making it clear exactly who is on top of what.
Yeah I saw your clip on reddit. Actually the clip made me think a bit of the way some of the platforms/trees in GRIS behave. Where they sort of achieved a similar mechanic, but instead of different layers of depth, it's a special visual effect.

Spoiler if you haven't played:

 

Yal

šŸ§ *penguin noises*
GMC Elder
Parallax scrolling probably is the easiest method (setting up a 3D camera makes this work automatically, even if it's a bit tricky to get working, or you could shift layers visually but not logically). Blending things with the background color (to mimick faraway fogginess) and having "depth of field" (background layers are blurred, more the further away they are) also helps to convey depth. For an example of this in a real game, you could e.g. look at how Fez shows the area a door leads to in the background, clearly in the background thanks to color blending and some other effects:
(timestamped, but it's visible in the thumbnail too)
 
Top