confusion in animating a sprite sheet using craftyjs

Question

can anyone help me with this : http://jsfiddle.net/B5UsC/15/

you can see that the sprite animation is not rendering correctly and i am guessing that i am not using the exact width of the sprite ,i tried to change the width but also didn't work out

THE CODE :

// initialize the sprite
Crafty.sprite(52,123,"http://i.imgur.com/bkYVEe5.png", {
              Ryu: [0,0]
          });

// initialize the component
Crafty.c("RyuAnimation", {
              init: function () {
                  this.requires("SpriteAnimation,Keyboard")
                .addComponent("Ryu")
                .reel('idle', 1000, 0, 0, 9);
                this.animate('idle', -1);

              }

// creating the player 
player = Crafty.e("2D,DOM,Canvas,RyuAnimation")
                    .attr({ x: 15, y: ch - 123, w: 52, h: 123 })
                    .start(3);

i am pretty sure the missing element is hidden somewhere in this code :

Crafty.sprite(52,123,"http://i.imgur.com/bkYVEe5.png", {
              Ryu: [0,0]
          });

but help me in figure out the real problem behind this confusion because i have no idea why this error in rendering is occurred

Answer 1

A few things. First, your sprite is 49 pixels in width, not 52. Second, let the sprite size determine the width and height of your player. You don't have to declare it.

//.attr({ x: 15, y: ch - 123, w: 52, h: 123 })
.attr({ x: 15, y: ch - 123 })

Third, your animation is smearing. I think it is because you use Crafty.background("#XXX") in Canvas mode. Maybe Crafty.background is only for DOM mode? So you probably need to draw a background image instead.