this is my jsfiddle : http://jsfiddle.net/seekpunk/ek6ub4u5/1/

i don't understand what i am missing it's been three days now working and trying to do the animation but i am stuck

 Crafty.sprite(128, "https://0.s3.envato.com/files/42440549/1_Ninja.jpg", {
               idle: [1, 0]

i've loaded the spriteseet image and declare idle

 Crafty.c("animation", {
               init: function () {
                   this.animate("run", 1, 1, 4);
                   this.bind("enterframe", function () {
                       if (!this.isPlaying("run")) {
                           this.animate("run", 20);

then i have declared the animation component and the bindframe function

var player = Crafty.e("2D,Canvas,idle, animation")
                        .attr({ x: 0, y: ch - 128, w: 128, h: 128 });

then i've declared the player ,but sadly the animation is not working .. can anyone tell me what i am missing please


There are a few problems here. First, SpriteAnimation has changed. You now need to define an animation reel.

//this.animate("run", 1, 1, 4);
this.reel("run", 1000, 1, 1, 4);

Second, names in javascript and Crafty are case sensitive.

//this.bind("enterframe", function () {
this.bind("EnterFrame", function () {

Third, I fixed a few small problems with your jsfiddle so it will run. http://jsfiddle.net/hso6cmvp/


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.