Reverse Animation Frames

[oliversb]

Hey there,

 

I am looking to reverse animation frame order through a reference of the animation with something like:

 

mySprite.animations.currentAnim.reverse();

 

OR:

var animation = mySprite.animations.currentAnim;//loop variablevar i;//store number of frames to skipvar skip = animation.frameTotal;//loop backwards for reverse order//it is not clear to me whether frameTotal is a 0-based index or 1-based index so let's pretend it is 0-basedfor(i = animation.frameTotal; i > 0; i--) {animation.addFrame(animation.getFrame(i));}//loop from the first frame to the last frame before we added frames in reverse orderfor(i = 0; i < skip; i++) {animation.deleteFrame(i);}

Thanks

[eguneys]

Hey I have a similar problem take a look at my post: http://www.html5gamedevs.com/topic/7239-phaser-animation-playback-examples/, nobody answered that.

 

I wonder why you are adding and deleting frames like that, is there even methods to do that?

 

Here's my current solution:

 

 

I add the animations like this, "up0" is the reverse of "down0"

 

        sprite.animations.add('up0',                            [1, 2, 3, 4], this.frameRate);        sprite.animations.add('down0',                            [4, 3, 2, 1], this.frameRate);

Then you can play this with:

     // play up     sprite.play('up0');     // play down     sprite.play('down0');

 

Now my problem was i have to stop the "up0" animation in the middle (say at frame 2) then play the reverse,

now i can't simply play "down0" then it would start from the beginning.

I have to do something like this if it makes sense:

'set the sprite frame to the current animations ("up0") current frame then play the reverse animation ("down0")'

this hopefully with start playing "down0" from the middle (where "up0" left off).

 

Here's my function to do that, it seems to work but it's just a custom hack.

  MySprite.prototype.playDownNow = function() {        // What's the difference between these they don't match        //console.log(this.animations.currentFrame);        //console.log(this.animations.currentAnim.currentFrame);        // save the previous animation frame        var cf = this.animations.currentAnim.currentFrame;        // stop the current animation        this.animations.currentAnim.stop();        // animation to be played        var a = this.animations.getAnimation('down0');        // this is bad        //a.play();        // call the animation manager to play        this.animations.play('down0');        if (cf) {            // currentAnim is changed            //a.setFrame(this.animations.currentAnim.currentFrame.name);            a.setFrame(cf.name);            // calling set frame with a number doesn't work            //a.setFrame(10);            // a local index can be used            //a.setFrame(10, true);        }     }  }

[oliversb]

 

Hey I have a similar problem take a look at my post: http://www.html5gamedevs.com/topic/7239-phaser-animation-playback-examples/, nobody answered that.

 

I wonder why you are adding and deleting frames like that, is there even methods to do that?

 

Here's my current solution:

 

 

I add the animations like this, "up0" is the reverse of "down0"

 

        sprite.animations.add('up0',                            [1, 2, 3, 4], this.frameRate);        sprite.animations.add('down0',                            [4, 3, 2, 1], this.frameRate);

Then you can play this with:

     // play up     sprite.play('up0');     // play down     sprite.play('down0');

 

Now my problem was i have to stop the "up0" animation in the middle (say at frame 2) then play the reverse,

now i can't simply play "down0" then it would start from the beginning.

I have to do something like this if it makes sense:

'set the sprite frame to the current animations ("up0") current frame then play the reverse animation ("down0")'

this hopefully with start playing "down0" from the middle (where "up0" left off).

 

Here's my function to do that, it seems to work but it's just a custom hack.

  MySprite.prototype.playDownNow = function() {        // What's the difference between these they don't match        //console.log(this.animations.currentFrame);        //console.log(this.animations.currentAnim.currentFrame);        // save the previous animation frame        var cf = this.animations.currentAnim.currentFrame;        // stop the current animation        this.animations.currentAnim.stop();        // animation to be played        var a = this.animations.getAnimation('down0');        // this is bad        //a.play();        // call the animation manager to play        this.animations.play('down0');        if (cf) {            // currentAnim is changed            //a.setFrame(this.animations.currentAnim.currentFrame.name);            a.setFrame(cf.name);            // calling set frame with a number doesn't work            //a.setFrame(10);            // a local index can be used            //a.setFrame(10, true);        }     }  }

 

Thanks. I thought something similar up just now actually. I am creating my own engine that runs on top of Phaser a little bit like how Phaser runs on top of Pixi.

[Skeptron]

I know I arrive long after the battle (sorry), but there a simple workaround I have found to reverse any animation dynamically. The trick is to use Phaser.Animation.generateFrameNames(), which generates an array of frame names, and to use the javascript reverse() function for the reversed animation.

 

For example, this animation : 

animations.add('anim0', Phaser.Animation.generateFrameNames('anim0_', 0, 5, '', 3), 12, false);

Becomes, for the reversed version : 

animations.add('anim0-reversed', Phaser.Animation.generateFrameNames('anim0_', 0, 5, '', 3).reverse(), 12, false);

I guess an official function like  Phaser.Animation.generateReversedFrameNames(), or the ability to go downward in the already existing function would be a plus.

[eguneys]

@Skeptron_, ye Phaser has a utility function to generate frame names easily, however it doesn't help, you still add a new animation this time reversed. What I really need is to add a single animation, and should be able to call animation.playReverse on it. The really cool thing about this feature is, you can reverse an animation in the middle of playing it.

 

So for example you have an animation with frames [1, 2, 3, 4]. You start playing

1, 2, 3. Then you stop and want to play reverse now, so you want to play 2, 1. There is no easy way of doing that. Adding two different animations is making the problem worse. I had a workaround to solve this problem manually by adding to animations that are reverse of each other, like you mentioned, but it was painful.

 

I really like to see an animation reverse feature.

[Skeptron]

Yes you're totaly right! I'm sorry I did not accuratly understand your problem.

[Skeptron]

Well, it even seems like my reverse() trick isn't necessary at all. The generateFrameNames() method totaly accepts a starting index bigger than the end index. Sorry everyone for this inappropriatly rushed answer!

 

(Source : http://docs.phaser.io/Animation.js.html#sunlight-1-line-743)

[jdnichollsc]

Hi guys!

 

I would also like reverse animation feature!! (very useful for animating with Phaser)

 

Regards, Nicholls

[jdnichollsc]

Hi guys!

 

I found a solution: http://codepen.io/jdnichollsc/pen/ZYeWEr and in GSAP forum http://greensock.com/forums/topic/11177-animate-phaser-sprite-with-tweenmax-frame-by-frame/

 

Regards, Nicholls