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?

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?

• javascript
• game-engine
• isometric

• Can't you sort your graphics by their y position on-screen (ignoring the tiles for a moment, measured from the bottom centre point of the graphics) and draw them in that order. – Marty Commented Oct 9, 2013 at 22:47
• Well, the y position is exactly the same for the rock and house, and even when the y position of the rock is lower (so more to the top) it should overlap the house. Also it should be possible to have a map builder, so you can place your houses wherever you want. it would get pretty plicated to determine wich sprites should be drawed before the previous one – Sander Visser Commented Oct 9, 2013 at 22:51
• 2 It would be far less plicated if you broke apart your house into two sections. That way the section that branches out would be considered its own graphic and fall behind. – Marty Commented Oct 9, 2013 at 22:53
• Yes that's my thought also, i should split the full tile (2x2) into 3 strokes cutted vertically. one for 1,1 (left-half stroke) one for 2,1 (full stroke) and one for 3,1 (right-half stroke). And i should do this when the game is loaded – Sander Visser Commented Oct 9, 2013 at 23:01
• Sounds like you're all over it - I like that. Good luck. – Marty Commented Oct 9, 2013 at 23:02

4 Answers 4

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.

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 es in front of it.

Rectangular oversized tiles (e.g. 2x1, 2x3, 2x4, 3x4, 4x5) usually require a more plex 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).

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./pc_puter/fallouttactics/

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