Helpers

A group of helpful functions that are commonly used for game development. Includes things such as converting between radians and degrees and getting random integers.

let { degToRad } = kontra;

let radians = degToRad(180);  // => 3.14
import { degToRad } from 'path/to/kontra.mjs';

let radians = degToRad(180);  // => 3.14
import { degToRad } from 'kontra';

let radians = degToRad(180);  // => 3.14

Table of Contents

angleToTarget(​source, target)

Return the angle in radians from one point to another point.

let { angleToTarget, Sprite } = kontra;

let sprite = Sprite({
  x: 10,
  y: 10,
  width: 20,
  height: 40,
  color: 'blue'
});

sprite.rotation = angleToTarget(sprite, {x: 100, y: 30});

let sprite2 = Sprite({
  x: 100,
  y: 30,
  width: 20,
  height: 40,
  color: 'red',
});

sprite2.rotation = angleToTarget(sprite2, sprite);
import { angleToTarget, Sprite } from 'path/to/kontra.mjs';

let sprite = Sprite({
  x: 10,
  y: 10,
  width: 20,
  height: 40,
  color: 'blue'
});

sprite.rotation = angleToTarget(sprite, {x: 100, y: 30});

let sprite2 = Sprite({
  x: 100,
  y: 30,
  width: 20,
  height: 40,
  color: 'red',
});

sprite2.rotation = angleToTarget(sprite2, sprite);
import { angleToTarget, Sprite } from 'kontra';

let sprite = Sprite({
  x: 10,
  y: 10,
  width: 20,
  height: 40,
  color: 'blue'
});

sprite.rotation = angleToTarget(sprite, {x: 100, y: 30});

let sprite2 = Sprite({
  x: 100,
  y: 30,
  width: 20,
  height: 40,
  color: 'red',
});

sprite2.rotation = angleToTarget(sprite2, sprite);

angleToTarget Parameters

source

Object. The source point.

target

Object. The target point.

angleToTarget Return value

Number. Angle (in radians) from the source point to the target point.

clamp(​min, max, value)

Clamp a number between two values, preventing it from going below or above the minimum and maximum values.

clamp Parameters

min

Number. Min value.

max

Number. Max value.

value

Number. Value to clamp.

clamp Return value

Number. Value clamped between min and max.

collides(​obj1, obj2)

Check if a two objects collide. Uses a simple Axis-Aligned Bounding Box (AABB) collision check. Takes into account the sprites anchor and scale.

NOTE: Does not take into account object rotation. If you need collision detection between rotated objects you will need to implement your own collides() function. I suggest looking at the Separate Axis Theorem.

let { Sprite, collides } = kontra;

let sprite = Sprite({
  x: 100,
  y: 200,
  width: 20,
  height: 40
});

let sprite2 = Sprite({
  x: 150,
  y: 200,
  width: 20,
  height: 20
});

collides(sprite, sprite2);  //=> false

sprite2.x = 115;

collides(sprite, sprite2);  //=> true
import { Sprite, collides } from 'path/to/kontra.mjs';

let sprite = Sprite({
  x: 100,
  y: 200,
  width: 20,
  height: 40
});

let sprite2 = Sprite({
  x: 150,
  y: 200,
  width: 20,
  height: 20
});

collides(sprite, sprite2);  //=> false

sprite2.x = 115;

collides(sprite, sprite2);  //=> true
import { Sprite, collides } from 'kontra';

let sprite = Sprite({
  x: 100,
  y: 200,
  width: 20,
  height: 40
});

let sprite2 = Sprite({
  x: 150,
  y: 200,
  width: 20,
  height: 20
});

collides(sprite, sprite2);  //=> false

sprite2.x = 115;

collides(sprite, sprite2);  //=> true

collides Parameters

obj1

Object or {world: {x: number, y: number, width: number, height: number}}. Object reference.

obj2

Object or {world: {x: number, y: number, width: number, height: number}}. Object to check collision against.

collides Return value

