sprite-anim is a simple spritesheet animation engine.
npm install sprite-anim --save
IE 6+ with DOM element, IE 9+ with DOM and canvas element. If you need to support IE 8- use es5-shim for EcmaScript 5 methods compatibility.
var SpriteAnim = require('sprite-anim');
require(['sprite-anim.js'], function(SpriteAnim){
});
<script src="path/to/file/sprite-anim.js"></script>
<script>
// global variable SpriteAnim
</script>
var element = document.getElementById('anim');
var renderer = new SpriteAnim.DOMRenderer(element);
var parser = new SpriteAnim.SimpleParser({width: 1410, height: 3960}, {width: 470, height: 120});
var anim = new SpriteAnim(parser, renderer, {frameRate: 25});
anim.play();
var img = new Image();
img.addEventListener('load', function(){
var element = document.getElementById('anim');
var renderer = new SpriteAnim.CanvasRenderer(element, img);
var parser = new SpriteAnim.JSONArrayParser(framesData); // framesData is your JSON data
var anim = new SpriteAnim(parser, renderer, {frameRate: 25});
anim.play();
});
img.src = 'images/anim.png';// your spritesheet image
Initialize frames directly with spritesheet image dimensions and frame dimensions.
sprite
: Object
{width: Number, height: Number}
|| HTMLImageElement
(loaded image) || Array
Objects with width/height values or loaded imagesframeSize
: Object
{width: Number, height: Number}
Initialize frames with an Array
of frames data, following the TexturePacker JSONArray output.
data
: Object
scaleFactor
(optional): Number
You can implement your own parser.
A parser must have these properties :
numFrames
: number of framesframes
: an array of frames {x, y, index, width, height}
var CustomParser = function(framesData){
this.numFrames = 0;
this.frames = [];
// populate frames and increment numFrames
};
Render frame with a DOM element (background-position
).
element
: DOM elementoptions
(optional): Object
scaleFactor
: Number
sprite
: HTMLImageElement
loaded image || Array
loaded images (multiple spritesheets).Render frame with a canvas
element (drawImage
).
canvas
: canvas elementsprite
: HTMLImageElement
loaded spritesheet image || || Array
loaded spritesheet images (multiple spritesheets)options
(Object
):
clearFrame
(Boolean
): clear frame on renderYou can implement your own renderer.
A renderer must have a render
method with a parameter frame
.
There is an optionnal parameter animation
which is the SpriteAnim
instance.
The frame
param is an object
with properties {x, y, index, width, height}
.
var CustomRenderer = function(){
};
CustomRenderer.prototype.render = function(frame, animation){
// draw the frame
};
new SpriteAnim(parser, renderer, options)
options
(Object
)frameRate
(Number
)60
)loop
(Boolean
)true
loop animation (default: false
)yoyo
(Boolean
)true
repeat from end when looping (default: false
)numFrames
(Boolean
)manualUpdate
(Boolean
)true
the animation will not update itself. (default: false
)onEnterFrame()
call on a custom render loop.x
(Number
)Horizontal position from the top left corner of the container. (default: 0)
y
(Number
)Vertical position from the top left corner of the container. (default: 0)
alpha
(Number
)Alpha value of the animation. A value between 0 and 1. Currently only supported on canvas mode. (default: 1)
loop
(Boolean
)If true
loop animation (default: false
)
yoyo
(Boolean
)If true
repeat from end when looping (default: false
)
frameRate
(Number
)Animation frame rate
numFrames
(Number
)Total frames
currentFrame
(Number
)Current frame index
isPlaying
(Boolean
)true
if the animation is playing
reversed
(Boolean
)true
if the animation is playing reversed
complete
(Boolean
)true
if the animation is complete
play()
Play animation
pause()
Pause animation
stop()
Pause and reset animation (frame index = 0)
gotoAndPlay(frameIndex)
Go to a frame index and play animation
gotoAndStop(frameIndex)
Go to a frame index and pause animation
onEnterFrame(timeStamp)
Called internally each frame.
If you add the manualUpdate
option and call this method directly in a external render loop you have to pass a timeStamp
argument (from the requestAnimationFrame callback).
renderFrame()
Render the current frame
dispose()
Dispose SpriteAnim instance
complete
Dispatched when animation ended
enterFrame
Dispatched on each frame