Pour jouer une animation Phaser en boucle, le plus simple est de posséder une texture dont le début et la fin sont proches.
Comme cela n’est pas toujours le cas, voici comment jouer votre animation dans les deux sens, ou encore “How to reverse a Phaser animation”
Première méthode, utilisant la programmation événementielle
La première méthode consiste à définir deux animations, une à l’endroit et une à l’envers. L’objectif étant de lancer l’animation forward à la fin de l’animation reverse et vice-versa.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | var frameRate = 20; var forward = this.sprite.animations.add( 'forward', Phaser.Animation.generateFrameNames('vapeur_', 1, 6, '.png', 5), frameRate ); var reverse = this.sprite.animations.add( 'reverse', Phaser.Animation.generateFrameNames('vapeur_', 6, 1, '.png', 5), frameRate ); forward.onComplete.add(function() { this.sprite.animations.play('reverse'); }, this); reverse.onComplete.add(function() { this.sprite.animations.play('forward'); }, this); this.sprite.animations.play('forward'); |
Deuxième méthode, simple & recommandée
La deuxième méthode, beaucoup plus simple et que je recommande, consiste à assembler deux listes de frames: l’une correspondant à l’animation à l’endroit, et l’autre correspondant à l’animation à l’envers.
1 2 3 4 5 6 7 8 9 | var frameRate = 20; var loop = true; this.sprite.animations.add( 'default', Phaser.Animation.generateFrameNames('vapeur_', 1, 6, '.png', 5).concat(Phaser.Animation.generateFrameNames('vapeur_', 6, 1, '.png', 5)), frameRate, loop ); |