added new Kinetic.Sprite shape that enables you to easily add animated sprites to the stage

Thorfile

@@ -5,7 +5,7 @@ class Build < Thor
   FILES = [
     "license.js", "src/GlobalObject.js", "src/Node.js", "src/Container.js", "src/Stage.js",
     "src/Layer.js", "src/Group.js", "src/Shape.js", "src/shapes/Rect.js", "src/shapes/Circle.js", "src/shapes/Image.js",
-    "src/shapes/Polygon.js", "src/shapes/RegularPolygon.js", "src/shapes/Star.js", "src/shapes/Text.js",
+    "src/shapes/Sprite.js", "src/shapes/Polygon.js", "src/shapes/RegularPolygon.js", "src/shapes/Star.js", "src/shapes/Text.js",
     "src/shapes/Line.js", "src/util/Transform.js", "src/util/Transition.js"
   ]
   

dist/kinetic-core.js

@@ -3,7 +3,7 @@
  * http://www.kineticjs.com/
  * Copyright 2012, Eric Rowell
  * Licensed under the MIT or GPL Version 2 licenses.
- * Date: Apr 28 2012
+ * Date: May 02 2012
  *
  * Copyright (C) 2011 - 2012 by Eric Rowell
  *
@@ -2907,6 +2907,98 @@ Kinetic.Image.prototype = {
 // extend Shape
 Kinetic.GlobalObject.extend(Kinetic.Image, Kinetic.Shape);
 
+///////////////////////////////////////////////////////////////////////
+//  Sprite
+///////////////////////////////////////////////////////////////////////
+/**
+ * Sprite constructor
+ * @constructor
+ * @augments Kinetic.Shape
+ * @param {Object} config
+ */
+Kinetic.Sprite = function(config) {
+    this.setDefaultAttrs({
+		index: 0,
+		frameRate: 17
+    });
+
+    config.drawFunc = function() {
+        if(this.image !== undefined) {
+            var context = this.getContext();
+            var anim = this.attrs.animation;
+            var index = this.attrs.index;
+            var f = this.attrs.animations[anim][index];
+
+            context.beginPath();
+            context.rect(0, 0, f.width, f.height);
+            context.closePath();
+            context.drawImage(this.image, f.x, f.y, f.width, f.height, 0, 0, f.width, f.height);
+        }
+    };
+    // call super constructor
+    Kinetic.Shape.apply(this, [config]);
+};
+/*
+ * Sprite methods
+ */
+Kinetic.Sprite.prototype = {
+    /**
+     * start sprite animation
+     */
+    start: function() {
+        var that = this;
+        var layer = this.getLayer();
+        this.interval = setInterval(function() {
+            that._updateIndex();
+            layer.draw();
+            if(that.afterFrameFunc && that.attrs.index === that.afterFrameIndex) {
+                that.afterFrameFunc();
+            }
+        }, 1000 / this.attrs.frameRate)
+    },
+    /**
+     * stop sprite animation
+     */
+    stop: function() {
+        clearInterval(this.interval);
+    },
+    /**
+     * set after frame event handler
+     * @param {Integer} index frame index
+     * @param {Function} func function to be executed after frame has been drawn
+     */
+    afterFrame: function(index, func) {
+        this.afterFrameIndex = index;
+        this.afterFrameFunc = func;
+    },
+    /**
+     * set animation key
+     * @param {String} anim animation key
+     */
+    setAnimation: function(anim) {
+        this.attrs.animation = anim;
+    },
+    /**
+     * set animation frame index
+     * @param {Integer} index frame index
+     */
+    setIndex: function(index) {
+        this.attrs.index = index;
+    },
+    _updateIndex: function() {
+        var i = this.attrs.index;
+        var a = this.attrs.animation;
+        if(i < this.attrs.animations[a].length - 1) {
+            this.attrs.index++;
+        }
+        else {
+            this.attrs.index = 0;
+        }
+    }
+};
+// extend Shape
+Kinetic.GlobalObject.extend(Kinetic.Sprite, Kinetic.Shape);
+
 ///////////////////////////////////////////////////////////////////////
 //  Polygon
 ///////////////////////////////////////////////////////////////////////

src/shapes/Sprite.js

@@ -0,0 +1,91 @@
+///////////////////////////////////////////////////////////////////////
+//  Sprite
+///////////////////////////////////////////////////////////////////////
+/**
+ * Sprite constructor
+ * @constructor
+ * @augments Kinetic.Shape
+ * @param {Object} config
+ */
+Kinetic.Sprite = function(config) {
+    this.setDefaultAttrs({
+		index: 0,
+		frameRate: 17
+    });
+
+    config.drawFunc = function() {
+        if(this.image !== undefined) {
+            var context = this.getContext();
+            var anim = this.attrs.animation;
+            var index = this.attrs.index;
+            var f = this.attrs.animations[anim][index];
+
+            context.beginPath();
+            context.rect(0, 0, f.width, f.height);
+            context.closePath();
+            context.drawImage(this.image, f.x, f.y, f.width, f.height, 0, 0, f.width, f.height);
+        }
+    };
+    // call super constructor
+    Kinetic.Shape.apply(this, [config]);
+};
+/*
+ * Sprite methods
+ */
+Kinetic.Sprite.prototype = {
+    /**
+     * start sprite animation
+     */
+    start: function() {
+        var that = this;
+        var layer = this.getLayer();
+        this.interval = setInterval(function() {
+            that._updateIndex();
+            layer.draw();
+            if(that.afterFrameFunc && that.attrs.index === that.afterFrameIndex) {
+                that.afterFrameFunc();
+            }
+        }, 1000 / this.attrs.frameRate)
+    },
+    /**
+     * stop sprite animation
+     */
+    stop: function() {
+        clearInterval(this.interval);
+    },
+    /**
+     * set after frame event handler
+     * @param {Integer} index frame index
+     * @param {Function} func function to be executed after frame has been drawn
+     */
+    afterFrame: function(index, func) {
+        this.afterFrameIndex = index;
+        this.afterFrameFunc = func;
+    },
+    /**
+     * set animation key
+     * @param {String} anim animation key
+     */
+    setAnimation: function(anim) {
+        this.attrs.animation = anim;
+    },
+    /**
+     * set animation frame index
+     * @param {Integer} index frame index
+     */
+    setIndex: function(index) {
+        this.attrs.index = index;
+    },
+    _updateIndex: function() {
+        var i = this.attrs.index;
+        var a = this.attrs.animation;
+        if(i < this.attrs.animations[a].length - 1) {
+            this.attrs.index++;
+        }
+        else {
+            this.attrs.index = 0;
+        }
+    }
+};
+// extend Shape
+Kinetic.GlobalObject.extend(Kinetic.Sprite, Kinetic.Shape);

tests/js/Test.js

@@ -10,7 +10,7 @@ function log(message) {
  * Test constructor
  */
 function Test() {
-    this.testOnly = '';
+    this.testOnly = 'SHAPES - add sprite';
     this.counter = 0;
 }
 /**

tests/js/unitTests.js

@@ -900,6 +900,111 @@ Test.prototype.tests = {
         };
         imageObj.src = '../darth-vader.jpg';
     },
+    'SHAPES - add sprite': function(containerId) {
+        var imageObj = new Image();
+        imageObj.onload = function() {
+            var stage = new Kinetic.Stage({
+                container: containerId,
+                width: 578,
+                height: 200
+            });
+            var layer = new Kinetic.Layer();
+            sprite = new Kinetic.Sprite({
+                x: 200,
+                y: 60,
+                image: imageObj,
+                animation: 'standing',
+                animations: {
+                    standing: [{
+                        x: 0,
+                        y: 0,
+                        width: 49,
+                        height: 109
+                    }, {
+                        x: 52,
+                        y: 0,
+                        width: 49,
+                        height: 109
+                    }, {
+                        x: 105,
+                        y: 0,
+                        width: 49,
+                        height: 109
+                    }, {
+                        x: 158,
+                        y: 0,
+                        width: 49,
+                        height: 109
+                    }, {
+                        x: 210,
+                        y: 0,
+                        width: 49,
+                        height: 109
+                    }, {
+                        x: 262,
+                        y: 0,
+                        width: 49,
+                        height: 109
+                    }],
+
+                    kicking: [{
+                        x: 0,
+                        y: 109,
+                        width: 45,
+                        height: 98
+                    }, {
+                        x: 45,
+                        y: 109,
+                        width: 45,
+                        height: 98
+                    }, {
+                        x: 95,
+                        y: 109,
+                        width: 63,
+                        height: 98
+                    }, {
+                        x: 156,
+                        y: 109,
+                        width: 70,
+                        height: 98
+                    }, {
+                        x: 229,
+                        y: 109,
+                        width: 60,
+                        height: 98
+                    }, {
+                        x: 287,
+                        y: 109,
+                        width: 41,
+                        height: 98
+                    }]
+                },
+                index: 0,
+                frameRate: 10,
+                draggable: true
+            });
+
+            layer.add(sprite);
+            stage.add(layer);
+
+            sprite.start();
+
+            // kick once
+
+            setTimeout(function() {
+                sprite.setIndex(0);
+                sprite.setAnimation('kicking');
+
+                sprite.afterFrame(0, function() {
+                    sprite.setAnimation('standing');
+                });
+            }, 2000);
+            setTimeout(function() {
+                //sprite.start();
+            }, 3000);
+        };
+        imageObj.src = '../scorpion-sprite.png';
+    },
     'STAGE - serialize stage with an image': function(containerId) {
         var imageObj = new Image();
         imageObj.onload = function() {