# changing a sprite width when playing a reel using Crafty.js

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

you can see that the sprite animation is not rendering correctly when the reel is in the last frame when animating Hardpunch is it possible to change the character width when playing a specific frame ? like you see my spritesheet does not contain a static width and height so it's a bit confusing for me

THE CODE :

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

// initialize the component
Crafty.c("RyuAnimation", {
init: function () {
this.requires("SpriteAnimation,Keyboard")
.reel('idle', 300, [
[0, 0],
[plrw * 1, 0],
[plrw * 2, 0],
[plrw * 3, 0]
])
.reel('punch', 300, [
[plrw + 12, plrh],
[plrw * 2 + 15, plrh]
])
.reel('Hardpunch', 300, [
[plrw * 3 - 25, plrh],
[plrw * 4 + 32, plrh],
[(plrw + 19) * 5 - 38, plrh]
]); //
this.animate("idle", -1);

}

// creating the player
plr1 = Crafty.e("2D,Canvas,RyuAnimation")
.attr({
x: 15,
y: ch - 100
})
.start(3);
this.bind('KeyDown', function () {
if (this.isDown('A')) {
if (!this.isPlaying("Hardpunch")) {
this.pauseAnimation().animate("Hardpunch", 1);
}
} else {
this.stop();
}

});


I read about handling complex sprite sheet with different width and height and all the answers was about creating evenly sized boxes for all sprites like this example here : How do I support animation with frames of different sizes? but i actually couldn't understand what the mean by that and how would i do it they didn't provide an example . what is evenly sized boxes?