Javascript 基于摄影机位置和旋转计算相对项目位置

对于2d游戏，我有以下概念：

• 阶段：放置物品和相机的容器
• 项目：一个可见的实体，位于世界的某个点上，从中心定位
• 摄影机：一个不可见的实体，用于生成世界的相对图像，位于世界的某个点上，从中心定位

在插图中，您可以看到它们之间的关系以及最终结果

以下是我的代码：（简化以便于阅读）

注1：这不会发生在画布上，因此我不会使用画布平移或旋转（即使这样，我也不认为这会使问题变得更容易）

注2：项目和摄像机位置为中心坐标

var sin = Math.sin(rotationRad);
var cos = Math.cos(rotationRad);

var difX = item.x - camera.x;
var difY = item.y - camera.y;
var offsetX = camera.width / 2;
var offsetY = camera.height / 2;

var view.x = (cos * difX) - (sin * difY) + _Ax + _Bx;
var view.y = (sin * difX) + (cos * difY) + _Ay + _By;

这应该通过以下方式计算新位置：

• 通过围绕摄影机中心旋转项目来计算项目的新位置
• （_A*）通过偏移摄像机位置调整项目位置
• （_B*）通过偏移摄像机尺寸调整项目位置

我在这里尝试了几种不同的解决方案来处理A*和B*问题，但都不起作用

---

正确的方法是什么？如果可能，解释是什么？

首先从对象位置减去新的原点位置。然后按旋转的相反方向旋转它。新原点可以是视口左上角的摄影机位置。当然，如果您知道“视口中心”，则其左上角是通过减去其尺寸的一半来计算的

像这样：

var topLeft = Camera.Position - Camera.Size / 2;

var newPosition = Object.Position - topLeft;

newPosition = Rotate(newPosition, -camera.Angle);

旋转非常简单：

rotatedX = x * cos(angle) - y * sin(angle)
rotatedY = y * cos(angle) + x * sin(angle)

---

你想把世界坐标转换成摄像机坐标吗？是的，但通常的方法需要在这里进行一些调整，因为摄像机坐标指的是摄像机的中心。好的，你有一个物体，比如说一个圆，你知道它中心的世界坐标。还有一个摄影机，其位置是其视口（世界）的中心。您希望知道以摄影机位置（视口中心）为原点的圆的坐标。我说的对吗？或者你想知道摄影机视口左上角的圆坐标吗？是的，但你还应该包括摄影机旋转（围绕其中心）。当你平移摄影机的中心位置时：

var toplieft=Camera.Position-Camera.Size/2这不考虑相机旋转。旋转相机后，应进行角平移。因为你需要平移的量（在你的例子中是camera.size/2），在两个轴上是不同的量，因为旋转。。。左上角是用世界坐标计算的，所以不需要增加旋转，不是吗？而且你总是可以先旋转对象。记住否定这个角度。