Phantascope

A jQuery plugin for animating sprites.

Example

The example below uses this sprite sheet for the character's animation.
Use your arrow keys to interact with the character.

Usage

1) Phantascope has only dependancy; jQuery. You can download your own copy of jQuery at http://jquery.com or link to the Google hosted script:

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>

2) Download and include Phantascope in your document as well:

<script src="jquery.phantascope.js"></script>

3) Call the Phantascope function in your document ready function, parsing in the required options for your animation

$(document).ready(function() {
  $('.sprite').phantascope({
    optionName: value
  });
});

4) Enjoy super sweet frame based animations on you webpage!

Options

Option	Type	Default	Description
fps	Int	24	The number of frames per second the animation should run at.
layout	Array	[6]	An array containing the number of frames on each row of the sprite. The default describes a sprite containing one row of six frames.
animationPoints	Array	[ [1,1], [1,6] ]	The points through which the animation will play. Each point is an array, the first value refering to the column, the second to the row. This default value will play from the first frame to last frame (based upon the default layout of six frames on one row). You can use as many points as you want, and the animation can play either forward or backwards. For example. to update the current animation to reverse and play back to the start you would parse these settings: [[1,1], [1,6], [1,1]].
loop	Int/String	1	Number of times the animation should loop. For an infinite loop use the string "*".
autoStart	Boolean	true	Whether to play the animation upon initialisation.
resetAtEnd	Boolean	false	When complete reset the sprite to the starting frame.
onComplete	Function	null	Callback fired when the animation is complete.

Methods

Method can be called using the following syntax: $('.sprite').spritely("methodName", params). An example of this would be: $('.sprite').spritely("play", {fps: 30, animationPoints: [[6,1],[1,1]]});

Method	Parameters	Description
play	options (object)	Start playing the animation from it's current point. You can also update any of the settings of that animation with the options above.
update	options (object)	Update any of the settings of that animation with the options above.
gotoFrame	point (array)	Move to the specified frame
pause	none	Pause the animation
stop	none	Stop the animation
destroy	none	Remove all plugin functionality from the element

Bugs

This project is still in beta so please inform me of any bugs you find here: barneyfoxuk@gmail.com

I hope you enjoy using this plugin!