Jump to content

  • Log In with Google      Sign In   
  • Create Account


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


Old topic!
Guest, the last post of this topic is over 60 days old and at this point you may not reply in this topic. If you wish to continue this conversation start a new topic.

  • You cannot reply to this topic
21 replies to this topic

#1 TexasJack   Members   -  Reputation: 173

Like
0Likes
Like

Posted 08 August 2012 - 11:54 AM

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:

Posted Image

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?

Sponsor:

#2 Waterlimon   Crossbones+   -  Reputation: 2084

Like
0Likes
Like

Posted 08 August 2012 - 12:22 PM

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...
The lack of awesome free resource gathering building sandbox games capable of running an user made 8 bit computer in the world disturbs me.

#3 phil_t   Crossbones+   -  Reputation: 2480

Like
0Likes
Like

Posted 08 August 2012 - 01:08 PM

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?).

#4 TexasJack   Members   -  Reputation: 173

Like
0Likes
Like

Posted 08 August 2012 - 01:18 PM

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

Posted Image

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:

Posted Image

#5 heshiming   Members   -  Reputation: 203

Like
0Likes
Like

Posted 09 August 2012 - 06:42 PM

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.

#6 jefferytitan   Members   -  Reputation: 1175

Like
0Likes
Like

Posted 09 August 2012 - 07:19 PM

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.


#7 Rybo5001   Members   -  Reputation: 487

Like
0Likes
Like

Posted 09 August 2012 - 10:25 PM

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

Posted Image

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.

#8 Mratthew   Members   -  Reputation: 1313

Like
0Likes
Like

Posted 10 August 2012 - 01:07 AM

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.

#9 Tiblanc   Members   -  Reputation: 552

Like
0Likes
Like

Posted 10 August 2012 - 07:27 AM


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

Posted Image

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.


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.

Edited by Tiblanc, 10 August 2012 - 07:27 AM.

Developer for Novus Dawn : a Flash Unity Isometric Tactical RPG - Forums - Facebook - DevLog

#10 Waterlimon   Crossbones+   -  Reputation: 2084

Like
0Likes
Like

Posted 10 August 2012 - 07:53 AM

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.
The lack of awesome free resource gathering building sandbox games capable of running an user made 8 bit computer in the world disturbs me.

#11 s.Mason   Members   -  Reputation: 110

Like
0Likes
Like

Posted 11 August 2012 - 12:12 AM

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.


Reading this made think, if you really wanted to add so many layers. What you could essentially do is have different world maps all linked together. For example in reference to that image in which the tiles get darker as the area gets deeper, it could then eventually just be pitch black. A player could then jump through that to realize the player is now on just a lower layer. Its pitch dark so they would need some lighting.

ex.
tile layer 1 _ _ _ _ _ _ _ _ _ _
tile layer 2 _ _ _ _ _ _ _ _ _ _ _ _
tile layer 4 _ _ _ _ _ _ _ _ _ _ _ _ _
tile layer 5 _ _ _ _ _ _ _ _ _ _ _ _ _ _

so on that little representation there, layer 5 from a top down view would be pitch dark and could potentially be just a endless void. This is all part of game map. When the player goes through layer 5 and jumps through that little entrance there.

player lands on new game map

tile layer 5 _ _ _ _ _ _ _ _ _ _ _ _ _ _
tile layer 6 _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
tile layer 7 _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
tile layer 8 _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

with such a method, you could potentially have plenty of layers, you would essentially have players just jumping through different game maps. If done right, getting layers pre-loaded and what not, it could be sync seamlessly with as much depth as you need.

#12 Mratthew   Members   -  Reputation: 1313

Like
0Likes
Like

Posted 11 August 2012 - 10:52 AM

Or use blender to model, texture and render the look you want if you're frustrated with figuring out which 2D styles to apply to make it appear 3D ;D

#13 Waterlimon   Crossbones+   -  Reputation: 2084

Like
0Likes
Like

Posted 11 August 2012 - 11:32 AM

nonono, if the player goes 1 tile lower, the shadows adapt and (players height - 5) is now pitch black. Even if he went 100 levels down, the level 5 levels below would be pitch black and the current level normally lit.
The lack of awesome free resource gathering building sandbox games capable of running an user made 8 bit computer in the world disturbs me.

#14 bvanevery   Members   -  Reputation: 157

Like
1Likes
Like

Posted 11 August 2012 - 01:40 PM

