Merge pull request #2505 from gotenxds/ReverseAnimation

Added a reverse functionality to animations.

src/animation/Animation.js

@@ -150,6 +150,12 @@ Phaser.Animation = function (game, parent, name, frameData, frames, frameRate, l
     */
     this.onLoop = new Phaser.Signal();
 
+    /**
+     * @property {boolean} isReversed - Indicates if the animation will play backwards.
+     * @default
+     */
+    this.isReversed = false;
+
     //  Set-up some event listeners
     this.game.onPause.add(this.onPause, this);
     this.game.onResume.add(this.onResume, this);
@@ -195,7 +201,7 @@ Phaser.Animation.prototype = {
         this._timeLastFrame = this.game.time.time;
         this._timeNextFrame = this.game.time.time + this.delay;
 
-        this._frameIndex = 0;
+        this._frameIndex = this.isReversed ? this._frames.length - 1 : 0;
         this.updateCurrentFrame(false, true);
 
         this._parent.events.onAnimationStart$dispatch(this._parent, this);
@@ -237,6 +243,32 @@ Phaser.Animation.prototype = {
 
     },
 
+    /**
+     * Reverses the animation direction
+     *
+     * @method Phaser.Animation#reverse
+     * @return {Phaser.Animation} The animation instance.
+     * */
+    reverse: function () {
+        this.reversed = !this.reversed;
+
+        return this;
+    },
+
+    /**
+     * Reverses the animation direction for the current/next animation only
+     * Once the onComplete event is called this method will be called again and revert
+     * the reversed state.
+     *
+     * @method Phaser.Animation#reverseOnce
+     * @return {Phaser.Animation} The animation instance.
+     * */
+    reverseOnce: function () {
+        this.onComplete.addOnce(this.reverse.bind(this));
+
+        return this.reverse();
+    },
+
     /**
     * Sets this animations playback to a given frame with the given ID.
     *
@@ -385,14 +417,23 @@ Phaser.Animation.prototype = {
             //  And what's left now?
             this._timeNextFrame = this.game.time.time + (this.delay - this._frameDiff);
 
+            if (this.isReversed){
+                this._frameIndex -= this._frameSkip;
+            }else{
                 this._frameIndex += this._frameSkip;
+            }
 
-            if (this._frameIndex >= this._frames.length)
+            if (!this.isReversed && this._frameIndex >= this._frames.length || this.isReversed && this._frameIndex <= -1)
             {
                 if (this.loop)
                 {
                     // Update current state before event callback
-                    this._frameIndex %= this._frames.length;
+                    this._frameIndex = Math.abs(this._frameIndex) % this._frames.length;
+
+                    if (this.isReversed){
+                        this._frameIndex = this._frames.length - 1 - this._frameIndex;
+                    }
+
                     this.currentFrame = this._frameData.getFrame(this._frames[this._frameIndex]);
 
                     //  Instead of calling updateCurrentFrame we do it here instead
@@ -654,6 +695,26 @@ Object.defineProperty(Phaser.Animation.prototype, 'paused', {
 
 });
 
+/**
+* @name Phaser.Animation#reversed
+* @property {boolean} reversed - Gets and sets the isReversed state of this Animation.
+*/
+Object.defineProperty(Phaser.Animation.prototype, 'reversed', {
+
+    get: function () {
+
+        return this.isReversed;
+
+    },
+
+    set: function (value) {
+
+        this.isReversed = value;
+
+    }
+
+});
+
 /**
 * @name Phaser.Animation#frameTotal
 * @property {number} frameTotal - The total number of frames in the currently loaded FrameData, or -1 if no FrameData is loaded.

typescript/phaser.comments.d.ts

@@ -127,6 +127,12 @@ declare module "phaser" {
             */
             isPlaying: boolean;
 
+
+            /**
+             * The playing direction of the Animation.
+             */
+            isReversed: boolean;
+
             /**
             * Should the parent of this Animation be killed when the animation completes?
             */
@@ -176,6 +182,11 @@ declare module "phaser" {
             */
             paused: boolean;
 
+            /**
+             * Gets and sets the reversed state of this Animation.
+             */
+            reversed: boolean;
+
             /**
             * Gets or sets the current speed of the animation in frames per second. Changing this in a playing animation will take effect from the next frame. Minimum value is 1.
             */
@@ -246,6 +257,19 @@ declare module "phaser" {
             */
             restart(): void;
 
+            /**
+             * Toggels the animation direction
+             */
+            reverse(): Animation;
+
+            /**
+             * Reverses the animation direction for the current/next animation only
+             * Once the onComplete event is called this method will be called again and revert
+             * the reversed state.
+             */
+            reverseOnce(): Animation;
+
+
             /**
             * Sets this animations playback to a given frame with the given ID.
             *

typescript/phaser.d.ts

@@ -79,6 +79,7 @@ declare module "phaser" {
             onStart: Phaser.Signal;
             onUpdate: Phaser.Signal;
             paused: boolean;
+            reversed: boolean;
             speed: number;
 
             complete(): void;
@@ -90,6 +91,8 @@ declare module "phaser" {
             play(frameRate?: number, loop?: boolean, killOnComplete?: boolean): Phaser.Animation;
             previous(quantity?: number): void;
             restart(): void;
+            reverse(): Animation;
+            reverseOnce(): Animation;
             setFrame(frameId?: string | number, useLocalFrameIndex?: boolean): void;
             stop(resetFrame?: boolean, dispatchComplete?: boolean): void;
             update(): boolean;