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

如何解决p5 库中面向鼠标的旋转不正确

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

我是 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,40,40)
  pop()
drawSprites();
}

解决方法

我想我使用的是过时的 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 不正常，或者我做错了什么）：

弧度/度数：有时这个东西会出错。尝试打印 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 是如何工作的，所以也许它应该做你想做的事。但这是进行轮换的另一种方法。（如果你打算这样做，我认为你必须在平移和旋转之后，在弹出之前绘制 player1 “at (0,0)”）

我希望这有帮助！

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

如何解决p5 库中面向鼠标的旋转不正确

解决方法

相关推荐