Tweens and animations

Phaser 3
1

Hello everyone !

I’m here to ask you for a little help. I’m totally new to game development and I do it just for fun. My goal is to be able to move my player sprite around a tiled map by clicking on the target cell.

I’ve created a dead simple map with Tiled and I have a spritesheet to represent my player. I’ve created animation for left, top, right and down movements like in the phaser 3 tutorial on the official website. I use easystarjs to compute the path between the position of my player and the target cell. It works I can move my player to the target.

I use a timeline with tweens to move my player but I can’t start animations … I’ve tried to use onStart and onComplete callback on my tweens to trigger animation but only the first one is played :pensive:

So my questions are :

  • is it a good idea to use tweens and timeline for something like this ?
  • how can I “attach” animation to my tweens ?

Thank you very much for your help :smile: ! (and sorry for my poor english !)

2

Hi CitronHades.

To launch the animation I would just use the anims.play() function of the sprite just before or after you launch the tween:

sprite.anims.play('walk_left');
walkTween.play();

And if you want to change the animation when it reaches destination I would use the onComplete property on the configuration object you pass to the tween creation function:

this.tween.add({
    targets: sprite,
    //...
    onUpdate: playIddle,
    //...
})

function playIddle() {
    sprite.anims.play('iddle');
}

Hope this helps