Properly Implement Tile Flipping + Alignment

[sunjay]

Our current implementation of tile flipping (5348580) is quite hacky and doesn't actually match Tiled in all cases. It works well enough if tiles are square (and symmetrical), but falls over otherwise.

In this screenshot of Tiled, you can see 4 tile objects (on the game_objects layer) on the left rotated 0°, 90°, 180°, and 270°. On the right there are 8 tiles (on the map layer) with various rotations and flips applied. Tile objects rotate about their center (determined by their alignment and defaulting to the bottom-left) whereas tiles are rotated and then aligned to the bottom-left.

In this screenshot, you can see that rotation of tile objects is currently completely broken. The other three tile objects are somewhere else (haven't debugged that yet). The tiles are misaligned because we use the unrotated version of the tile to compute alignment.

We're currently using a pivot field in the Sprite component to try and make this work. That field doesn't actually do what it advertises and should either be fixed or replaced once we figure out what the right solution is here.

The ideal computation pipeline for this is:

1. perform horizontal and vertical flips (if any)
2. perform rotation
3. align the image to the right spot

This is difficult to implement for a number of reasons:

• To properly implement diagonal flipping, you need to rotate first, but that breaks with the arbitrary rotations that are allowed for tile objects
• SDL2 always performs flipping first and then rotates, but that makes alignment hard because you need to know the final position in advance somehow
• To align the image, you need to compute the result of the rotation on the destination rectangle -- this duplicates work that SDL2 will do when rotating and may end up with bugs
• You can't just cache the rotated image and figure out the position later because you need the rotation info to figure out where to render the image (i.e. you must pass an angle parameter to copy_ex, you can't get around that)
  • e.g. a 30° counterclockwise rotation is hard to align because the resulting shape isn't an axis-aligned shape (indicates that alignment occurs before rotation)

References & Notes

• <object> - see description of rotation property
• From Tile flipping:

  When rendering a tile, the order of operation matters. The diagonal flip (x/y axis swap) is done first, followed by the horizontal and vertical flips.

• "Implementing Tiled Map Editor(TMX) Rotation and Flipping" - (Source Code)
  • Some subtle bugs here because the post doesn't account for tiles larger than the tile size and therefore doesn't account for alignment
• GitHub issue comment about implementing this
• SDL_RenderCopyEx
  • angle is clockwise, not counterclockwise as in math
  • center is relative to the top-left of the destination rectangle
  • It's possible that we may have to adjust the destination rectangle based on the rotation unless we can figure out a universal way to compute the center
• Question: Do we need to use the rotation in determining the collision geometry? How does that work?