Help with animation cycle

Phaser 3
1

My question is quite simple.

I am making a space-shooter game and, when the enemy collides with a laser, I want this to stop flying down and play a different animation (explosion) once then reset.

I manage to make this plays a different animation but it plays the explosion while still flying and also still playing this when reintroduced to the position 0 on axis Y.

Can someone point me to some advanced example?
Everything I could find up to now. Was simple kill() calls.

1 Like
2

Finally! Someone who is just as creative! I’m trying to do something similar with “dynamic animations” in a different game genre.

Here’s what I have after a month (or so of research) … let’s talk!

My Simple Shaman

3

Hi,
You must decompose what you want:
enemy is killed:
→ stop enemy velocity
→ play explosion animation
Once explosion ends:
→ new position of the enemy
→ play ship animation
→ add velocity to enemy

Depending on your code, there is multiple ways to do that.
Show us your code if you’re stuck.

2 Likes
4

All right @BlunT76, Sorry about the time I took to answer. (working time :wink:)

Here is my self contained UfoSprite Class.

export default class UfoSprite extends Phaser.Physics.Arcade.Sprite {
  constructor(scene, x, y) {
    super(scene, x, y, 'ufo')

    this.setAnimationManager()
    this.generateColliders(scene.ship.laserGroup)
  }

  fly() {
    this.resetPosition()

    this.setActive(true)
    this.setVisible(true)

    this.body.setVelocityY(this.aleatorySpeed())
  }

  preUpdate(time, delta) {
    super.preUpdate(time, delta)

    if (this.y > this.scene.game.canvas.height) {
      this.setActive(false)
      this.setVisible(false)
    }
  }

  aleatoryXPosition() {
    let width = this.scene.game.config.width - 10
    return Phaser.Math.Between(20, width);
  }

  aleatorySpeed() {
    return Phaser.Math.Between(100, 350);
  }

  resetPosition() {
    this.body.reset(this.aleatoryXPosition(), 0)
  }

  setAnimationManager() {
    this.scene.anims.create({
      key: 'explosion',
      frameRate: 5,
      duration: 500,
      repeat: 0,
      frames: this.scene.anims.generateFrameNames('explosion', {
        prefix: 'explosion-',
        suffix: '.png',
        start: 1, end: 4,
        zeroPad: 0
      })
    })
  }

  generateColliders(laserGroup) {
    this.scene.physics.add.collider(laserGroup, this, (laser, ufo) => {
      laser.destroy()
      ufo.body.stop()
      ufo.disableBody(true, true)
      ufo.play('explosion')
    });
  }
}

I also tried to use the event: on(“animationcomplete”), but was unluck.

5

Try with:

setAnimationManager() {
    this.scene.anims.create({
      key: 'explosion',
      frameRate: 5,
      duration: 500,
      repeat: 0,
      frames: this.scene.anims.generateFrameNames('explosion', {
        prefix: 'explosion-',
        suffix: '.png',
        start: 1, end: 4,
        zeroPad: 0
      })
    });
  this.on('animationcomplete', (currentAnim) => {
    // you can check the current animation with currentAnim.key
    if (currentAnim.key === 'explosion') {
      this.anims.play('ufo anim name', true);
    }
  });
  }
3 Likes
6

I see. Did you manage to resolve it?

7

This looks really valid. I will test it as soon as I reach my computer and, let you know. Thanks in advance.

8

Hey @BlunT76, Thanks for your answer.
That partially resolved my issue.
The other part I figured out that I was doing too much in one unique place.

I had a UFO which is a static image( no animation at all) and I was trying to make it become an explosion(animation)

I resolved to push the explosion to another sprite and now I can inactivate the UFO and play the explosion animation when the collision happens.
:smiley:

9

You did well, now you can use this explosion animation for various enemies :slight_smile:

1 Like
10

Indeed! Even the hero ship will explode.