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):

Excuse the Doge

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.


1 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.

  • \$\begingroup\$ The only problem with making my tree a single tile is that the tree may be a different shape or size at different times. Some objects like barrels or rocks could be a single tile, but ideally I'd be able to have trees of any height I wished. Also, implementation would be a pain. However, your point treating tiles as sprites is a good one. I hadn't thought about that, and I guess that treating any tile in any layer other than the ground layer as a sprite or part of a sprite would make it a lot easier. I guess I'll have a layer for each height and treat tiles as sprites.Thanks. \$\endgroup\$
    – Oliver
    Nov 8, 2016 at 7:29
  • \$\begingroup\$ @Tobsta: VRAM isn't that expensive on most platforms. There is nothing wrong with having a tileset where not all tiles use the full height. \$\endgroup\$
    – Philipp
    Nov 8, 2016 at 15:50

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .