A powerful, easy-to-use Sprite animation library designed for HTML5 Canvas.
Sprite.js is a powerful, easy-to-use Sprite animation library for HTML5 Canvas.
Two classes are provided:
You can read the full documentation for a complete explanation of every available method.
Put the script in your HTML document:
<script src="sprite.min.js"></script>
There are several ways to use sprite.js. At its simplest:
// Create the sprite.
var sprite = new Sprite('sprite.png', {
frameW: 60,
frameH: 60,
postInitCallback: function() { // Runs when the sprite is ready.
// Start animating.
sprite.startLoop();
},
});
// Draw the sprite. You should do this every time you repaint the canvas.
// Frames update automatically.
// var context = document.getElementById('canvas').getContext('2d');
sprite.draw(context, 100, 100); // 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.
Sprite images are cached by default. If you would like to use an alternative caching system, you can override several static methods:
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