Top down tile based game render order

Question

I'm making a simple top down (like this) tile based game (using JavaScript, for reference)

I use Tiled for making maps. I have sprites that are more than one tile high, and so whenever they are in front or behind of some objects more than one tile high tiles will be displayed in front of the player. I am looking for a way to give certain tiles 'height' such that only characters of that height could appear in front of those tiles.

Here is a screenshot showing my problem (the sprite is doge because it was the first image I found):

The same tiles don't always equate to the same height, so I can't give tiles set height. I've thought of one way to give tiles height, and that is to have a (hidden) layer that describes the height level certain tiles are at.

However, that solution would be slow and painful to implement. I'm wondering if there's a better way to do it.

A few other potential ideas I've had: Have a tile layer for each height, hackily guess the height of a tile at runtime based on tiles below (would be buggy) but I think that there would surely be a better way to do it.

Answer 1

When you want to have overlapping sprites in your game, you need to put them in a list which you sort by the coordinate of the lower edge of each sprite and then render them in that order.

Further, when you are using a graphics API where y = 0 is the upper edge of the screen, you need to take the height of each sprite into account when you draw it and draw it at y - height.

When you have objects in your game which are multiple tiles high (your big tree is a good example), these should be one sprite, not multiple tiles on different layers. Tiled does support tilesets with different tilesizes in one map and even on one map layer.