Boolean or null. true if the objects collide, false otherwise. Will return null if the either of the two objects are rotated.

degToRad(​deg)

Convert degrees to radians.

degToRad Parameters

deg

Number. Degrees to convert.

degToRad Return value

Number. The value in radians.

getStoreItem(​key)

Retrieve an item from localStorage and convert it back to its original type.

Normally when you save a value to LocalStorage it converts it into a string. So if you were to save a number, it would be saved as "12" instead of 12. This function enables the value to be returned as 12.

getStoreItem Parameters

key

String. Name of the key of the item to retrieve.

getStoreItem Return value

Any type. The retrieved item.

getWorldRect(​obj)

Return the world rect of an object. The rect is the world position of the top-left corner of the object and its size. Takes into account the objects anchor and scale.

getWorldRect Parameters

obj

Object or {world: {x: number, y: number, width: number, height: number}} or {mapwidth: number, mapheight: number}. Object to get world rect of.

getWorldRect Return value

Object. The world x, y, width, and height of the object.

inverseLerp(​start, end, value)

Return the linear interpolation percent between two values. The function calculates the percent between two values of a given value.

let { inverseLerp } = kontra;

console.log( inverseLerp(10, 20, 15) );  // => 0.5
console.log( inverseLerp(10, 20, 30) );  // => 2
import { inverseLerp } from 'path/to/kontra.mjs';

console.log( inverseLerp(10, 20, 15) );  // => 0.5
console.log( inverseLerp(10, 20, 30) );  // => 2
import { inverseLerp } from 'kontra';

console.log( inverseLerp(10, 20, 15) );  // => 0.5
console.log( inverseLerp(10, 20, 30) );  // => 2

inverseLerp Parameters

start

Number. Start value.

end

Number. End value.

value

Number. Value between start and end.

inverseLerp Return value

Number. Percent difference between the start and end values.

lerp(​start, end, percent)

Linearly interpolate between two values. The function calculates the number between two values based on a percent. Great for smooth transitions.

let { lerp } = kontra;

console.log( lerp(10, 20, 0.5) );  // => 15
console.log( lerp(10, 20, 2) );  // => 30
import { lerp } from 'path/to/kontra.mjs';

console.log( lerp(10, 20, 0.5) );  // => 15
console.log( lerp(10, 20, 2) );  // => 30
import { lerp } from 'kontra';

console.log( lerp(10, 20, 0.5) );  // => 15
console.log( lerp(10, 20, 2) );  // => 30

lerp Parameters

start

Number. Start value.

end

Number. End value.

percent

Number. Percent to interpolate.

lerp Return value

Number. Interpolated number between the start and end values

radToDeg(​rad)

Convert radians to degrees.

radToDeg Parameters

rad

Number. Radians to convert.

radToDeg Return value

Number. The value in degrees.

randInt(​min, max)

Return a random integer between a minimum (inclusive) and maximum (inclusive) integer.

randInt Parameters

min

Number. Min integer.

max

Number. Max integer.

randInt Return value

Number. Random integer between min and max values.

rotatePoint(​point, angle)

Rotate a point by an angle.

rotatePoint Parameters

point

Object. The point to rotate.

angle

Number. Angle (in radians) to rotate.

rotatePoint Return value

Object. The new x and y coordinates after rotation.

seedRand(​str)

Create a seeded random number generator.

let { seedRand } = kontra;

let rand = seedRand('kontra');
console.log(rand());  // => always 0.33761959057301283
import { seedRand } from 'path/to/kontra.mjs';

let rand = seedRand('kontra');
console.log(rand());  // => always 0.33761959057301283
import { seedRand } from 'kontra';

let rand = seedRand('kontra');
console.log(rand());  // => always 0.33761959057301283

seedRand Parameters

str

String. String to seed the random number generator.

seedRand Return value

Function. Seeded random number generator function.

setStoreItem(​key, value)

Save an item to localStorage. A value of undefined will remove the item from localStorage.

setStoreItem Parameters

key

String. The name of the key.

value

Any type. The value to store.