Kontra​.spriteSheet(​properties)

properties {object}
Properties of the animation.
properties.image {HTMLImageElement | HTMLCanvasElement}
The sprite sheet image.
properties.frameWidth {number}
The width of a single frame.
properties.frameHeight {number}
The height of a single frame.
properties.frameMargin {number}
Optional. The amount of whitespace between each frame. Defaults to 0.
properties.animations {object}
kontra.animations to create from the sprite sheet. Passed directly into the sprite sheets createAnimations(animations) function.

A sprite sheet to animate a sequence of images.

11 frames of a walking teal pill-like person wearing a space helmet.
Sprite sheet image courtesy of Kenney.

Typically you create a sprite sheet just to create animations and then use the animations for your sprite.

let image = new Image();
image.src = '../imgs/character_walk_sheet.png';

let spriteSheet = kontra.spriteSheet({
  image: image,
  frameWidth: 72,
  frameHeight: 97,
  animations: {
    // create a named animation: walk
    walk: {
      frames: '0..9',  // frames 0 through 9
      frameRate: 30
    }
  }
});

let sprite = kontra.sprite({
  x: 200,
  y: 100,

  // use the sprite sheet animations for the sprite
  animations: spriteSheet.animations
});

Table of Contents

kontra.spriteSheet​.animations

{object}

An object of named kontra.animation objects. Typically you pass this object into kontra.sprite to create an animation sprite.

kontra.spriteSheet​.createAnimations(animations)

animations {object}
Object of named animations to create from the sprite sheet.
animations.<name>.frames {number | number[] | string}
The sequence of frames to use from the sprite sheet. It can either be a single frame (number), a sequence of frames (number[]), or a consecutive frame notation ('1..4'). Sprite sheet frames are 0 indexed.
animations.<name>.frameRate {object}
The number frames to display per second.
animations.<name>.loop {boolean}
Optional. If the animation should loop back to the beginning once completed. Defaults to true.

Create animations from the sprite sheet. Called from kontra.spriteSheet automatically if the animations property is passed in.

This function populates the sprite sheets animations object with kontra.animation objects. Each animation is accessible by their name.

let image = new Image(); image.src = '../imgs/character_walk_sheet.png'; image.onload = function() { let spriteSheet = kontra.spriteSheet({ image: image, frameWidth: 72, frameHeight: 97, // this will also call createAnimations() animations: { // create 1 animation: idle idle: { frames: 1 // single frame } } }); spriteSheet.createAnimations({ // create 4 animations: jump, walk, moonWalk, attack jump: { frames: [1, 10, 1], // sequence of frames (can be non-consecutive) frameRate: 10, loop: false, // don't loop the animation }, walk: { frames: '2..6', // ascending consecutive frame animation (frames 2-6, inclusive) frameRate: 20 }, moonWalk: { frames: '6..2', // descending consecutive frame animation frameRate: 20 }, attack: { frames: ['8..10', 13, '10..8'], // you can also mix and match, in this case frames [8,9,10,13,10,9,8] frameRate: 10, loop: false, // don't loop the animation } }); // update and render the walk animation every frame let loop = kontra.gameLoop({ update: function() { spriteSheet.animations.walk.update(); }, render: function() { spriteSheet.animations.walk.render({x: 267, y: 54,}); } }); loop.start(); };

kontra.spriteSheet​.frame

{object}

An object that defines properties of a single frame in the sprite sheet. It has properties of width, height, and margin.

width and height define the width of a single frame, while margin defines the amount of whitespace between each frame.

kontra.spriteSheet​.image

{HTMLImageElement | HTMLCanvasElement}

The sprite sheet image.