Isometric depth sorting issue with big objects

Sanchex picture Sanchex · Jun 23, 2012 · Viewed 7.9k times · Source

I'm currently building an as3 isometric game, but I'm having a lot of problem with depth sorting. I've searched for a solution, but didn't found anything that match my problem (rectangle objects).

Here is a screenshot of my game:

enter image description here

As you can see, depth sorting works well when it's between 1x1 tiles objects. I simply use their x and y coordinates (relative to the isometric map) to sort them.

The problem comes when I have bigger objects, like 2x2 or 1x4 or 4x1.

Any idea how should I handle depth sorting then?

Answer

Blckknght picture Blckknght · Jun 23, 2012

I don't think it is possible to sort a scene based on a single x,y value for each object if some of them can be long enough that one end should be at a different depth than the other. For instance, consider how you'd handle the rendering if the brown chair in your picture was moved one square down-left (to the square between the blue chair and the long couch). It would be deeper in the scene than the red table behind the couch, but would need to be rendered on top of the couch, which would need to be on top of the table.

I think there are two simple solutions:

  • Design your levels using only one sort of overlap for large objects. For instance, you could specify that an object's depth is based on its nearest corner, which would require you to avoid putting things in front of its most distant bits (since it will render on top of them). Or you could stick with your current code (which seems to use the most distant corner for depth) and avoid putting anything behind the nearer parts. You may still have trouble with characters and other objects that move around though. You might be able to make the troublesome tiles inaccessible if you're careful with your design, but in some cases this may be too restrictive.
  • Break up your large objects into smaller ones which would have their own depths. You will probably want to go right down to 1x1 pieces, each of which will have an unambiguous depth. You might choose keep the larger objects in the code as invisible containers for the smaller pieces, or they could be eliminated entirely, whichever makes it easier for you to load up and enable interaction with the various bits.

Splitting larger objects in to 1x1 sized pieces can also be nice since you can make them modular. That is, you can build differently sized objects by putting together 1x1 pieces in different combinations. If you cut your 2x1 tables in your image in half vertically, for instance, and created a 1x1 middle tile that fit in between them, you could stretch the design out to 3x1 or 10x1, depending on how many times you repeat the middle tile. There's a lot of other ways to make tiled graphics look good with only a modest amount of art required.