Sprite.js is a powerful, easy-to-use Sprite animation library for HTML5 Canvas.
Two classes are provided:
- SpriteMap: Manages multiple animation sequences in a sprite sheet.
- Sprite: Handles a single animation sequence.
You can read the full documentation for a complete explanation of every available method.
Usage
Put the script in your HTML document:
There are several ways to use sprite.js. At its simplest:
// Create the sprite.var sprite = 'sprite.png' frameW: 60 frameH: 60 { // Runs when the sprite is ready. // Start animating. sprite; }; // Draw the sprite. You should do this every time you repaint the canvas.// Frames update automatically.// var context = document.getElementById('canvas').getContext('2d');sprite; // x and y position on canvas
There are many more options you can use for finer-grained control, including using multiple animation sequences on one sprite sheet. See index.html for a full example of using a SpriteMap or read the full documentation.
Caching
Sprite images are cached by default. If you would like to use an alternative caching system, you can override several static methods:
- Sprite.preloadImages(files, options): Pre-load images into the cache so you don't have to deal with a delay to load them from disk later.
- Sprite.getImageFromCache(src): Retrieve an image from the cache.
- Sprite.saveImageToCache(src, image): Save a loaded image into the cache.
License/Credits
Created by Isaac Sukin (IceCreamYou).
The centipede-sprite.png image used for the demo is from Atari.
All resources are MIT licensed: http://opensource.org/licenses/mit-license.php