Sprite.js

See the doc !

javascript, es6-javascript, es6, sprite, spritesheet

Javascript library to manage sprites sheet, sprites, animated sprites and color transparency sprite with ease.

Installation

NPM

npm install @inwebo/sprite.js

Dependencies

• Render.js : Render to canvas utility class, abstract the boring parts. (not required)
• Vector : Vector manipulation needed for RGB representation. (required)

Class

• Sprite.js : Representation of a sprite as ImageData object. May manipulate pixels to apply transparency to one color.
• Rgb.js : Utility class, representation of RGB color.
• AnimatedSprite.js : Sprite collection to animate, may have a duration (ms).
• SpriteMap.js : Utility class, will build animated sprites from a json file map. See as example file.
• RenderSheet.js : Utility class to draw image on canvas.
• RenderSprite.js : Utility class to draw image on canvas, may use Sprite transparency.

Recipe, how to

• Need a sprite sheet as input.
• Need a canvas to draw image.
• Need coordinate and dimensions of each canvas's sprites. Read ImageData with getImageData() at given coordinate.
• May apply transparency to given color of pixel.
• Need to render ImageData from Sprite object on a canvas with putImageData.

Demo

See index.html, demo.js, index.html.