[#99] [#390] Allow animation updates to skip frames

- This is important for slow devices and high-speed animations
- A slow device may render at 30fps (33.333ms per frame) or slower, and animations may play at 60fps (16.6667ms per frame) or faster!
- Animation frame skipping will keep animations in sync across all devices.
- See also: https://groups.google.com/forum/#!msg/melonjs/mM4BdyQyNY8/ygEJUIPvDJwJ

Author: parasyte

src/level/TMXTileset.js

@@ -216,10 +216,11 @@
             this.animations.forEach(function (anim) {
                 anim.dt += dt;
                 duration = anim.cur.duration;
-                if (anim.dt >= duration) {
+                while (anim.dt >= duration) {
                     anim.dt -= duration;
                     anim.idx = (anim.idx + 1) % anim.frames.length;
                     anim.cur = anim.frames[anim.idx];
+                    duration = anim.cur.duration;
                     result = true;
                 }
             });

src/renderable/animationsheet.js

@@ -59,6 +59,9 @@
             // default animation sequence
             this.current = null;
 
+            // animation frame delta
+            this.dt = 0;
+
             // default animation speed (ms)
             this.animationspeed = 100;
 
@@ -115,8 +118,7 @@
                 frames : [],
                 idx : 0,
                 length : 0,
-                animationspeed: animationspeed || this.animationspeed,
-                nextFrame : 0
+                animationspeed: animationspeed || this.animationspeed
             };
 
             if (index == null) {
@@ -203,7 +205,6 @@
                 this.current = this.anim[name];
                 this.resetAnim = resetAnim || null;
                 this.setAnimationFrame(this.current.idx); // or 0 ?
-                this.current.nextFrame = this.current.animationspeed;
             } else {
                 throw new me.Renderable.Error("animation id '" + name + "' not defined");
             }
@@ -277,35 +278,43 @@
          * @param {Number} dt time since the last update in milliseconds.
          */
         update : function (dt) {
-            // update animation if necessary
-            if (!this.animationpause && this.current.length > 1) {
-                this.current.nextFrame -= dt;
-                if (this.current.nextFrame <= 0) {
-                    this.setAnimationFrame(++this.current.idx);
+            // Update animation if necessary
+            if (this.animationpause || this.current.length <= 1) {
+                return this._super(me.Sprite, "update", [ dt ]);
+            }
+
+            var duration = 0,
+                result = false;
+
+            this.dt += dt;
+            duration = this.getAnimationFrameObjectByIndex(this.current.idx).delay;
+            while (this.dt >= duration) {
+                result = true;
+                this.dt -= duration;
+                this.setAnimationFrame(this.current.idx + 1);
 
-                    // switch animation if we reach the end of the strip
-                    // and a callback is defined
-                    if (this.current.idx === 0 && this.resetAnim)  {
-                        // if string, change to the corresponding animation
-                        if (typeof this.resetAnim === "string") {
-                            this.setCurrentAnimation(this.resetAnim);
-                        }
-                        // if function (callback) call it
-                        else if (typeof this.resetAnim === "function" &&
-                                 this.resetAnim() === false) {
-                            this.current.idx = this.current.length - 1;
-                            this.setAnimationFrame(this.current.idx);
-                            this._super(me.Sprite, "update", [dt]);
-                            return false;
-                        }
+                // Switch animation if we reach the end of the strip and a callback is defined
+                if (this.current.idx === 0 && this.resetAnim)  {
+                    // If string, change to the corresponding animation
+                    if (typeof this.resetAnim === "string") {
+                        this.setCurrentAnimation(this.resetAnim);
                     }
+                    // Otherwise is must be callable
+                    else if (this.resetAnim() === false) {
+                        // Reset to last frame
+                        this.setAnimationFrame(this.current.length - 1);
 
-                    // set next frame timestamp
-                    this.current.nextFrame = this.getAnimationFrameObjectByIndex(this.current.idx).delay;
-                    return this._super(me.Sprite, "update", [dt]) || true;
+                        // Bail early without skipping any more frames.
+                        this.dt %= duration;
+                        break;
+                    }
                 }
+
+                // Get next frame duration
+                duration = this.getAnimationFrameObjectByIndex(this.current.idx).delay;
             }
-            return this._super(me.Sprite, "update", [dt]);
+
+            return this._super(me.Sprite, "update", [ dt ]) || result;
         }
     });
 })();