面向鼠标的旋转对于 p5 库不正确

Question

我正在制作一个 javascript 射手 game.i 希望玩家旋转朝向 mouse.it 正在工作，但旋转不正确。我用图像尝试了这个，它有效，但对于精灵本身（player1），不是。我以前问过一次，但没有得到答复

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

我正在使用 p5.js 库

这是我的代码片段：

//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() 解决了这个问题。它不是采用一个输入（比率：rise/run），而是采用两个输入，一个上升和一个运行。这可以防止除以零（对于垂直线）和上升的迹象以及运行取消。第一个输入是上升，第二个是运行。输出是具有这些坐标的向量与 x 轴之间的角度。所以 atan2() 会给你一些 -pi 和 pi 之间的角度。

现在让我们看看您在 atan2() 函数中输入了什么：

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

所以您考虑的矢量是从 canvas 中间到鼠标的矢量。如果这是你想要的，那就太好了。如果不是，也许可以考虑

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

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

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

radians/degrees：有时候这东西会出错。尝试打印 a 并查看它是否是您要查找的内容。如果是度数，请考虑改为 player1.rotation = radians(a)。我知道 p5.Vector.fromAngle() 不关心 angleMode，也许 sprite.rotation 也不关心？
我不知道 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 是如何工作的，所以也许它应该做你想做的事。但这里有另一种旋转方式。（如果你打算这样做，我认为你必须在平移和旋转之后，在弹出之前“在（0,0）”绘制player1）

希望对您有所帮助！

面向鼠标的旋转对于 p5 库不正确

Rotation facing mouse not correct with p5 libraries

javascript

mouse

rotation

p5.js

p5.play