Animation(​properties)

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 an Animation directly, but rather you would create them from SpriteSheet by passing the animations argument.

let { SpriteSheet, Animation } = kontra;

let image = new Image();
image.src = 'assets/imgs/character_walk_sheet.png';
image.onload = function() {
  let spriteSheet = SpriteSheet({
    image: image,
    frameWidth: 72,
    frameHeight: 97
  });

  // you typically wouldn't create an Animation this way
  let animation = Animation({
    spriteSheet: spriteSheet,
    frames: [1,2,3,6],
    frameRate: 30
  });
};
import { SpriteSheet, Animation } from 'path/to/kontra.mjs';

let image = new Image();
image.src = 'assets/imgs/character_walk_sheet.png';
image.onload = function() {
  let spriteSheet = SpriteSheet({
    image: image,
    frameWidth: 72,
    frameHeight: 97
  });

  // you typically wouldn't create an Animation this way
  let animation = Animation({
    spriteSheet: spriteSheet,
    frames: [1,2,3,6],
    frameRate: 30
  });
};
import { SpriteSheet, Animation } from 'kontra';

let image = new Image();
image.src = 'assets/imgs/character_walk_sheet.png';
image.onload = function() {
  let spriteSheet = SpriteSheet({
    image: image,
    frameWidth: 72,
    frameHeight: 97
  });

  // you typically wouldn't create an Animation this way
  let animation = Animation({
    spriteSheet: spriteSheet,
    frames: [1,2,3,6],
    frameRate: 30
  });
};

Animation Parameters

properties

Object. Properties of the animation.

properties.spriteSheet

SpriteSheet. Sprite sheet for the animation.

properties.frames

An Array of Numbers. List of frames of the animation.

properties.frameRate

Number. Number of frames to display in one second.

properties.loop Optional

Boolean. If the animation should loop. Defaults to true.

Table of Contents

Animation​.clone(​)

Clone an animation so it can be used more than once. By default animations passed to 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.

clone Return value

A new Animation instance.

Animation​.frameRate

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

Animation​.frames

Sequence of frames to use from the sprite sheet.

Animation​.height

The height of an individual frame. Taken from the property of the same name in the spriteSheet.

Animation​.loop

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

Animation​.margin

The space between each frame. Taken from the property of the same name in the spriteSheet.

Animation​.render(​properties)

Draw the current frame of the animation.

render Parameters

properties

Object. Properties to draw the animation.

properties.x

Number. X position to draw the animation.

properties.y

Number. Y position to draw the animation.

properties.width Optional

Number. width of the sprite. Defaults to Animation.width.

properties.height Optional

Number. height of the sprite. Defaults to Animation.height.

properties.context Optional

Canvas​Rendering​Context2D. The context the animation should draw to. Defaults to core.getContext().

Animation​.reset(​)

Reset an animation to the first frame.

Animation​.spriteSheet

The sprite sheet to use for the animation.

Animation​.update(​[dt])

Update the animation.

update Parameters

dt Optional

Number. Time since last update. Defaults to 1/60.

Animation​.width

The width of an individual frame. Taken from the property of the same name in the spriteSheet.