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
- isFinished()
- setState(stateName)
- update(msDuration)
Instance Properties
Class SpriteSheet
Instance Methods
- get(index)
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, numberheight
of individual tile, numberspacing
between two tiles, numbermargin
at the image border without tiles, numberscaleTo
[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 |