Showing depth in a 2D, top-down game.

Started by
20 comments, last by IanW 11 years, 6 months ago
Hi all,

I'm developing this idea for an online multiplayer sandbox game.

The player's interface is essentially a top-down grid, players move from square to square by selecting their destination. The game will be tick based, so their movements are input before the tick rolls over to the next one, and when it refreshes, all player moves are calculated and played out.

For example: Tick one begins, you select the tile/square you wish to move to, when the next tick begins - you move to your desired square.

The grid will effectively be a top-down, 2D representation of a Minecraft/Infiniminer-esque block based world. Here is a mock-up I have been using to try and figure out how this will work:

Depth%2BExample.png

As you can see, representing pits and riased areas on the grid is fairly simple. These shadows sort of immediately spell it out to the players eye which bits are higher or lower.

However, this game world will not simply be limited to the depth shown in this image (3 layers of blocks). I intend for the depth to be potentially infinite.

The difficulty I am finding now, is how to this would be shown in this game? How would a sheer 20-layer-high cliff edge drop be shown for instance, without it looking identical to the edge of the 1-block-deep pit shown here?

Also, how can players navigate to areas above and below themselves?

The long term goal behind this game is that it is a sandbox, where players are spawned in the world and are ultimately at their own liberty to roam around. If they want to PK, be sociable, grief, build cities, destroy cities, farm, explore... ...whatever - they can. I'm keen on letting the player find their own balance, and maybe even police themselves. The game intends to provide the gamers with a sort of wild west that they are free to colonise. Let them build the game world, so you don't have to.

I estimate that building (or at least inhabiting a burrowed out hole) will play a fairly significant role in all of this, which is why I'm keen on getting this representation of the game world blocks right. The blocks will provide the elements for most of this world-crafting.

The game will be tick based, so this whole world of player action can be managed at a fairly easy pace.

I'm keen to hear any thoughts, inputs and criticism anyone has on this?
Advertisement
If the difference is multiple blocks,blur them according to how much difference there is?

Funny, i was just thinking about multiple layers in a 2d top down game and how to represent different layers...

You could also offset the layer liek parallax but that would make it close to 3d i guess...

o3o


The difficulty I am finding now, is how to this would be shown in this game? How would a sheer 20-layer-high cliff edge drop be shown for instance, without it looking identical to the edge of the 1-block-deep pit shown here?


Well the obvious way is to increase the size of the shadow. Your shadows extend maybe half a block horizontally now... just keep increasing them. The problem is that then you're getting into full-on 3d rendering (and if you go that far, you could include a little perspective so that things further away are smaller).

Another option is to desaturate things are further away from the camera (such as a deep pit). Sort of like a fog.

Another option is not to allow such greatly varying depths in one area of the screen. Maybe just allow 3 or 4 levels of relative depth, which could be handled by your current shadow system (which I'm guessing assumes that shadows don't "leak" across more than one block?).
I had thought of that, but I'm not sure it's enough.

Depth%2BExample%2B2.png

It works to a certain extent, but I'm not sure it would work for larger depths or larger surface areas.

As a visual device, artificial blur tends to work better for faking lens focus, but the distant objects being blurred are usually smaller anyway, which is what combines with the blur to give the illusion. On its own, the blur ends up just looking a bit smudgey.

I'm tempted to just try voids and chasms as big black spaces?

On the surface of the world, I want players to be able to build multi-storey buildings - but representing this is tricky.

Would standing in the top room of a tall tower just render everything outside the perimeter of the room in the field below as black nothingness? This is one option and a device used in many graphical rogue-like games, but it would be nice if sitting in a tower would give you some kind of view, instead of just colouring the outside air at the same altitude as the player as a black void.

In case anyone's confused; here's a quick google images example of what I mean by the outside of a room being neglected as blackness:

kbuk4.jpg
In a map like this: http://en.wikipedia.org/wiki/File:Maps-for-free_Sierra_Nevada.png , they typically use a spectrum of colors to indicate the height. Its shadows are a bit more complicated than just laying a blurred square. It shows the light direction. Thus its representation of height is much more realistic.

I think it can be only achieved by rendering the map in a 3d application in orthographic projection.
My feelings on this one are:

  • An edge-only effect won't work in all cases. Depending upon how deep it can go and how big a deep area is, there is potential for the player to get confused about what the depth is in a given area. Also I doubt an edge can accurately indicate arbitrary depth differences.
  • Therefore I think tiles need to be rendered somewhat differently as well as an edge effect so the eye can estimate the depth at a glance, e.g. by colour, saturation, blur, etc.
  • Realistically a method that indicates depth per tile can't represent infinite depths, as there's a limit to the colours, blur level, etc available.
  • How would multi-storey buildings work? You would need to exclude levels above the player otherwise you can't see what's going on. Perhaps a mechanism where you zoom down to the level where you can see the character, depth effects per tile are scaled relative to the current "zoom", and everything below a depth cutoff just shows as black? Stairs or other mechanisms to the next level up would still need to be displayed.

I had thought of that, but I'm not sure it's enough.

Depth%2BExample%2B2.png

It works to a certain extent, but I'm not sure it would work for larger depths or larger surface areas


I don't really understand why that isn't already perfect, at a glance I can tell the depth.
If it gets darker+darker as it gets deeper, eventually it will be black, most people understand that black means it's so deep that no light gets down there.
For you're example you could add a highlight to the elevated edges adjacent to the edges casting shadows to create more contrast. You could explore camera tricks as well, with the camera focal point being clear and other depths appearing blurred and making the colors more desaturated for the depths not being focused on. If the camera is fixed you could explore color tricks like making things farther in the background more desaturated and washed out while the foreground has more detail and has more vibrant contrasting colors.

[quote name='TexasJack' timestamp='1344453532' post='4967492']
I had thought of that, but I'm not sure it's enough.

Depth%2BExample%2B2.png

It works to a certain extent, but I'm not sure it would work for larger depths or larger surface areas


I don't really understand why that isn't already perfect, at a glance I can tell the depth.
If it gets darker+darker as it gets deeper, eventually it will be black, most people understand that black means it's so deep that no light gets down there.
[/quote]

I'd go with this too. Make the darkness based on the current elevation of the player. If the player goes down stairs, deeper tiles will get illuminated as he goes down until he passes them, after which they get progressively brighter. It will be easy to figure out how high are things no matter your current elevation.
Developer for Novus Dawn : a [s]Flash[/s] Unity Isometric Tactical RPG - Forums - Facebook - DevLog
Would the shadowing work with light? If the area is brightly lit, dark shadows would look weird.

I think desaturating or whatever its called might be good, levels above you would go towards white, levels below towards black. Shadows could be there but not as strong as in your pictures and maybe only to indicate that "there is a height difference here" rather than "the height difference is this big"


so the shadow would be the same regardless of height difference.

o3o

This topic is closed to new replies.

Advertisement