1. INCLUDE JS FILES
<script src='jquery-1.4.2.js' type='text/javascript' />
<script src='spritespin.js' type='text/javascrip' />
2. HTML
<div id='mySpriteSpin'/>
3. JAVASCRIPT
$("#mySpriteSpin").spritespin({
// path to the source images.
source: [
"path/to/frame_001.jpg",
"path/to/frame_002.jpg",
"path/to/frame_003.jpg",
"path/to/frame_004.jpg",
"path/to/frame_005.jpg",
"path/to/frame_006.jpg",
"path/to/frame_007.jpg",
"path/to/frame_008.jpg",
"path/to/frame_009.jpg",
"path/to/frame_010.jpg",
],
width : 480, // width in pixels of the window/frame
height : 327, // height in pixels of the window/frame
});
4. OPTIONS
There are many options that can be used to initialize the plugin. Most of them are described below. However, it is recommended to take a look at the examples where the options are described with more detail.
source : string or array
Sprite source or array of file sources.
width : number
Display width
height : number
Display height
framesX : number
Number of frames in a row in sprite sheet
frames : number
Total number of frames inside the spritesheet or the source array for a single 360 animation.
lanes : number
number of 360 animations. Used for 3D like effect.
module : string
The display module to use. Default is "360"
behavior : string
The input behavior. Default is "drag"
renderer : string
The render method to use. Default is "canvas". May be one of [image|canvas|background]
lane : number
Index of the current animation.
frame : number
The index of the current frame to show (inside current lane).
frameTime : number
Time between updates during animation. Initial is 40 which is 25 frames per second
animate : bool
Starts the animation on startup or reload
reverse : bool
If true animation is played backward
loop : bool
If true animation is looped
stopFrame : number
Stops the animation at this frame if loop is disabled
wrap : bool
Same as "loop" but for user input
wrapLane : bool
Same as "loop" but for user input
sense : number
Mouse sensitivity for frames
senseLane : number
Mouse sensitivity for lanes
orientation : string
Preferred interaction axis
onInit : function
Occurs when plugin has been initialized, but before loading the source files
onProgress : function
Occurs when any source file has been loaded
onLoad : function
Occurs when all source files have been loaded
onFrame : function
Occurs when the frame number has been updated (e.g. during animation)
onDraw : function
Occurs when all update is complete and frame can be drawn
5. EXAMPLES
Sprite Sheets
A sprite sheet contains all the image frames within a single image. The frames must be continuously aligned from left to right in one or multiple rows. The sprite sheet initialization requires two additional parameters. The total number of used frames and the number of frames in one row.
<script type='text/javascript'>
$("#mySpriteSpin").spritespin({
source : "sprites/bike6x6_big.jpg", // path to sprite sheet
width : 480, // width in pixels of the window/frame
height : 327, // height in pixels of the window/frame
frames : 34, // total number of frames
framesX : 6 // number of frames in one row inside the spritesheet
});
</script>
framesX may be omitted and spritespin will try to calculate that number based on the width of the source sheet and the given width. However, this does only work if the frames are tightly packed inside the sheet.
In this example the frames are tightly packed in a 6x6 grid, but the sheet is missing two frames at the end. Thus the frames option is initialized with 34 and not 36.
The panorama view shows a wide shot image that is then scrolled vertically. To create a panorama view, the module option must be set to panorama. The width option specifies the width of the display container, not the width of a frame as seen above.
$("#mySpriteSpin").spritespin({
source : "sprites/panorama/panorama.jpg",
width : 205, // width in pixels of the window
height : 140, // height in pixels of the window
module : "panorama" // rendering implementation to use
});
3D View
You can add several lanes of 360 shots into sprite spin to mimic a 3D like experience.
$('.spritespin').spritespin({
// fill source array using a helper function
source: SpriteSpin.sourceArray('images/3d/sample-{lane}-{frame}.jpg', {
lane: [0,11],
frame: [0,23],
digits: 2
}),
width: 400,
height: 225,
frames: 24,
lanes: 12,
sense: 1,
senseLane: -2,
renderer: 'canvas'
});
JS Tutorial
