Animations working :)

Author: photonstorm

v3/src/animation/AnimationFrame.js

@@ -9,7 +9,7 @@ var AnimationFrame = function (frame, duration, onUpdate)
     //  The frame that comes after this one in the animation (if any)
     this.nextFrame = null;
 
-    //   Duration this frame should appear for (modifier to fps rate)
+    //   Additional time (in ms) this frame should appear for - added onto the msPerFrame
     this.duration = duration;
 
     //  Callback if this frame gets displayed

v3/src/animation/AnimationManager.js

@@ -97,6 +97,18 @@ AnimationManager.prototype = {
         }
 
         return child;
+    },
+
+    buildSpriteSheetFrames: function (key, startFrame, endFrame)
+    {
+        var out = [];
+
+        for (var i = startFrame; i <= endFrame; i++)
+        {
+            out.push({ key: key, frame: i });
+        }
+
+        return out;
     }
 
 };

v3/src/animation/frame/Animation.js

@@ -24,33 +24,57 @@ var Animation = function (manager, key, config)
     //      onComplete: function,
 
     //  Extract all the frame data into the frames array
-
     this.frames = GetFrames(manager.textureManager, GetObjectValue(config, 'frames', []));
 
-    this.framerate = GetObjectValue(config, 'framerate', 24);
+    //  Scale the time (make it go faster / slower) >>> move to Animation Component?
+    this.timeScale = 1;
+
+    //  The frame rate of playback in frames per second (default 24 if duration is null)
+    this.framerate = GetObjectValue(config, 'framerate', null);
 
+    //  How long the animation should play for. If framerate is set it overrides this value
+    //  otherwise framerate is derived from duration
     this.duration = GetObjectValue(config, 'duration', null);
 
-    if (this.duration === null)
+    if (this.duration === null && this.framerate === null)
     {
-        this.duration = this.framerate * this.frames.length;
+        this.framerate = 24;
+        this.duration = this.framerate / this.frames.length;
+    }
+    else if (this.duration && this.framerate === null)
+    {
+        //  Duration given but no framerate, so set the framerate based on duration
+        //  I.e. 12 frames in the animation, duration = 4 (4000 ms)
+        //  So framerate is 12 / 4 = 3 fps
+        this.framerate = this.frames.length / this.duration;
     }
     else
     {
-        //  Duration controls framerate
+        //  No duration, so derive from the framerate
+        //  I.e. 15 frames in the animation, framerate = 30 fps
+        //  So duration is 15 / 30 = 0.5 (half a second)
+        this.duration = this.frames.length / this.framerate;
     }
 
+    //  ms per frame (without including frame specific modifiers)
+    this.msPerFrame = 1000 / this.framerate;
+
+    //  Skip frames if the time lags, or always advanced anyway?
     this.skipMissedFrames = GetObjectValue(config, 'skipMissedFrames', true);
 
     //  Delay before starting playback (in seconds)
     this.delay = GetObjectValue(config, 'delay', 0);
 
+    //  Number of times to repeat the animation (-1 for infinity)
     this.repeat = GetObjectValue(config, 'repeat', 0);
 
+    //  Delay before the repeat starts (in seconds)
     this.repeatDelay = GetObjectValue(config, 'repeatDelay', 0);
 
+    //  Should the animation yoyo? (reverse back down to the start) before repeating?
     this.yoyo = GetObjectValue(config, 'yoyo', false);
 
+    //  Callbacks (swap for Events?)
     this.onStart = GetObjectValue(config, 'onStart', false);
     this.onRepeat = GetObjectValue(config, 'onRepeat', false);
     this.onComplete = GetObjectValue(config, 'onComplete', false);
@@ -77,13 +101,41 @@ Animation.prototype = {
         return (index < this.frames.length);
     },
 
-    setFrame: function (timestamp, child)
+    getNextTick: function (component)
+    {
+        //  When is the next update due?
+        var frame = component.currentFrame;
+
+        component.nextTick = this.msPerFrame + frame.duration;
+    },
+
+    setFrame: function (component)
     {
+        //  Example data:
+        //  timestamp = 2356.534000020474
+        //  frameDelta = 17.632333353807383 (diff since last timestamp)
+
         //  Work out which frame should be set next on the child, and set it
 
+        var frame = component.currentFrame;
+
+        var diff = component.accumulator - component.nextTick;
+
+        if (frame.nextFrame)
+        {
+            component.currentFrame = frame.nextFrame;
+
+            component.updateFrame();
 
+            component.accumulator = diff;
 
-        return child;
+            this.getNextTick(component);
+        }
+        else
+        {
+            //  We're at the end of the animation
+            component.stop();
+        }
     },
 
     destroy: function ()

v3/src/checksum.js

@@ -1,4 +1,4 @@
 var CHECKSUM = {
-build: '0b881830-1986-11e7-85f8-f3dbabc79515'
+build: 'fa396890-1994-11e7-861e-87bce096a6e5'
 };
 module.exports = CHECKSUM;

v3/src/components/Animation.js

@@ -13,10 +13,14 @@ var Animation = function (parent)
 
     this.isPlaying = false;
 
-    //  References to the data stored in the Phaser.Animation class
+    //  Reference to the Phaser.Animation object
     this.currentAnim = null;
+
+    //  Reference to the Phaser.AnimationFrame object
     this.currentFrame = null;
 
+    //  Timing playhead values
+    this.accumulator = 0;
     this.nextTick = 0;
 };
 
@@ -28,40 +32,51 @@ Animation.prototype = {
     {
         if (startFrame === undefined) { startFrame = 0; }
 
+        if (this.isPlaying)
+        {
+            this.stop();
+        }
+
         //  Load the new animation in
-        this.animationManager.loadAnimation(this, key, startFrame);
+        this.animationManager.load(this, key, startFrame);
 
-        this.parent.texture = this.currentFrame.frame.texture;
-        this.parent.frame = this.currentFrame.frame;
+        this.updateFrame();
     },
 
     play: function (key, startFrame)
     {
         if (startFrame === undefined) { startFrame = 0; }
 
-        if (this.isPlaying)
-        {
-            this.stop();
-        }
-
         this.load(key, startFrame);
 
-        this.isPlaying = true;
+        this.accumulator = 0;
+
+        this.currentAnim.getNextTick(this);
 
-        //  Calculate next tick
-        // this.nextTick = (1000 / this.framerate) + this.currentFrame.
+        this.isPlaying = true;
     },
 
     stop: function ()
     {
         this.isPlaying = false;
     },
 
+    updateFrame: function ()
+    {
+        this.parent.texture = this.currentFrame.frame.texture;
+        this.parent.frame = this.currentFrame.frame;
+    },
+
     update: function (timestamp, frameDelta)
     {
-        if (!this.isPlaying)
+        if (this.isPlaying)
         {
-            return;
+            this.accumulator += frameDelta;
+
+            if (this.accumulator >= this.nextTick)
+            {
+                this.currentAnim.setFrame(this);
+            }
         }
     }
 

v3/src/phaser.js

@@ -65,7 +65,13 @@ module.exports = Phaser;
 global.Phaser = Phaser;
 
 /*
- * “Sometimes, the elegant implementation is just a function.
- * Not a method. Not a class. Not a framework. Just a function.”
- * - John Carmack
+ * "Documentation is like sex:  when it is good, it is very, very good;
+ * and when it is bad, it is better than nothing."
+ *  -- Dick Brandon
+ */
+
+/*
+ * "Sometimes, the elegant implementation is just a function.
+ * Not a method. Not a class. Not a framework. Just a function."
+ *  -- John Carmack
  */