如何使用p5.js/p5.play显示精灵碰撞/重叠后的动画

Question

当精灵之间发生碰撞时，我正在尝试显示动画。我拍摄一些小行星，当我拍摄它们时，当子弹与小行星相撞或重叠时，小行星就消失了。我想在小行星相撞后播放一段动画。我该怎么做呢？

请参阅下面的代码

function createAsteroids() { // code to spawn asteroids at random locations
    for (let i = 0; i < numAsteroids; i++) {
        asteroid = createSprite(random(0, 1000), random(-50, -350), 40, 40);
        asteroid.addImage(asteroidSprite)
        asteroidSprite.resize(65, 65);

        asteroid.maxSpeed = random(1, 3);
        rock.add(asteroid);
        asteroidArray.push(asteroid);
    }
}
function drawAsteroid() { // draws asteroids moving down and checking collision
    rock.overlap(turret, explode)
    for (let i = 0; i < asteroidArray.length; i++) {
        if (asteroidArray[i].position.y > height) {
            asteroidArray[i].position.y = 0;
            asteroidArray[i].position.x = random(0, 800);
        }
        asteroidArray[i].addSpeed(3, 90);   // code to move asteroids towards the turrets using attracttion point
        if (i % 3 == 0) {
            asteroidArray[i].attractionPoint(1, 100, 740);
        }
        if (i % 3 == 1) {
            asteroidArray[i].attractionPoint(1, 500, 740);
        }
        if (i % 3 == 2) {
            asteroidArray[i].attractionPoint(1, 1200, 740);
        }
    }
}
function createBullets() { // code to create bullet
    for (let i = 0; i < numBullets; i++) {
        bullets = createSprite(500, 740, 25, 25);
        bullets.addImage(bulletSprite)
        bullets.maxSpeed = 6;
        pew.add(bullets)
        bulletArray.push(bullets)
    }
}
function drawBullets() { // code to fire bullets
    pew.overlap(rock, explode)
    explodeSound.play()
    bulletArray[bullCount].attractionPoint(4, mouseX, mouseY);
    bullCount++;
}

function explode(sprite, obstical) { //code for explosion and collision and removal of sprites on collision
    sprite.remove()
    obstical.remove()
    explodeSound.play()
}

我认为我需要在drawBullets()函数或explode函数中实现一些东西。但不确定当子弹与小行星相撞时如何实际播放动画。

explosion = loadAnimation('assets/0.png', 'assets/1.png', 'assets/2.png', 'assets/3.png', 'assets/5.png', 'assets/6.png',
        'assets/7.png', 'assets/8.png', 'assets/9.png', 'assets/10.png', 'assets/11.png', 'assets/12.png', 'assets/13.png',
        'assets/14.png', 'assets/15.png', 'assets/16.png', 'assets/17.png', 'assets/18.png', 'assets/19.png', 'assets/20.png',
        'assets/21.png', 'assets/22.png', 'assets/23.png', 'assets/24.png', 'assets/25.png', 'assets/26.png', 'assets/27.png',
        'assets/28.png', 'assets/29.png', 'assets/30.png', 'assets/31.png', 'assets/32.png', 'assets/33.png', 'assets/34.png',
        'assets/35.png', 'assets/36.png', 'assets/37.png', 'assets/38.png', 'assets/39.png', 'assets/40.png', 'assets/41.png',
        'assets/42.png', 'assets/43.png', 'assets/44.png', 'assets/45.png', 'assets/46.png', 'assets/47.png');

Answer 1

发生碰撞时，可以创建一个新对象，其中包含有关碰撞的信息以及希望碰撞发生的时间，然后将该对象添加到新的explosions = []中。如下所示：

 explosions.push({
  x: towers[j].position.x,
  y: towers[j].position.y,
  time: 20
 });

当然，在您的示例中，您需要在碰撞发生时在项目符号的位置创建对象。

然后在您的draw()中，您可以简单地向后迭代该数组并显示动画：

function draw() {
  ...
  // loop backwards so we can remove from array
  for (let i = explosions.length - 1; i >= 0; i--) { 

    animation(explodeAnimation, explosions[i].x, explosions[i].y);
    explosions[i].time--;
    
    if (explosions[i].time <= 0) {
      explosions.splice(i, 1);
    }
  }
}

您也可以潜在地使用setTimeout，但这可能更清楚。

下面是我创建的一个例子(动画有点不靠谱，我是从this animation reference上复制过来的)：

​

let numAsteroids = 10;
let towers;
let rock;

let spriteSheet;

let explosions = [];
function setup() {
  createCanvas(400, 400);
  spriteSheet = loadSpriteSheet('spritesheet.png', 171, 158, 11);
  explodeAnimation = loadAnimation(spriteSheet);
  
  rock = Group();
  towers = Group();
  createTowers();
  createAsteroids();
}

function draw() {
  background(220);
  

  drawSprites(rock);
  drawSprites(towers);
  updateAsteroids();
  
 // loop backwards so we can remove from array
  for (let i = explosions.length - 1; i >= 0; i--) { 

    animation(explodeAnimation, explosions[i].x, explosions[i].y);
    explosions[i].time--;
    
    if (explosions[i].time <= 0) {
      explosions.splice(i, 1);
    }
  }

}

function createAsteroids() {
  // code to spawn asteroids at random locations
  for (let i = 0; i < numAsteroids; i++) {
    let asteroid = createSprite(random(0, width), random(-50, -350), 40, 40);
    asteroid.maxSpeed = random(1, 3);
    rock.add(asteroid);
    
    let tower = floor(random(3))
    
    asteroid.attractionPoint(asteroid.maxSpeed, towers[tower].position.x, towers[tower].position.y);
  }
}


function updateAsteroids() {
  // draws asteroids moving down and checking collision
  for (let i = rock.length - 1; i >= 0; i--) {
    if (rock[i].position.y > height) {
      rock[i].position.y = 0;
      rock[i].position.x = random(0, width);
    }
    
    for (let j = towers.length - 1; j >=0; j--) {
      if (rock[i].overlap(towers[j])) {
        rock[i].position.y = 0;
        rock[i].position.x = random(0, width);
        
        explosions.push({
          x: towers[j].position.x,
          y: towers[j].position.y,
          time: 20
        });
      }
    }
  }
}

function createTowers() {
  towers.push(createSprite(40, height - 30, 40, 90));
  towers.push(createSprite(width/2, height - 30, 40, 90));
  towers.push(createSprite(width-40, height - 30, 40, 90));
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>
        <script src="https://cdn.jsdelivr.net/gh/molleindustria/p5.play/lib/p5.play.js"></script>

    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <script src="sketch.js"></script>
  </body>
</html>

​

下面是我为此创建的p5.js editor sketch的链接。