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\$
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 '14 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 '14 at 11:11
  • \$\begingroup\$ is there any way to change the sprite sheet image that i am using to that ??? \$\endgroup\$ – Sora Sep 19 '14 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 '14 at 13:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.