Module gamejs/animate

Provides Animations and SpriteSheets.

Example

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);
....
animation.update(msDuration)
....
display.blit(animation.image);

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.

Parameters

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

Animation.prototype.image

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.

Parameters

String stateName

Animation.prototype.update (msDuration)

Call this function every tick to update the animation.

Parameters

Number msDuration since last tick

Returns

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 *

Parameters

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

Parameters

Number index

Returns

Surface the tile surface