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,