https://github.com/icecreamyou/canvas-sprite-animations

A powerful, easy-to-use Sprite animation library designed for HTML5 Canvas.
https://github.com/icecreamyou/canvas-sprite-animations

animation canvas canvas2d game-library html5-canvas javascript javascript-library sprite sprite-animation-library sprite-sheet spritemap

Last synced: about 2 months ago
JSON representation

A powerful, easy-to-use Sprite animation library designed for HTML5 Canvas.

• Host: GitHub
• URL: https://github.com/icecreamyou/canvas-sprite-animations
• Owner: IceCreamYou
• License: mit
• Created: 2012-09-14T23:55:11.000Z (over 12 years ago)
• Default Branch: gh-pages
• Last Pushed: 2021-07-12T00:56:45.000Z (over 3 years ago)
• Last Synced: 2024-09-18T11:56:56.237Z (3 months ago)
• Topics: animation, canvas, canvas2d, game-library, html5-canvas, javascript, javascript-library, sprite, sprite-animation-library, sprite-sheet, spritemap
• Language: JavaScript
• Homepage: http://icecreamyou.github.com/Canvas-Sprite-Animations/docs/
• Size: 1.52 MB
• Stars: 65
• Watchers: 8
• Forks: 19
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

        
[![npm version](https://badge.fury.io/js/canvas-sprite-animations.svg)](https://badge.fury.io/js/canvas-sprite-animations)

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](https://icecreamyou.github.io/Canvas-Sprite-Animations/docs/)

for a complete explanation of every available method.

Usage

------

Put the script in your HTML document:

```html

```

There are several ways to use sprite.js. At its simplest:

```javascript

// 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](https://icecreamyou.github.io/Canvas-Sprite-Animations/docs/).

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](https://www.isaacsukin.com/) (IceCreamYou).

The centipede-sprite.png image used for the

[demo](https://icecreamyou.github.io/Canvas-Sprite-Animations/) is from Atari.

All resources are MIT licensed: http://opensource.org/licenses/mit-license.php