I’m very exited with Tiled and I started to make an HTML viewer for my own use. Everything works fine but I had a big headache with flipping the tiles. I use some 2D matrice and it is easy enough [scalex,skewx,skewy,scaley,dx,dy].
What I had a lot of troubles was to put back the tiles so they stick on the grid at their proper place.
One problem I guess is the center of the transform at the top left corner of the tile and the tile sitting on the bottom lef corner of its cell.
I ended up applying the result matrice to a 2D point and guessing with my eyes the extra offset I should apply, It works ok but Im sure Im missing something there.
It depends a little on the API you’re using. The flipping flags are the easiest to implement when you’re using OpenGL, or anything where you specify both vertex coordinates and texture coordinates. This is because they only affect the texture coordinates, in quite natural ways.
If you instead have an API where you need to specify scale, rotation and transformation, then it gets tricky. I could try to explain it but for now I’ll just point to the rendering code in Tiled, which has to do the same thing since it uses the QPainter API. See CellRenderer::render:
Well I don’t use any API I’m writing it from scratch.
It seems I really did it the hard way … .I think I miss the fact that the transformation was done at the center of the cell which makes me feel stupid.
It works fine so I gues it is ok, thanks for the quick answer.
Well, of course you’re using an API. I’m talking about the rendering API, and the one you’re using is called the HTML5 Canvas 2D API. It works similar to QPainter, the 2D rendering API in Qt used by Tiled.
I remember now why I was so confused. The center of rotation is not at the center of the cell but at the center of the square made with the smallest cell dimension stuck on the left bottom of the cell … The thing is when I tried on some non squared cells and some non squared tiles my head kinda explode …
