0
\$\begingroup\$

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?

\$\endgroup\$

1 Answer 1

0
\$\begingroup\$

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

\$\endgroup\$
4
  • \$\begingroup\$ can u provide an example ? i read the post in the link and i didn't understand what did they mean by seperating the sprite \$\endgroup\$
    – Sora
    Sep 16, 2014 at 13:44
  • \$\begingroup\$ All sprites have even spacing between them so each surrounding box is the same size, like this for example: opengameart.org/sites/default/files/LPC%20Expressions_0.png \$\endgroup\$
    – Sanojian
    Sep 18, 2014 at 11:11
  • \$\begingroup\$ is there any way to change the sprite sheet image that i am using to that ??? \$\endgroup\$
    – Sora
    Sep 19, 2014 at 13:11
  • 1
    \$\begingroup\$ Where did you get this sprite sheet? It looks ripped from Street Fighter. No biggie, but do you have the corresponding atlas definitions (XML, json, or other)? If not, you will probably have to manually reposition each image so that it is the correct size and centered correctly. \$\endgroup\$
    – Sanojian
    Sep 29, 2014 at 13:47

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .