The object that tweens animation targeted doesn't move back, how do I fix it?

I'm new to Phaser 3. Here is the code I adapted from a Phaser 3 official example

class BootScene extends Phaser.Scene {
  constructor() {
    super();
    console.log(this);
  }

  preload() {
    this.load.spritesheet('brawler', 'https://raw.githubusercontent.com/photonstorm/phaser3-examples/master/public/assets/animations/brawler48x48.png', {
      frameWidth: 48,
      frameHeight: 48
    });
  }

  create() {
    this.player = this.physics.add.sprite(50, 50, 'brawler', 30).setOrigin(0).setScale(2);

    this.player2 = this.physics.add.sprite(50, 50, 'brawler', 30).setOrigin(0).setScale(2);

    var tween = this.tweens.add({
      targets: this.player2,
      x: 350,
      ease: 'Power1',
      duration: 1000,
      yoyo: true,
      repeat: 0,
    });
    //tween.stop();

    let btn = this.add.text(150, 200, 'click me');
    btn.setInteractive();
    btn.on('pointerdown', () => {
      console.log('btn');
      // this.player.play('raise');
      tween.play();
    }, this);

  }
}

var config = {
  width: 400,
  height: 300,
  physics: {
    default: 'arcade',
    arcade: {
      gravity: {
        y: 0
      },
      debug: false // set to true to view zones
    }
  },
  backgroundColor: 0x000000,
  scene: [BootScene]
}

var game = new Phaser.Game(config);

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script>

everything works as expected: when game finishes loading, player2 moves to the right and moves back.

click the button does the same works.

However, if I uncomment the following line out and click the btn

//tween.stop();

player2 doesn't move back to exact where he leaves off.

enter image description here

how do I fix it?

Solution 1:

You are wright this is a strange error. I couldn't find yet anything in the documentation, that explains this behavior.

You can solve/workaround the problem, setting the start and end position of the tween x: { from: 50, to: 350 }. here a link to the documenation

class BootScene extends Phaser.Scene {
  constructor() {
    super();
    console.log(this);
  }

  preload() {
    this.load.spritesheet('brawler', 'https://raw.githubusercontent.com/photonstorm/phaser3-examples/master/public/assets/animations/brawler48x48.png', {
      frameWidth: 48,
      frameHeight: 48
    });
  }

  create() {
    this.player = this.physics.add.sprite(50, 50, 'brawler', 30).setOrigin(0).setScale(2);

    this.player2 = this.physics.add.sprite(50, 50, 'brawler', 30).setOrigin(0).setScale(2);

    var tween = this.tweens.add({
      targets: this.player2,
      x: { from: 50, to: 350 },
      ease: 'Power1',
      duration: 1000,
      yoyo: true,
      repeat: 0,
    });
    tween.stop();

    let btn = this.add.text(150, 200, 'click me');
    btn.setInteractive();
    btn.on('pointerdown', () => {
      console.log('btn');
      // this.player.play('raise');
      tween.play();
    }, this);

  }
}

var config = {
  width: 400,
  height: 300,
  physics: {
    default: 'arcade',
    arcade: {
      gravity: {
        y: 0
      },
      debug: false // set to true to view zones
    }
  },
  backgroundColor: 0x000000,
  scene: [BootScene]
}

var game = new Phaser.Game(config);

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script>

Alternative: you can create the tween paused: paused:true,, and you would not need to stop it, and should work also.

class BootScene extends Phaser.Scene {
      constructor() {
        super();
        console.log(this);
      }

      preload() {
        this.load.spritesheet('brawler', 'https://raw.githubusercontent.com/photonstorm/phaser3-examples/master/public/assets/animations/brawler48x48.png', {
          frameWidth: 48,
          frameHeight: 48
        });
      }

      create() {
        this.player = this.physics.add.sprite(50, 50, 'brawler', 30).setOrigin(0).setScale(2);

        this.player2 = this.physics.add.sprite(50, 50, 'brawler', 30).setOrigin(0).setScale(2);

        var tween = this.tweens.add({
          targets: this.player2,
          x: 350 ,
          ease: 'Power1',
          duration: 1000,
          yoyo: true,
          repeat: 0,
          paused:true
        });

        let btn = this.add.text(150, 200, 'click me');
        btn.setInteractive();
        btn.on('pointerdown', () => {
          console.log('btn');
          tween.play();
        }, this);

      }
    }

    var config = {
      width: 400,
      height: 300,
      physics: {
        default: 'arcade',
        arcade: {
          gravity: {
            y: 0
          },
          debug: false // set to true to view zones
        }
      },
      backgroundColor: 0x000000,
      scene: [BootScene]
    }

    var game = new Phaser.Game(config);

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script>

The object that tweens animation targeted doesn't move back, how do I fix it?

Solution 1:

Related

Recent Posts