CODEWITHSUNDEEP
javascripthtmlcanvaseaseljssprite-sheet
jordan
jordan

Reputation: 349

Trouble animating spritesheet in EaselJS

I'm trying to animate a spritesheet using EaselJS, but I keep getting an uncaught type error:

undefined is not a function on this line -
bmpAnimation = new createjs.BitmapAnimation(spriteSheet);

Here is my code so far:

// JavaScript Document
window.onload = function(){

//Creating a new Stage instance, passing in our canvas element's ID.
var stage = new createjs.Stage("canvas"),

imgMonsterARun = new Image();
imgMonsterARun.src = "img/MonsterARun.png";

    var spriteSheet = new createjs.SpriteSheet({
        // image to use
        images: [imgMonsterARun], 
        // width, height & registration point of each sprite
        frames: {width: 64, height: 64, regX: 32, regY: 32}, 
        animations: {    
            walk: [0, 9, "walk"]
        }
    });

    // create a BitmapAnimation instance to display and play back the sprite sheet:
    bmpAnimation = new createjs.BitmapAnimation(spriteSheet);

    // start playing the first sequence:
    bmpAnimation.gotoAndPlay("walk");     //animate

    // set up a shadow. Note that shadows are ridiculously expensive. You could display hundreds
    // of animated rats if you disabled the shadow.
    bmpAnimation.shadow = new createjs.Shadow("#454", 0, 5, 4);

    bmpAnimation.name = "monster1";
    bmpAnimation.direction = 90;
    bmpAnimation.vX = 4;
    bmpAnimation.x = 16;
    bmpAnimation.y = 32;

    // have each monster start at a specific frame
    bmpAnimation.currentFrame = 0;
    stage.addChild(bmpAnimation);

    createjs.Ticker.setFPS(60);
    createjs.Ticker.useRAF = true;
    createjs.Ticker.addListener(window);

        function tick() 
        {       
            // Hit testing the screen width, otherwise our sprite would disappear
            if (bmpAnimation.x >= screen_width - 16) {
                // We've reached the right side of our screen
                // We need to walk left now to go back to our initial position
                bmpAnimation.direction = -90;
            }

            if (bmpAnimation.x < 16) {
                // We've reached the left side of our screen
                // We need to walk right now
                bmpAnimation.direction = 90;
            }

            // Moving the sprite based on the direction & the speed
            if (bmpAnimation.direction == 90) {
                bmpAnimation.x += bmpAnimation.vX;
            }
            else {
                bmpAnimation.x -= bmpAnimation.vX;
            }

            // update the stage:
            stage.update();
        }
        tick();

};

Any help would be appreciated.

Upvotes: 1

Views: 1560

Answers (2)

Dhankuwar Sisodiya
Dhankuwar Sisodiya

Reputation: 21

Try using "Sprite" instead of "BitmapAnimation".

That is 

bmpAnimation = new createjs.BitmapAnimation(spriteSheet);

becomes 

bmpAnimation = new createjs.Sprite(spriteSheet);

Worked for me.

Upvotes: 1

derz
derz

Reputation: 732

In 0.8.0 you can use the normal SpriteSheet to create an animated SpriteSheet. Checkout the Demo on http://createjs.com/Demos/EaselJS/SpriteSheet (make sure to check the code under "live-edit" ;-))

Upvotes: 1

Related Questions