CODEWITHSUNDEEP
javascripthtmlcanvasisometric
kichu
kichu

Reputation: 51

HTML5 Canvas Isometric map depth sorting

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: http://2.bp.blogspot.com/_rqhF_8E1nlA/R59d_PmoREI/AAAAAAAAAGo/3yHpmy55moc/s400/lore2.png

But I'm need draw something like this: http://3.bp.blogspot.com/_rqhF_8E1nlA/R59epfmoRFI/AAAAAAAAAGw/cE_o-A0bvm0/s400/lore3.png

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: http://jsdo.it/keichioor/exU1

Upvotes: 0

Views: 1304

Answers (2)

Eric Robinson
Eric Robinson

Reputation: 2095

I thinking this is what your looking for, let me know

I just forked your project

http://jsdo.it/EricRobinson/8h4E

Upvotes: 0

alex
alex

Reputation: 490423

You need to sort your sprites by farthest to nearest (so nearer sprites are rendered over the behind ones).

So...

blocks.sort(function(a, b) {
    return a.z - b.z;
});

Upvotes: 1

Related Questions