zaxxon like game - sorting question
Shri August 4th, 2015

Gio or Foxcode,

 

I am developing a zaxxon like game.

In the game, there is a dragon who flies throught isometric space.

The dragon can go up or down (by modifying the y offset) to fly over various obstacles.

I can generate a height map and then calculate whether the dragon has hit or can pass over something.

 

My current problem has to do with the visual sorting of the sprites as the dragon flies around.

 

If I say have a tower and I set the offset for the tower so that it looks correct in the center of the grid.

Then, if I try to put an archer on top of the tower, the offset has to be different. Also, if the tower is to the left of a lower height wall it requires a different sort point, and if it is to the right of a lower height wall, it requires yet a different sort point.

 

I don't think that keeping multiple object descriptions will work (i.e. tower, tower with archer, tower left, tower right) in all conditions

 

My question, is how do I make it so that visually, it looks correct ?

Right now, I'm thinking I will get the objects in the cell where the dragon is, sort them according to height from lowest to highest and then reorder their sprites accordingly using bring to front / send to back. ?

 

I'm hoping you've run into this sort of thing before and can give me some advice.

 

As usual, any help is always appreciated.

 

cheers,

Shri

1 Comment
Gio August 6th, 2015

Hi Shri

 

Sorry for the delay - I've been on holiday and generally really busy.

 

Anyway, the game concept sounds quite intriguing, I'd really like to try it when it's finished.

 

In most cases it isn't necessary to sort sprites manually, most issues can be fixed using sort points.

 

With the isometric plug-in, things are sorted bottom to top, so that things that are closer to the camera appear in front. This doesn't always work if you just use the center point of the sprite, which is why you have the ability to specify sort points. This is because, in reality, you want to sort not based on the middle point of the sprite, but based on its position on the terrain - in most cases, this means using a sort point of {x: 0, y: 0.5}, because, for example, a character's point of contact with the ground (its feet) is going to be at the bottom edge of the sprite.

 

It varies on a case-by-case basis, because you could have shadows and other things that are at the bottom edge of the sprite, but generally speaking you want to move the sort point to where the sprite is supposed to touch the ground.

 

With objects that have complex geometry (e.g. large buildings), this may not even be enough. Think for example of a large L-shaped building: the sprite "touches" the ground at very different points on different isometric cells.

 

Luckily though, sort points are property of sprites, not objects - and an object can be made of multiple sprites. So basically in those difficult situation, it may be worth splitting your object so it's still a single object, but made of multiple sprites, each with its own sort point.

 

That should really be enough to cover all cases - but if you prefer, you can set a custom sort function for your isometric layer using wade.setLayerSorting(), which is much faster than moving individual sprites with bringToFront or sendToBack.

Post a reply
Add Attachment
Submit Reply
Login to Reply