[ How do I rotate an isometric camera around the screen center? ]

I have a tile-based project game, got a nice pseudo-3d effect using multiple tile layers, but I would like to be able to rotate the camera (essentially, rotating the sprites).

But, simply rotating the sprites isn't equal to rotating the world, right?

By that, I got to:

x = (x - y) * (tile_width/2);
y = (x + y) * (tile_width/2);

But, see? That only works for 45 degree rotated tiles! How can I modify the angle used in those formulas (or maybe a better, more appropriate one)?

Answer 1

Rotating the sprites is only part of rotating the world/camera.

To rotate the world/camera, each tile needs to be moved along an arc, and rotated at the same time. To do that you need to use polar coordinates. Compute the distance and angle from the center-of-rotation to the center of each tile. Then add the desired angle-of-rotation to the polar angle for each tile. Compute the new x and y values for the center of the tile by converting back to cartesian coordinates.

Here's what the code might look like, assuming that each tile is represented by a struct, and that struct has the original x and y coordinates of the center of the tile (i.e. the coordinates of the center of the tile when the world is not rotated).

    // compute the distance from the center of the tile to the center of rotation
    double dx = tile[t].x - centerOfRotation.x;
    double dy = tile[t].y - centerOfRotation.y;

    // compute the new location of tile in polar coordinates relative to the center of rotation
    double r = sqrt(dx*dx + dy*dy);
    double angle = atan2(dy, dx) + angleOfRotation;

    // compute the display location for the tile
    x = centerOfRotation.x + r * cos(angle);
    y = centerOfRotation.y + r * sin(angle);

    // note that the tile itself needs to rotated as well, using angleOfRotation
    // also, all angles are in radians

When attempting to rotate graphics, it helps to keep things simple. Use a small number of tiles, make the tiles different colors with strong borders, and an identifying mark to show orientation. Here's an example with 9 tiles in the initial orientation and rotated 30 degrees counter-clockwise.

Here are some examples of what can go wrong:
1) moving the tiles without rotating the tiles

2) rotating the tiles without moving the tiles

3) rotating the tiles clockwise while moving the tiles counter-clockwise

Bottom line: Pretty much any mistake will result in an image with gaps.