Kontra​.animation(​properties)

properties {object}
Properties of the animation.
properties.spriteSheet {kontra.spriteSheet}
The sprite sheet to use for the animation.
properties.frames {number[]}
Sequence of frames to use from the sprite sheet.
properties.frameRate {number}
Number of frames to display per second.
properties.loop {boolean}
If the animation should loop. Defaults to true.

An object for drawing sprite sheet animations.

An animation defines the sequence of frames to use from a sprite sheet. It also defines at what speed the animation should run using frameRate.

Typically you don't create a kontra.animation directly, but instead would create them through kontra.spriteSheet.

Added to the kontra object when kontra.spriteSheet is installed.

let spriteSheet = kontra.spriteSheet({/* ... */});

let animation = kontra.animation({
  spriteSheet: spriteSheet,
  frames: [1,2,3,6],
  frameRate: 30
});

Table of Contents

kontra.animation​.clone()

Clone an animation so it can be used more than once. By default animations passed to kontra.sprite will be cloned so no two sprites update the same animation. Otherwise two sprites who shared the same animation would make it update twice as fast.

kontra.animation​.frameRate

{number}

Number of frames to display per second. Adjusting this value will change the speed of the animation.

kontra.animation​.frames

{number[]}

Sequence of frames to use from the sprite sheet.

kontra.animation​.height

{number}

The height of an individual frame from the sprite sheet.

kontra.animation​.loop

{boolean}

If the animation should loop back to the beginning once completed.

kontra.animation​.margin

{number}

The space between each frame from the sprite sheet.

kontra.animation​.render(properties)

properties {object}
How the animation should be rendered.
properties.x {number}
X coordinate to render the animation.
properties.y {number}
Y coordinate to render the animation.
properties.context {CanvasRenderingContext2D}
Optional. The context the animation should draw to. Defaults kontra.context.

Render the current frame to the x, y position.

kontra.animation​.reset()

Reset the animation back to the beginning.

kontra.animation​.spriteSheet

{kontra.spriteSheet}

The sprite sheet to use for the animation.

kontra.animation​.update(dt)

dt {number}
Optional. Time since last update.

Update the animation.