Skip navigation

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 a 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
  });
};

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.

properties.name Optional

String. The name of the animation.

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.

Return value

Animation. A new Animation instance.

Animation​.frameRate

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

Animation​.frames

An Array of Numbers. Sequence of frames to use from the sprite sheet.

Animation​.height

Number. The height of an individual frame. Taken from the frame height value of the sprite sheet.

Animation​.isStopped

Boolean. If the animation is currently stopped. Stopped animations will not update when the update() function is called.

Animations are not considered stopped until either the stop() function is called or the animation gets to the last frame and does not loop.

let { Animation } = kontra;

let animation = Animation({
  // ...
});
console.log(animation.isStopped);  //=> false

animation.start();
console.log(animation.isStopped);  //=> false

animation.stop();
console.log(animation.isStopped);  //=> true

import { Animation } from 'path/to/kontra.mjs';

let animation = Animation({
  // ...
});
console.log(animation.isStopped);  //=> false

animation.start();
console.log(animation.isStopped);  //=> false

animation.stop();
console.log(animation.isStopped);  //=> true

import { Animation } from 'kontra';

let animation = Animation({
  // ...
});
console.log(animation.isStopped);  //=> false

animation.start();
console.log(animation.isStopped);  //=> false

animation.stop();
console.log(animation.isStopped);  //=> true

Animation​.loop

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

Animation​.margin

Number. The border space around the sprite sheet image. Taken from the frame margin value of the sprite sheet.

Animation​.name

String. The name of the animation.

Animation​.render(​properties)

Draw the current frame of the animation.

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

CanvasRenderingContext2D. The context the animation should draw to. Defaults to core.getContext().

Animation​.reset(​)

Reset an animation to the first frame.

Animation​.spacing

Number. The space between each frame. Taken from the frame spacing value of the sprite sheet.

Animation​.spriteSheet

SpriteSheet. The sprite sheet to use for the animation.

Animation​.start(​)

Start the animation.

Animation​.stop(​)

Stop the animation.

Animation​.update(​[dt])

Update the animation.

Parameters

dt Optional

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

Animation​.width

Number. The width of an individual frame. Taken from the frame width value of the sprite sheet.