如何在 p5.js 中实现多个图像围绕偏离中心点的旋转

Question

我正在使用 JavaScript 和 p5.js 库制作塔防游戏。我有 2 个图像，一个 base 和一个 gun。枪被绘制在底座的顶部，使其看起来像一个单一的单元。我需要我的枪指向敌人（沿着一条路径）。我需要帮助让枪在一个点（而不是中心）上旋转，请记住，这些塔可能有几个。我尝试过平移（改变中心）和旋转，但这不适用于许多对象，并且显然无法跟踪许多对象。

我也没有看到关于这个问题的任何其他问题，是否有更好的解决方案/替代我正在尝试完成的事情？

---

所需代码

---

一些重要的变量

var isFireTowerPressed = false;    // checks if tower is placed
var FireTowerPos = [];    // location of every tower => [] - 2d array

预加载的东西

function preload() {
    backgroundImg = loadImage("http://127.0.0.1:8080/img/extra/map1.png");
    [...]
    firetowerbaseImg = loadImage("http://127.0.0.1:8080/img/towers/firetowerbase.png");
    firetowerturretImg = loadImage("http://127.0.0.1:8080/img/towers/firetowergun.png");

}

绘制每一帧

function draw() 
{

    background(60, 238, 161);
    [...]
    if (isFireTowerPressed == true)    //checks if I have pressed the button to place the tower
    {
        image(firetowerbaseImg, mouseX - 28, mouseY - 28);
        // show range circle
        noFill();
        stroke(0,0,0);
        strokeWeight(1);
        circle(mouseX, mouseY, 300);
    }
    for (var i = 0; i < FireTowerPos.length; i++) 
    {
        image(firetowerbaseImg, FireTowerPos[i][0], FireTowerPos[i][1]);
        image(firetowerturretImg, FireTowerPos[i][0], FireTowerPos[i][1]-20);

    }

}

鼠标点击事件

function mouseClicked()
{

    if (isFireTowerPressed==true && mouseX+28 <= 750) // place-able area
    {
        FireTowerPos.push([mouseX-28, mouseY-28]);
        isFireTowerPressed = false;
    }
}

---

图片显示了我正在使用的 2 张图片（底座和枪）。我需要能够将枪转向敌人

感谢您的帮助，谢谢

Answer 1

如果您还使用 p5 库中的 push() 和 pop() 方法，则平移和旋转适用于多个对象，这允许您存储当前设置。

要向给定点旋转，函数atan2(y2 - y1, x2 - x1)是常用的方法。

为了说明，我写了这个快速的 sn-p，其中只有当鼠标在枪的射程内时，枪才会朝着鼠标旋转。

let gunSprite

function preload(){
  gunSprite = loadImage("https://i.imgur.com/ayvg9J2.jpg", ()=>{
    gunSprite.resize(20, 40)
  })
}

let guns = [
  { x: 160, y: 80,  angle: 0, range: 100 },
  { x: 300, y: 200, angle: 0, range: 150 },
  { x: 100, y: 240, angle: 0, range: 120 }
]

function setup(){
  createCanvas(600, 400)
  noFill()
}

function draw(){
  background(200)
  for(let gun of guns)
      drawGun(gun)
}

function drawGun(gun){
  
  const isWithinRange = dist(mouseX, mouseY, gun.x, gun.y) < gun.range
  if(isWithinRange)
    gun.angle = atan2(mouseY - gun.y, mouseX - gun.x) + radians(90)
  
  push()
    translate(gun.x, gun.y)
    rect(-25, -20, 50, 40) // Draw the gun base
    ellipse(0, 0, gun.range*2) // display the gun range
    rotate(gun.angle)
    image(gunSprite, -10, -40) // Set the offset of the gun sprite and draw the gun
  pop()
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.min.js"></script>