Phaser

Jouer une animation Phaser en sens inverse

Posted on 17/09/2014 · Posted in Phaser

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
);