I'm thinking these are visual arts questions, not game design questions. Maybe you'll get more help if the thread is moved to the right forum.
gamedesign-l pre-moderated mailing list. Preventing flames since 2000! All opinions welcome.

#15 Tincha7   Members   -  Reputation: 161

Like
0Likes
Like

Posted 15 August 2012 - 10:43 PM

I don't know if the camera is stationary, but if it isn't, you could do some subtle parallax scrolling to add to the effect. Although I'm pretty sure it won't be enough to bring out the depth, you'd need something else to go with it.

#16 Waterlimon   Crossbones+   -  Reputation: 2084

Like
0Likes
Like

Posted 16 August 2012 - 06:20 AM

The problem with parallax like scrolling is that you need to make the game practically 3D (show sides of tiles)

Imagine 2 high towers next to each other, and being able to see the base of the other tower because the far below is small due to perspective. (even tho the top of the tower might be outside the screen)

This + shadows would be good but rendering with perspective might get slow (many smalll tiles far away), you might as well just make a mc clone with top down locked camera.
The lack of awesome free resource gathering building sandbox games capable of running an user made 8 bit computer in the world disturbs me.

#17 nox_pp   Members   -  Reputation: 487

Like
0Likes
Like

Posted 16 August 2012 - 12:56 PM

This is just a wild thought, but have you considered taking inspiration from topographical maps?

I was working on something like this a long time ago. It wasn't tile based, but was all about portraying gigantic differences in height from a top-down perspective.

Between Scylla and Charybdis: First Look <-- The game I'm working on

 

Object-Oriented Programming Sucks <-- The kind of thing I say


#18 lithos   Members   -  Reputation: 413

Like
0Likes
Like

Posted 16 August 2012 - 05:36 PM

I would start by narrowing the scope.

Narrow it to only having 5 "navigatable" layers in any image. Meaning what you actually put on the screen, the actually map can have some 500 layers but withing the view area there will only be 5 layers players will move around on. This means that you're accepting something along the lines of say being able to only move up and down 10-20 feet for every 100 or so feet(the area you can see).

For areas that are more than 5 layers deeper than where you are I would make that background move "slower" than the foreground based on how far away it is. When I 've done this in a 2D platformer it was just a simple division for moving the background at a different speed(you can see this same effect in a lot of 2D platformers). This game(Fortune Summones) notable for having 3 to 4 layers at time http://www.youtube.com/watch?v=qoimbX-zTtY.

For areas that are more than 5 layers above the player I would probably make the area not visable, and make the area that would be "blacked out" and show the cliff face. Not sure how to make it exactly compatible with the previous method and still look good.

#19 Bark3r   Members   -  Reputation: 106

Like
0Likes
Like

Posted 25 September 2012 - 07:55 AM

If I were you I would ask myself a question - does top-down perspective really fit the gameplay style I want to achieve? If your players are going to spend lots of time building things and navigating three-dimensional space, they might find top-down perspective frustrating, if not unplayable. I'd consider isometric view + transparency and/or screen rotation for better navigation. Measuring depth and building would become very simple that way, but you might also need to get better quality / more detailed graphics for that.

#20 epicpunnum   Members   -  Reputation: 454

Like
0Likes
Like

Posted 14 October 2012 - 08:50 PM

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.

Gotta agree with this one. Even technically speaking, with heights measured in Integers or Longs, there are limits to how far you can go. If you're looking to change the brightness of the blocks based on depth, you could logically only go as high as your variables let you. However, in terms of having unique brightnesses for every depth, there is only a limit of 256 depths available using the RGB or hex spectrum (not entirely sure about HSB or CMYK, but pretty much the same idea).
Alternatively you could have an overlaid square for each tile. If the tile's depth is above the normal height, the tile's color would be white, starting transparent and becoming more and more opaque as depth increases. If it's below, the color would be black.
Either way, there are limits on the technical side to be considered, and they would have to be proportionally done.

Another way to show depth which hasn't been mentioned is also particle effects, that can only exist in or below certain depths. For instance, on really low depths you could have faint mist clouds. If you are on a cliff above a dark pit, the clouds could make you feel that you're high up.

As for your navigation between depths question, you have plenty of methods you could do depending on the setting:
  • If there are structures built, you could have doors, teleporters, or portals to bring you to really different levels.
  • You could also include slope blocks or stairs, which could have a gradient from one layer color to the next.
  • Of course, players should be able to fall down from higher levels.
  • etc.





Old topic!
Guest, the last post of this topic is over 60 days old and at this point you may not reply in this topic. If you wish to continue this conversation start a new topic.



PARTNERS