# confusion in animating a sprite sheet using craftyjs

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")
.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

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.

• you was right the width and the canvas in my Crafty.e are the reason.thank you for your help ,the background does not affect my animation it was just the width i replace it by 49 and i fix the attr and everything is working fine :D
– Sora
Sep 12, 2014 at 12:54