使用 p5 库时，面向鼠标的旋转不正确

Question

我正在制作一个 javascript 射击游戏。我希望玩家向鼠标旋转。它正在工作，但旋转不正确。 我用图像尝试了这个，它可以工作，但精灵本身（player1）不是。 我以前问过一次，但没有得到答复

我是 javascript 的初学者，希望能提供帮助。

我正在使用 p5.js 库

这是我的代码 sn-p：

//variables
var player1;
var gun1;
var gun2;


function preload(){
  img = loadImage('rect1.png');
}

function setup(){
    //creating sprites
    player1 = createSprite(200,200,30,30)
    
    gun = createSprite(player1.x,player1.y-20,5,30)
    gun.shapeColor = "black"
    player1.addImage("player",img)
     player1.scale = 0.2
}

function draw(){
  canvas = createCanvas(displayWidth-20, displayHeight-120);
   background("#32CD32");
   push()
  
   gun.x = player1.x;
   gun.y = player1.y-15;

   // functions to move
   //up
  if(keyDown("up")){
    player1.y = player1.y - 5;
  }
  //down
  if(keyDown("down")){
    player1.y = player1.y + 5;
  }
  //right
  if(keyDown("right")){
    player1.x = player1.x + 5;
  }
  //left
  if(keyDown("left")){
    player1.x = player1.x - 5;
  }
  angleMode(DEGREES)
  imageMode(CENTER)
  let a = atan2(mouseY - height / 2, mouseX - width / 2);
       translate(width/2, height/2);
       //rotate(a)
       player1.rotation = a
       //image(img,0,0,40,40)
  pop()
drawSprites();
} 

Answer 1

我想我使用的是 p5.play 的过时版本，所以你的代码中没有多少对我有用，但根据你所说的，这是我认为正在发生的事情。

如果您想了解atan2() 的交易是什么，您首先必须了解atan()。基本上，您有普通的三角函数 sin、cos 和 tan。然后是反三角函数 arcsin、arccos 和 arctan（缩写为 asin、acos 和 atan）。 arctan 函数很有用，因为您可以输入一个斜率，它会为您提供该斜率的角度。不过有一个问题。 atan 只会给出介于 -pi/2 和 pi/2 之间的值。这涵盖了所有非垂直线，但是如果你想将它用于向量或有方向的东西怎么办？ atan2() 解决了这个问题。它不采用一个输入（比率：上升/运行），而是采用两个输入，一个上升和一个运行。这可以防止除以零（对于垂直线）以及上升和运行取消的迹象。第一个输入是上升，第二个是运行。输出是具有这些坐标的向量与 x 轴之间的角度。所以atan2() 会给你一些 -pi 和 pi 之间的角度。

现在让我们看看你在atan2() 函数中添加了什么：

atan2(mouseY - height / 2, mouseX - width / 2);

所以你正在考虑的向量是从画布中间到鼠标的向量。如果这是你想要的，那就太好了。如果不是，可以考虑

atan2(mouseY - player1.y, mouseX - player1.y);

这会产生从玩家位置到鼠标的向量的“标题”（不是真正的标题）。

还有一些其他潜在问题（我不知道是哪一个，因为 p5.play 不正常，或者我做错了什么）：

1. 弧度/度数：有时这东西会出错。尝试打印 a 并查看它是否是您要查找的内容。如果是度数，请考虑改为使用player1.rotation = radians(a)。我知道p5.Vector.fromAngle() 不关心angleMode，也许sprite.rotation 也不关心？
2. 我不知道 drawSprites 是如何工作的，但您可以考虑将它放在 push()/pop() 部分中。在绘制其他形状时，这是围绕点 (x, y) 进行旋转的方式：

let x = 100;
let y = 200;
let a = atan2(mouseY - y, mouseX - x);
push();
translate(x, y);
rotate(a);
square(-10, -10, 20);
pop();

正方形以 (x,y) 为中心，并围绕 (x,y) 向光标方向旋转。您必须按以下顺序进行操作：推送、平移、旋转、整形、弹出。如果你混淆了这个顺序，它就不会正确。但你所拥有的是推动、翻译、流行、塑造。我不知道sprite.rotate 是如何工作的，所以也许它应该做你想做的事。但这是另一种旋转方式。 （如果你打算这样做，我认为你必须在平移和旋转之后，pop之前在（0,0）处绘制player1）

我希望这会有所帮助！