Spritesheet

Spritesheet can be used to create a simple spritesheet canvas element.

Sprites should be generated with Texturepacker, using the EaselJS template.

Create a spritesheet

const options = {
    devicePixelRatio: devicePixelRatio,
    el: canvas,
    images: [images], // array
    frames: [frames], // array
    order: [data.animations['name'].frames] // optional
};
const spritesheet = new Spritesheet(options);

Methods

frame(int)

Tell Spritesheet which frame to show

spritesheet.frame(0);

Combined with TweenMax (GSAP 2)

TweenMax.fromTo(spritesheet, 1, {frame:0}, {frame:100, roundProps:['frame'], ease:Power0.easeNone});

getCanvas()

If no canvas-element is added to the options, then Spritesheet will create one.

const canvasElement = spritesheet.getCanvas();

close()

Clean up after using it.

spritesheet.close();