Question

对于我和朋友正在制作的游戏，我们正在制作雷达。我们已经制作了一个基本的雷达，从某种意义上说，所有东西都显示在正确的位置，但是我们正试图向雷达添加旋转。此旋转基于当地球员角度，从0度开始直接向北，顺时针方向360直到北方。

我想知道如何从本地玩家的角度旋转画布上的所有点（这些点可以是其他玩家，物品等）。我们正努力让玩家向前走时，玩家也会直接向上移动。无论旋转程度如何，玩家都应该始终如一地前进。直接向前行走的雷达。

我尝试对每个玩家进行基本旋转： var baseX = x - localX，baseY =（canvas.height -y） - localY; var localAngle = toRadians（players [0] .rotation）;

  var newX = baseX * Math.cos(localAngle) - baseY * Math.sin(localAngle);
  var newY = baseX * Math.sin(localAngle) + baseY * Math.cos(localAngle);

  newX += localX;
  newY += localY;

问题在于，我并不总是在＆＃34; up＆＃34;雷达，它取决于我在寻找的地方。谢谢。

Answer 1

为了有效地旋转事物，你需要从线性代数中理解基础的概念。简而言之，这意味着您需要两个单独的向量（基向向量），它们为您定义所有向量（对象）的位置是空间（在您的情况下为2D）。因此，如果要在场景中旋转对象，则需要对所有对象应用旋转变换。这可能是：（向右旋转）

Math.cos  -Math.sin 0
Math.sin  Math.cos 0
0         0        1

（向左旋转）

Math.cos  Math.sin 0
-Math.sin  Math.cos 0
0          0        1

所以它是这样的：

let multiplyMatrixVector = (A, v)  => {
    let C=[]; 
    C[0] = (A[0]*v.x)+(A[1]*v.y)+(A[2]*v.z);   
    C[1] = (A[3]*v.x)+(A[4]*v.y)+(A[5]*v.z);
    C[2] = (A[6]*v.x)+(A[7]*v.y)+(A[8]*v.z);   
    return {x:C[0], y:C[1], z:C[2]};   
}; 


let locations = [{x:34,y:7,z:0}];
let newLocations = map(
                     (location) => {
                        return multiplyMatrixVector(matrix,location)
                     },  
                     locations
                   )

修改如果你不仅要在雷达上旋转点，还要移动它，你需要应用

translation to your point object in matrix form: x+a 1 0 a x y+b <- 0 1 b <- y 1 0 0 1 z

您可以通过旋转到单个矩阵来组合它。所以你的矢量进入平移矩阵然后进入旋转，也不要忘记原点矢量。您需要在转型中对其进行核算。

在画布中旋转原点周围的点

1 个答案: