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

Question

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

我也没有看到关于此事的任何其他问题，有没有更好的 solution/alternative 我正在努力完成的事情？

所需代码

一些重要变量

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() and pop() 方法，则可以对多个对象进行平移和旋转，这些方法允许您存储当前设置。

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

为了说明，我写了这个简短的片段，其中只有当鼠标在枪的射程内时，枪才会向鼠标旋转。

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>

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

How to implement rotation of multiple images around an off-centre point in p5.js

javascript

animation

rotation

game-physics

p5.js

所需代码