Phaser 3 - How to Stop gameObject after moving with accelerateTo

Question

I'm trying to create an animation for a deck dealing out cards with the accelerateTo method. Phaser's docs says that the game object doesn't stop moving once it reaches the destination coordinates. There is no explanation on how to actually stop the object once it reaches its destination.

function preload () {
    this.load.image('back', '../static/deck/flipo.png')
};

function create () {
  card = this.physics.add.image(500,500, 'back')
  this.physics.accelerateTo(card, 126, 160, 60, 1)
};

This works to get the card to move along a path, but how can I make it stop? I'm guessing I could use an invisible collider object, but I prefer to use a cleaner solution.

Answer 1

You can check for it's position in update function and if it reaches desired x, y position. You can do setVelocity(0) to stop it.

But to be honest since you just want to move cards from one place to another, I think using tween is the best and easy option. You can also set onCompleteCallback on tween.

var tween = this.tweens.add({
    targets: card,
    x: 120,
    y: 160,
    ease: 'Power1',
    duration: 3000
});

Here is the simple tween example.