Add support for tilewidth & tileheight delta between tileset and map (eg. "perspective" map)

[parasyte]

When the tile size (tilewidth & tileheight) is not the same in both the map and the tileset(s), strange things can happen. I created a map which uses a tile size of 8x8 pixels, and a tileset which uses 64x64 pixels. The result is that MAP TILES which are not within the viewport are hidden. Keep in mind that the map tiles are smaller than tileset tiles, so when arranged on a map, the tileset tiles overlap.

Here's the map that shows this bug: https://raw.github.com/gist/3704305/5ceb4302d5a2719728fa44c33a5dfb4111fb30f1/tile_sizes.tmx This TMX can be saved to the examples/tiled_example_loader/data/ directory and loaded there.

An attempted fix was made in: f965bf4#src/level/TMXRenderer.js But it only works around the problem, by fixing cases where the tileset tiles are up to 2x larger than map tiles. And it also causes larger map layer rectangles to be drawn than necessary in the common case.

[melonjs]

Concerning the attempted fix, it also forces to add the following line to avoid an exception when reaching the end of the map :
https://github.com/melonjs/melonJS/blob/master/src/level/TMXRenderer.js#L70

I just checked as well how this is managed in Tiled, and basically endX/endY are calculated doing :
const int endX = qMin((int) std::ceil(rect.right()), map()->width() * tileWidth + 1);
const int endY = qMin((int) std::ceil(rect.bottom()), map()->height() * tileHeight + 1);

which if I'm not wrong is the same thing that I did, so no better solution there :)

[melonjs]

One more comment :

as far as I know, these boundaries issues are only visible with perspective maps, if so, the question is to know how much code we are ready to add "just" for perspective maps (is there anyone actually using it?)

[parasyte]

I think it's more general than just "perspective" maps, because the feature that allows this trouble is mixing different tile sizes. It's actually possible to have several tilesets all with different tile sizes: bigger and smaller than the map tile size. I think it's really uncommon, and can be left unimplemented until it's needed.

As for fixing, you gave me an idea in the other thread to use canvas.clip() with a rectangle specified by the rect passed to drawTileLayer() ... And extend the start and end vectors by the the largest tileset size but in all four directions. The bounds checking will be even more complicated though. Maybe this would be a good use for the rectangle geometry code you already have. ;) Just add a 'clip' method that would clip these rectangles to the viewport.

This will have some performance implications. So when implemented, it should be done with the caveat that it's a "slow path". Maybe issue a warning saying different tile sizes are supported, but it's slow.

[parasyte]

Wow, old one finally fixed!

[obiot]

Wow, i was not even remembering that one :) good fix !