Play animation backwards

[floAr]

Hey, I have been scouring the issues and discussion but did not find what I was looking for:
I have an animation that opens a book. I want to reuse the same frames to close the book again. Is there a way to achieve this with AnimationStrategy 'end' as I am relying on the end event for the state tree.

[eonarheim]

Hi @floAr

I think the quickest way in the current version of Excalibur would be to create a new animation for the "closed" with the frames reversed. This is probably a good new feature to add to create a reversed animation, I'll make an issue for that shortly.

Give this a try

// Pseudo code
const forwards = ex.Animation({...}); // animation that ends
const backwards = forwards.clone();
backwards.frames.reverse(); // reverses in place, okay because clone() creates a new frames list so the 'forwards' animation should be fine

const actor = new ex.Actor({...});
actor.graphics.use(forwards);
forwards.events.on('end', () => {
   actor.graphics.use(backwards);
});

[floAr]

Amazing, that works very well. I was only trying reversing the order when creating the Animation but it seems like it is sorting it again internally. Never thought of reversing the frames