Author: | DarceyLloyd |
---|---|
Views Total: | 741 views |
Official Page: | Go to website |
Last Update: | June 10, 2019 |
License: | MIT |
Preview:

Description:
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