6

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:

Example rendering

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?

Sander Visser
  • 4,144
  • 1
  • 31
  • 42
  • 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 Oct 09 '13 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 complicated to determine wich sprites should be drawed before the previous one – Sander Visser Oct 09 '13 at 22:51
  • 2
    It would be far less complicated 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 Oct 09 '13 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 Oct 09 '13 at 23:01
  • Sounds like you're all over it - I like that. Good luck. – Marty Oct 09 '13 at 23:02
  • It will be a challenge to get this nicely in the Scene Manager =) but i like challenges – Sander Visser Oct 09 '13 at 23:11

4 Answers4

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:

enter image description here

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.

Marty
  • 39,033
  • 19
  • 93
  • 162
  • One piece per tile would be 4 tiles. What also is possible: take the left half of tile (2,0) and take it to the full height of the image, than a piece for (2,1) and the right-half of (3,1). Or is this the 4 tile approach better? – Sander Visser Oct 09 '13 at 23:33
  • 1
    @SanderVisser I would go with one per tile if you were willing. I believe that will give the best and most consistent results. – Marty Oct 09 '13 at 23:35
  • It would be difficult to cut the chimney, the tile is just a png file and square. cutting it in 3 vertical pieces will be easier than in more pieces. or i'm i missing something – Sander Visser Oct 09 '13 at 23:41
  • @SanderVisser I think in this particular case the house you have isn't well suited to the grid you've got. I've been playing Tactics Ogre for several hours per day on my PSP of late and all the buildings etc match up to the grid nicely which would have made it easy to work with. – Marty Oct 09 '13 at 23:46
  • But when i have a tile (a stable) that's 2 by 3. it will look a lot nicer if its rendered from a 3d model to an isometric view. If i make it 1x1 and i put a tree beside it wich is also 1x1 everything will be out of proportion wich i really want to prevent. Also the height can be more than what the tile size is covering – Sander Visser Oct 09 '13 at 23:52
  • @SanderVisser Yeah, your sprites can be as 'tall' as you like. Like I mentioned, imagine each graphic as a pillar which can be as tall as you like coming out of the grid. What you want to avoid is having the base of the pillar flowing into the surrounding tiles. – Marty Oct 09 '13 at 23:58
  • You're right, but i shouldn't think in pilars. Because the top-most tile of the house doesn't need to be rendered if the tile in front of it contains that part. – Sander Visser Oct 10 '13 at 00:14
1

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

Clint Bellanger
  • 36
  • 2
0

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/

Mr_Pouet
  • 4,061
  • 8
  • 36
  • 47
0

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)

enter image description here

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

Sander Visser
  • 4,144
  • 1
  • 31
  • 42