Isometric engine drawing issue

Question

I'm trying to write a game engine in js (canvas). So far so good. But i got one problem my world is diamond shaped and i render the tiles from top to bottom.

The problem is when i have a tile that's bigger than 1 tile (so 2x2 as example) this will happen:

The house is defined on tile (2,1). The left rock is placed on (1,0)

The tile (1,0) is rendered first and the next tile is (2,1) because it's on the same row and on the right.

How can you solve this?

Answer 1

You should be able to avoid the problem by breaking your graphics down into smaller pieces - one piece per tile on the grid. A good way to think of it is like this: If you could view the grid from directly above, each sprite should not overflow the edges of the cell they're allocated to.

For example, this cell below should probably only contain the front section of the house shown by the smaller cube:

At some point you may need to also micromanage multiple sprites in the same cell, but that's the same concept in a smaller space.

Answer 2

For this specific example there's a simpler solution.

Right now the house occupies these spaces: 2x0, 3x0, 2x1, 3x1 And you're drawing the house from position 2x1

If you instead drew the house from position 2x0 (and still occupy the same original 4 tiles) all the tiles would draw in correct order.

As long as you're drawing tiles top (back) to bottom (front) in screen rows, you can use oversized tiles that are 2x2, 3x3, 4x4, or any square size easily without slicing. Just draw these larger tiles along their middle row position. I often use the left corner as the grid anchor for these large tiles. It makes sense in my head this way because as soon as you draw the leftmost (or right) corner of a big isometric square, you separate everything already drawn behind it from what comes in front of it.

Rectangular oversized tiles (e.g. 2x1, 2x3, 2x4, 3x4, 4x5) usually require a more complex draw order algorithm than just screen rows top to bottom. I opt to slice these into square tiles.

Side note, that medieval house tile does already have original parts split into vertical slices if you want to go that route (my originals are on OpenGameArt).