Module gamejs/animate

Provides Animations and SpriteSheets.


var spriteSheet = new SpriteSheet(sheetSurface, {width: 16, height: 16});
var animationSpec = {
   walk: {
     frames: [0,1,2,3],
     loop: true,
     rate: 20 // framerate per second
var animation = new Animation(spriteSheet, 'walk', animationSpec);

Class Animation

Instance Methods

Instance Properties

Class SpriteSheet

Instance Methods

Animation (spriteSheet, initialState, animationSpecification)

An Animation is a gamejs.animate.SpriteSheet with an animation specification which explains what states the animation has and which tiles in the SpriteSheet compose those states.

An animation specification might look like this:
  var npcAnimationSpec = {
      idle: {frames: [0], rate: 5, loop: true},
      moveup: {frames: [0,1,2,3,4,5,6,7,8], rate: rate, loop: true},
      die: {frames: [18,19,20,21,22,23,24,25,26], rate: rate, loop: true},

The keys in the npcAnimationSpec are the animation state names and each object is describing on such state: frames are the index positions of the tiles in the SpriteSheet making up that state. rate is the frequence per second at which the state should switch from tile to tile of the state and loop designates whether the state shold end or loop endlessly.


gamejs.animate.SpriteSheet spriteSheet
String initialState name of the initital state
Object animationSpecification


The current tile surface of the animation. Draw this to the screen. *

Animation.prototype.isFinished ()

Whether the animation has ended. Looping animations never end.

Animation.prototype.setState (stateName)

Set the animation to the given state.


String stateName

Animation.prototype.update (msDuration)

Call this function every tick to update the animation.


Number msDuration since last tick


Boolean whether animation image has changed during this update

SpriteSheet (image, options)

Turn a Surface into a SpriteSheet. This makes individual images ("tiles") within the larger Surface retrievable with the SpriteSheet's get(indexPositon) method.

Available option properties are (width and height are required):

  • width individual tile, number
  • height of individual tile, number
  • spacing between two tiles, number
  • margin at the image border without tiles, number
  • scaleTo [width,height] scale tiles to this size after loading *


Surface image containing the individual tiles
Object options describing the tile dimensions, size, spacing, etc. (see above)

SpriteSheet.prototype.get (index)

Retrieve the tile at given index position. The index position can be calculated as: index = column + row * rowLength


Number index


Surface the tile surface