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.


Panorama View

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

More Examples

How to add a slider

How to show details for specific frames

How to use the API object