// Draw your art at any scale. The animation is for free.
var donkeyKong = new FatPixels({
scale : 4.0,
speed : "16fps",
sprite : {
url : 'DonkeyKong.png',
direction: 'y',
count : 187,
}
});
// jQuery is also supported, see below.
donkeyKong.drawWithTarget(document.getElementById("donkey"));
Scaling factor for the rendered bitmaps. Default is 1.0.
If true, the animation will start immediately after all frames are ready. Default is true.
If true, the animation will start again over and over and over. Default is true.
The animation speed. Strings like "69fps", "200ms" or "1s" are totally cool. Numbers will be interpreted as milliseconds. Default is "15fps".
Include a value for url with the location of your sprite image, the direction of the sprite as "x" or "y", and the count of frames. See the code for Donkey Kong above and the sprite image here.
Instead of sprite you can specify an URL for each frame.
A callback run every time a frame is animated. Handy, for example, when is needed to pause at a certain frame on the middle of the animation. The frame index is also passed to the function.
Draws inside any element. A <canvas> element will be put inside the target.
Draws directly to a <canvas> element on the DOM.
Advanced! Use this in the very special case you need to do custom drawing. For example, drawing multiple sprites on a single canvas. The animation is handled for you.
myFatPixelsObject.drawWithHandler(function(fatFrame, idx){
// Do your custom drawing.
});
See the source code for reference on the FatFrame object.
Resumes or pauses the animation. Access the property with .isAnimating.
Sets the current frame. Access the property with .frame.
To quickly use instead of setAnimating.
jQuery is supported but not required. A FatPixels object is returned (breaking the chain, sorry) and the drawing method is called on the matched elements for you.
$('figure.huge').FatPixels({
scale : 5,
images : [
'Marco-1.png',
'Marco-2.png',
'Marco-3.png'
]
});