Crafty JS error says I'm not closing function

Question

if (char == 'anime') {
        Crafty.sprite("sprites_hunt_w.png", {
                guy: [1, 2, 27, 31]
            })
            .reel('guy_right', 1000, [
                [1, 64],
                [34, 64],
                [65, 65]
            ])
            .reel('guy_left', 1000, [
                [1, 32],
                [34, 32],
                [65, 33]
            ])
    } else {
        Crafty.sprite("megamanx.gif", {
                guy: [0, 0, 28, 34]
            })
            .reel('guy_right', 1000, [
                [214, 19],
                [248, 19],
                [281, 19],
                [321, 19],
                [352, 19],
                [371, 19],
                [394, 19],
                [427, 19]
            ])
            // }else{
            //console.log("fail")
    }

The console for firefox is saying TypeError: Crafty.sprite(...).reel is not a function. This refers to the line

Crafty.sprite("megamanx.gif", {

The thing I do not understand is that to me it looks exactly the same(other than the image source) as this line

Crafty.sprite("sprites_huntw.png", {

Because of this I don't understand why I'm getting the error. Thank you in advance for your help

score 0 · Answer 1 · answered Apr 06 '15 at 17:44

You're trying to call .reel() as a method on the return value of Crafty.sprite. But Crafty.sprite does not return a sprite entity -- it creates a component, and then returns the global Crafty object (so that you can chain method calls on Crafty).

So instead, you need to add that component to an entity to use it, and then add the SpriteAnimation component to define reels. Here's an example from the docs:

// Define a sprite-map component
Crafty.sprite(16, "images/sprite.png", {
    PlayerSprite: [0,0]
});

// Define an animation on the second row of the sprite map (fromY = 1)
// from the left most sprite (fromX = 0) to the fourth sprite
// on that row (frameCount = 4), with a duration of 1 second
Crafty.e("2D, DOM, SpriteAnimation, PlayerSprite").reel('PlayerRunning', 1000, 0, 1, 4);

// This is the same animation definition, but using the alternative method
Crafty.e("2D, DOM, SpriteAnimation, PlayerSprite").reel('PlayerRunning', 1000, [[0, 1], [1, 1], [2, 1], [3, 1]]);

Crafty JS error says I'm not closing function

1 Answers1