Game Development Stack Exchange is a question and answer site for professional and independent game developers. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I'm have problem with Isometric. I'm don't know how to name this "problem", but I'm show you some sceen what I get and what I'm need to get.

My code now drawing something like:

But I'm need draw something like this:

I'm hear this is "Depth sort" But what it is? how I'm can apply to my code and where I'm can learn this?

My code: '

share|improve this question
You asked this on Stack Overflow already :P – alex Jul 20 '12 at 13:02
Note that the article where those images came from is demonstrating something different -- the second table is actually on top of the first table, but the depth sort can't deal with the non-transitive overlap of the 3 sprites. – Jimmy Jul 20 '12 at 17:22
up vote 2 down vote accepted

What you call "Depth sort" is sorting the elements to make the nearest of the camera drawing "at the end", in order to "cover" the others.

With your code it gives something like that I Just added this function to sort the block Array :

var sortMap = function (a, b) {
    if (a.x > b.x){
        return 1;
    } else if (a.x < b.x) {
        return -1;
    } else {
        if (a.y > b.y) {
            return 1;
        } else {
            return -1;

because with your implementation, the more the x and the y are high, the more the element is near the camera.

Note : This implementation works for your current code, BUT for game/implementation with a moving camera, it exists generic function which gives you the distance to the camera, according to x/y (and sometimes z).

share|improve this answer
Fantastic! Thanks! – kichu Jul 20 '12 at 13:36

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.