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

Answer 3

I think the best solution here is clearly to divide your graphics using a pre-defined metric (width of a tile for instance). The tile-based system is widely used for 2D-game, including isometric games.

Example: http://www.spriters-resource.com/pc_computer/fallouttactics/

Answer 4

My solutions (Also thanks to Marty Wallace!)

I can cut the sprite in 3 pieces shown on the image below

The first part gets drawed on coord (2, 0)

The second part gets drawed on coord (2, 1)

The third part gets drawed on coord (3, 1)

So we slice it vertically on the bottom tiles (the drawed tiles are like a V shape) This should work for every tile size like 4x4

We can forgot about the tile (3, 0)

Blue: The actual png Red: the cut lines

The lines are a bit off, but it's about the idea And i need some sleep (that last 2 is 3 ofcourse)

This also gives us a simple calculation:

sizeX - 1 = The number of sides on the right of the middle section (the big one)
sizeY - 1 = The number of sides on the left side of the middle section

And every slice is half the tile width, and the middle slice is the full tile width. The right slices contain only the most right part of the tile, and the left the most left side.

We can easily use tiles like 3x1 or 1x4 etc