xtras/sprite-sheet/sprite.js
/**
 * @constructor
 * @param {Image} spritesheet A sprite sheet is divided into cells and grouped into animation sequences.
 *                            This example assumes an even distribution and positioning within a rectangle.
 * @param {number} columns    Amount of sample images in the animation sequence.
 * @param {number} rows       Amount of different animation sequences on a single sprite sheet.
 */
@constructor
@param {Image} spritesheet A sprite sheet is divided into cells and grouped into animation sequences.
This example assumes an even distribution and positioning within a rectangle.
@param {number} columns    Amount of sample images in the animation sequence.
@param {number} rows       Amount of different animation sequences on a single sprite sheet.
@constructor @param { Image } spritesheet A sprite sheet is divided into cells and grouped into animation sequences . This example assumes an even distribution and positioning within a rectangle . @param { number } columns Amount of sample images in the animation sequence . @param { number } rows Amount of different animation sequences on a single sprite sheet .
function Sprite (spritesheet, columns, rows) {
  this.spritesheet = spritesheet;
  this.x = 0;
  this.y = 0;
  this.width = spritesheet.width / columns;
  this.height = spritesheet.height / rows;
  this.rotation = 0;
  this.scaleX = 1;
  this.scaleY = 1;
  this.offsetX = 0;
  this.offsetY = 0;
  this.isPlaying = false;
  this.counter = 0;                     
  this.sampleRate = 5;                  
  this.sampleChange = this.sampleRate;  
  this.sampleEnd = this.sampleRate * columns; 
}
function Sprite ( spritesheet , columns , rows ) { this . spritesheet = spritesheet ; this . x = 0 ; this . y = 0 ; this . width = spritesheet . width / columns ; this . height = spritesheet . height / rows ; this . rotation = 0 ; this . scaleX = 1 ; this . scaleY = 1 ; this . offsetX = 0 ; this . offsetY = 0 ; this . isPlaying = false ; this . counter = 0 ; this . sampleRate = 5 ; this . sampleChange = this . sampleRate ; this . sampleEnd = this . sampleRate * columns ; }
@constructor
 @param {Image} spritesheet A sprite sheet is divided into cells and grouped into animation sequences.
@constructor @param { Image } spritesheet A sprite sheet is divided into cells and grouped into animation sequences .
//determine the size of a single image cell //position on the sprite sheet to start drawing from //these account for the player timeline of an animation sequence //Updated every frame that a sequence is being played. From 0 to this.sampleEnd. //The amount of frames to play each sample cell before transitioning to the next. The higher the number, the slower the walk cycle. //The next change point on the timeline that will cause a sample transition. //The end of the timeline.