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

Question

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")
        .addComponent("Ryu")
        .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?

Answer 1

The sprite sheet that you are using is what is known as a "sprite atlas". I am not sure that Crafty supports them. The current solution is to make even separation between all sprites so that they are in a grid.

See: https://groups.google.com/forum/#!topic/craftyjs/eN9KTAxieSI