Loading sprite sheet with EaselJS

Question

Being new to EaselJS, I've used the code from the "Simple Sprite Sheet" example that's packaged with the source zip file. I'm trying to get a sprite sheet to load and play through, but only the first frame appears.

function init() {
    var stage = new Stage(document.getElementById("canvas"));
    var ss = new SpriteSheet({
        "frames": {
            "width": 159,
            "numFrames": 71,
            "regX": 0,
            "regY": 0,
            "height": 85
        },
        "animations":{
            "instance1": [0, 0], 
            "images": ["./assets/spritesheet.png"]
        });

    var animate = new BitmapAnimation(ss);
    animate.x = 0;
    animate.y = 0;

    ss.getAnimation("instance1").frequency = 2;
    ss.getAnimation("instance1").next = "instance1";
    animate.gotoAndPlay("instance1");


    stage.addChild(animate);
    Ticker.setFPS(60);
    Ticker.addListener(stage);
}

I don't think I need a ticker function because I'm not registering any events, I'm just playing from instance1, the frames and canvas are both of equal size and the animation plays through if I substitute animate.gotoAndPlay("instance1"); with animate.play("instance1");, but loops. Any suggestions? Thanks in advance.

Answer 1

I believe I answered this on another site.

The issue is that the spritesheet format is wrong. The "animations" property is an object containing named animations with a start and end frame. In this example, the start and end frame of the only animation is [0,0], and the "images" property is inside the animations object. The correct format can be seen here:

https://github.com/CreateJS/EaselJS/blob/master/examples/SimpleSpriteSheet.html

var ss = new SpriteSheet({
    "frames": {
        "width": 159,
        "numFrames": 71,
        "regX": 0,
        "regY": 0,
        "height": 85
    },
    "animations":{
        "instance1": [0, 25] // sample end frame is "25"
    },
    "images": ["./assets/spritesheet.png"]);
});

I hope that helps anyone else with the same issue. Cheers,