How to give depth to a top-down shooter?

Question

I'm working on a top-down shooter kind of game, but it lacks the feeling of depth.

When you have a sun, it's a bit easier, because the sun can cast shadows. But it's even harder, when there is no sun, like underground.

How do you simulate an ambient occlusion kind of thing? I think that's what it lacks, but maybe I'm wrong.

(And this could be also applied to levels with sun as well, further enhancing the feel)

Example: I have floors and walls, but even if the walls would be a bit thicker, it would lack depth. How could I fix this? I.e. rendering small shadows at floors' edges which are neighbouring walls?

Answer 1

You can't give ambient occlusion to things when there is no light. After all ambient occlusion effectively simulates shadows.

Add more light sources (and use shadows)

If you add light sources to the game (lava, camp fires, mining lights, glowing mushrooms, etc.) you can go in and start giving things shadows which will make it seem more 3D and add details. Now this might not be possible depending on the theme of the game or technology of the engine.

Parallax scrolling

This is something that a lot of 2D games do. Basically create a bunch of layers and have the layers closer to you scroll faster than those further away. In a cave with the camera looking down this will be a little harder but should be possible if there is a difference in height or you can put dust in the air which would move more the closer it is to the camera (ie higher).

Flying NPCs

You could add NPCs which fly, this would put them above the ground and allow for something that can cast shadows onto the ground and move in the air which would give the impression of high ceilings. These NPCs wouldn't have to be big or even intract-able, something as simple as a bat would do the trick.

Use Scale

Depth in 2D is really just about showing that the area is large in the Z-axis (in and out) so you could create enemies which are very large and require the camera to zoom out. As the camera zooms out it puts into perspective how big you are in relation to the enemy and the room/cave your inside.

Bake perspective into the Sprites

If take your game and create the assets in 3D then render them out as 2D sprites you can put perspective into each model so that you can easily tell that one thing is closer/further away than something else. This will likely be limited by your art style though, so it may not be applicable to your game.

Go 3D

If your game doesn't necessarily have to be 2D but still top down you could make the assets in 3d and move around like you would in 2D. This way the sides will change as you get closer to them. If full 3D sounds like a lot of work you could try a hybrid approach with only the static environment or tall objects being in 3D and the rest of the game still using 2D assets. This way movement will give depth and you have an easier time adding shadows to the level.

Answer 2

Consider using 3/4 top-down perspective.

This is the look that most old-school top-down games used specifically to create depth.

Some examples:

Old Zelda games

Old Final Fantasy Games

Pokémon (even once they transitioned from pure pixel art)

Binding of Isaac (Rebirth) is a good non-RPG example, it involves a lot of shooting:

(the room walls aren't strictly in 3/4 but everything else is; extra depth is achieved by having shadows under everything that is off the ground, with different distance depending on height above ground)

Answer 3

I will describe an approach I used for a similar game some time ago.

Depth imitation

This only applies if your perspective is not orthogonal and directly from the top.

For each sprite that has depth I have the normal color bitmap and a height bitmap. So for example the wall sprite could look like this

Heightmaps use only the r component. Each sprite is drawn to a different buffer. Lights are rendered to the third buffer. Those three buffers get baked into a final image in a fragment shader. Heightmap values are used to offset probing from light texture.

You could store normals and material type per pixel along with the heightmap to allow for more sophisticated lighting models.

One other advantage is that you can use this data for depth-testing. Sometimes sprites cannot be topologically ordered if you use a weird projection.

Creating dynamic shadows for more detailed objects would require raytracing, but in this case it can be implemented just using the heightmap if the objects don't have visible holes. This is probably an overkill though and a simple shadow below the feet should do.

Lights

I'm not sure how you handle light with walls, because you haven't posted any pictures, so I'll post this part as it may be relevant.

A light is a rectangle with a texture that determines brightness over distance. It should use transparency so the colors are properly mixed when drawn on top of each other, allowing simple additive lighting.

The initial light rectangle is being trimmed by the nearby geometry. For this I refer to https://www.redblobgames.com/articles/visibility/ and https://ncase.me/sight-and-light/. The algorithm is very fast and can handle hundreds of light updates per frame.

The last step is to blur the light to avoid sharp edges on where it was trimmed. For this I use a 2 pass gaussian blur frament shader and temporary buffers.

Overall effect:

Answer 4

I beleive this situation demands basic type of approach.

You can play with your objects' orientation in some way that which can give you the illusion of distance considering your light position.

For Example

You have ground object and a character.If you lower your ground object along the y-axis and add a basic point light between your character and the ground.This will enable the light to simulate light attenuation on each sprite like its a 3D world.If you lower your ground object even more the light attenuation on the ground sprite will fade which will give you the illusion of distance.

Consider Adding Normal Map

You can write a sprite shader which uses a normal,with this way you can achieve even more depth to your objects.

Maybe Some Volumetric Light(Godrays)

There are many volumetric light solutions out there,i bet if you implement one of them to your game it will look even more 3D/Volumetricc ??

Passionate Input

Considering the dungeon image you given us above,i assume you have a single sprite object which contains the floor texture right ?,consider creating seperate sprite objects for your each tile on the ground(texture),with this now you have the control over the each tile and with some tweak along the y-axis and a well positioned light you can achieve alot,and with normal maps even more.