Configurable Sprite Based Animations In JavaScript – jSprite

jSprite is a lightweight (~4kb) standalone JavaScript library for creating configurable animations from a sprite sheet.

How to use it:

Create a container element in which you want to place the sprite animation.

<div id="example" class="sprite"></div>

Download and put the minified version of the jSprite library before the closing body tag.

<script src="./jsprite.min.js"></script>

Initialize the library and specify the path to the sprite sheet.

var myAnimate = new jSprite({
    spriteSheet: "/path/to/sheet.png",
    container: "example",
    columns: 6, // required
    rows: 6, // required
    timing: 100 // required
});

Start/stop/restart the sprite animation.

myAnimate.start();
myAnimate.stop();
myAnimate.restart();

Specify the number of frames to play.

var myAnimate = new jSprite({
    spriteSheet: "/path/to/sheet.png",
    container: "example",
    columns: 6, // required
    rows: 6, // required
    timing: 100 // required
    length: 3
});

Decide whether to repeat the animation or not.

var myAnimate = new jSprite({
    spriteSheet: "/path/to/sheet.png",
    container: "example",
    columns: 6, // required
    rows: 6, // required
    timing: 100 // required
    repeat: true
});

Set the start frame.

var myAnimate = new jSprite({
    spriteSheet: "/path/to/sheet.png",
    container: "example",
    columns: 6, // required
    rows: 6, // required
    timing: 100 // required
    startFrame: 2
});

Set the width offset.

var myAnimate = new jSprite({
    spriteSheet: "/path/to/sheet.png",
    container: "example",
    columns: 6, // required
    rows: 6, // required
    timing: 100 // required
    widthOffset: 20
});

Changelog:

06/10/2019

• v1.6.10