State-of-the-art pixel art animation & drawing.

// 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"));

Options for creating a FatPixels object.

  1. scale (Float)

    Scaling factor for the rendered bitmaps. Default is 1.0.

  2. autoplay (Boolean)

    If true, the animation will start immediately after all frames are ready. Default is true.

  3. loop (Boolean)

    If true, the animation will start again over and over and over. Default is true.

  4. speed (String or Number)

    The animation speed. Strings like "69fps", "200ms" or "1s" are totally cool. Numbers will be interpreted as milliseconds. Default is "15fps".

  5. sprite (Dictionary)

    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.

  6. images (Array)

    Instead of sprite you can specify an URL for each frame.

  7. onAnimation (Function)

    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.

Methods

  1. drawWithTarget (DOMElement target)

    Draws inside any element. A <canvas> element will be put inside the target.

  2. drawWithCanvas (DOMElement canvas)

    Draws directly to a <canvas> element on the DOM.

  3. drawWithHandler (Function handler)

    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.

Playback and frames

  1. setAnimating (Boolean animating)

    Resumes or pauses the animation. Access the property with .isAnimating.

  2. setFrame (Integer index)

    Sets the current frame. Access the property with .frame.

  3. play (), pause () and stop ()

    To quickly use instead of setAnimating.

jQuery support

  1. 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'
    	]
    });