如何围绕屏幕中心旋转等距相机？

Question

我有一个基于瓦片的项目游戏，使用多个瓦片层获得了不错的伪 3d 效果，但我希望能够旋转相机（本质上是旋转精灵）。

但是，简单地旋转精灵并不等于旋转世界，对吧？

至此，我必须：

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

但是，看到了吗？这只适用于 45 度旋转的瓷砖！如何修改这些公式中使用的角度（或者可能是一个更好、更合适的公式）？

Answer 1

旋转精灵只是旋转世界/相机的一部分。

要旋转世界/相机，每个图块都需要沿弧线移动，并同时旋转。为此，您需要使用极坐标。计算从旋转中心到每个图块中心的距离和角度。然后将所需的旋转角度添加到每个图块的极角。通过转换回笛卡尔坐标，计算图块中心的新 x 和 y 值。

下面是代码的样子，假设每个图块都由一个结构体表示，并且该结构体具有图块中心的原始x 和y 坐标（即图块中心的坐标）世界未旋转时平铺）。

    // 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

尝试旋转图形时，有助于保持简单。使用少量的瓷砖，使瓷砖具有强烈的边框和识别标记以显示方向的不同颜色。这是一个示例，初始方向有 9 个图块并逆时针旋转 30 度。

以下是一些可能出错的示例：
1) 移动瓷砖而不旋转瓷砖

2) 旋转瓷砖而不移动瓷砖

3) 顺时针旋转瓷砖，同时逆时针移动瓷砖

底线：几乎任何错误都会导致图像出现间隙。