GameObject([properties], ...properties.props)

The base class of most renderable classes. Handles things such as position, rotation, anchor, and the update and render life cycle.

Typically you don't create a GameObject directly, but rather extend it for new classes.

GameObject Parameters

properties Optional: Object. Properties of the game object.
properties.x Optional: Number. X coordinate of the position vector.
properties.y Optional: Number. Y coordinate of the position vector.
properties.width Optional: Number. Width of the game object.
properties.height Optional: Number. Height of the game object.
properties.radius Optional: Number. Radius of the game object. Note: radius is mutually exclusive with width and height as the GameObject will always use radius over width and height for any logic.
properties.context Optional: CanvasRenderingContext2D. The context the game object should draw to. Defaults to core.getContext().
properties.dx Optional: Number. X coordinate of the velocity vector.
properties.dy Optional: Number. Y coordinate of the velocity vector.
properties.ddx Optional: Number. X coordinate of the acceleration vector.
properties.ddy Optional: Number. Y coordinate of the acceleration vector.
properties.ttl Optional: Number. How many frames the game object should be alive. Used by Pool. Defaults to Infinity.
properties.anchor Optional: Object. The x and y origin of the game object. {x:0, y:0} is the top left corner of the game object, {x:1, y:1} is the bottom right corner. Defaults to {x:0,y:0}.
properties.children Optional: An Array of GameObjects. Children to add to the game object.
properties.opacity Optional: Number. The opacity of the game object. Defaults to 1.
properties.rotation Optional: Number. The rotation around the anchor in radians. Defaults to 0.
properties.drotation Optional: Number. The angular velocity of the rotation in radians. Defaults to 0.
properties.ddrotation Optional: Number. The angular acceleration of the rotation in radians. Defaults to 0.
properties.scaleX Optional: Number. The x scale of the game object. Defaults to 1.
properties.scaleY Optional: Number. The y scale of the game object. Defaults to 1.
properties.update Optional: Function. Function called every frame to update the game object.
properties.render Optional: Function. Function called every frame to render the game object.
...properties.props: A list of any type. Any additional properties you need added to the game object. For example, if you pass gameObject({type: 'player'}) then the game object will also have a property of the same name and value. You can pass as many additional properties as you want.

Extending A GameObject

A GameObject is just a base class and typically isn't used directly. Instead, it's main purpose is to be extended by other classes, such as Sprite.

To extend the GameObject class, import the underlying class as import { GameObjectClass }.

You should also override the draw() function instead of the render() function in your class. The draw() function determines how to draw the GameObject. It is called by the render function after transforms and rotations have been applied.

Do note that the canvas has been rotated and translated to the objects position (taking into account anchor), so {0,0} will be the top-left corner of the game object when drawing.

let { GameObjectClass } = kontra

class Triangle extends GameObjectClass {
  constructor(properties) {
    super(properties);
  }

  draw() {
    this.context.fillStyle = this.color;
    this.context.beginPath();
    this.context.moveTo(0, 0);
    this.context.lineTo(this.width, 0);
    this.context.lineTo(this.width / 2, this.height);
    this.context.fill();
  }
}

let triangle = new Triangle({
  x: 300,
  y: 100,
  width: 30,
  height: 40,
  anchor: {x: 0.5, y: 0.5},
  color: 'red'
});
triangle.render();

import { GameObjectClass } from 'path/to/kontra.mjs'

class Triangle extends GameObjectClass {
  constructor(properties) {
    super(properties);
  }

  draw() {
    this.context.fillStyle = this.color;
    this.context.beginPath();
    this.context.moveTo(0, 0);
    this.context.lineTo(this.width, 0);
    this.context.lineTo(this.width / 2, this.height);
    this.context.fill();
  }
}

let triangle = new Triangle({
  x: 300,
  y: 100,
  width: 30,
  height: 40,
  anchor: {x: 0.5, y: 0.5},
  color: 'red'
});
triangle.render();

import { GameObjectClass } from 'kontra';

class Triangle extends GameObjectClass {
  constructor(properties) {
    super(properties);
  }

  draw() {
    this.context.fillStyle = this.color;
    this.context.beginPath();
    this.context.moveTo(0, 0);
    this.context.lineTo(this.width, 0);
    this.context.lineTo(this.width / 2, this.height);
    this.context.fill();
  }
}

let triangle = new Triangle({
  x: 300,
  y: 100,
  width: 30,
  height: 40,
  anchor: {x: 0.5, y: 0.5},
  color: 'red'
});
triangle.render();

GameObject.acceleration

Vector. The game objects acceleration vector.

GameObject.addChild(...objects)

Add an object as a child to this object. The objects position, size, and rotation will be relative to the parents position, size, and rotation. The childs world property will be updated to take into account this object and all of its parents.

let { GameObject } = kontra

function createObject(x, y, color, size = 1) {
  return GameObject({
    x,
    y,
    width: 50 / size,
    height: 50 / size,
    anchor: {x: 0.5, y: 0.5},
    color,
    render: function() {
      this.context.fillStyle = this.color;
      this.context.fillRect(0, 0, this.height, this.width);
    }
  });
}

let parent = createObject(300, 100, 'red');

// create a child that is 25px to the right and
// down from the parents position
let child = createObject(25, 25, 'yellow', 2);

parent.addChild(child);

parent.render();

import { GameObject } from 'path/to/kontra.mjs'

function createObject(x, y, color, size = 1) {
  return GameObject({
    x,
    y,
    width: 50 / size,
    height: 50 / size,
    anchor: {x: 0.5, y: 0.5},
    color,
    render: function() {
      this.context.fillStyle = this.color;
      this.context.fillRect(0, 0, this.height, this.width);
    }
  });
}

let parent = createObject(300, 100, 'red');

// create a child that is 25px to the right and
// down from the parents position
let child = createObject(25, 25, 'yellow', 2);

parent.addChild(child);

parent.render();

import { GameObject } from 'kontra';

function createObject(x, y, color, size = 1) {
  return GameObject({
    x,
    y,
    width: 50 / size,
    height: 50 / size,
    anchor: {x: 0.5, y: 0.5},
    color,
    render: function() {
      this.context.fillStyle = this.color;
      this.context.fillRect(0, 0, this.height, this.width);
    }
  });
}

let parent = createObject(300, 100, 'red');

// create a child that is 25px to the right and
// down from the parents position
let child = createObject(25, 25, 'yellow', 2);

parent.addChild(child);

parent.render();

addChild Parameters

...objects: A list of (GameObject or Array of GameObjects). Object to add as a child. Can be a single object, an array of objects, or a comma-separated list of objects.

GameObject.advance([dt])

Move the game object by its acceleration and velocity. If you pass dt it will multiply the vector and acceleration by that number. This means the dx, dy, ddx and ddy should be how far you want the object to move in 1 second rather than in 1 frame.

If you override the game objects update() function with your own update function, you can call this function to move the game object normally.

let { GameObject } = kontra;

let gameObject = GameObject({
  x: 100,
  y: 200,
  width: 20,
  height: 40,
  dx: 5,
  dy: 2,
  update: function() {
    // move the game object normally
    this.advance();

    // change the velocity at the edges of the canvas
    if (this.x < 0 ||
        this.x + this.width > this.context.canvas.width) {
      this.dx = -this.dx;
    }
    if (this.y < 0 ||
        this.y + this.height > this.context.canvas.height) {
      this.dy = -this.dy;
    }
  }
});

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

let gameObject = GameObject({
  x: 100,
  y: 200,
  width: 20,
  height: 40,
  dx: 5,
  dy: 2,
  update: function() {
    // move the game object normally
    this.advance();

    // change the velocity at the edges of the canvas
    if (this.x < 0 ||
        this.x + this.width > this.context.canvas.width) {
      this.dx = -this.dx;
    }
    if (this.y < 0 ||
        this.y + this.height > this.context.canvas.height) {
      this.dy = -this.dy;
    }
  }
});

import { GameObject } from 'kontra';

let gameObject = GameObject({
  x: 100,
  y: 200,
  width: 20,
  height: 40,
  dx: 5,
  dy: 2,
  update: function() {
    // move the game object normally
    this.advance();

    // change the velocity at the edges of the canvas
    if (this.x < 0 ||
        this.x + this.width > this.context.canvas.width) {
      this.dx = -this.dx;
    }
    if (this.y < 0 ||
        this.y + this.height > this.context.canvas.height) {
      this.dy = -this.dy;
    }
  }
});

advance Parameters

dt Optional: Number. Time since last update.

GameObject.anchor

Object. The x and y origin of the game object. {x:0, y:0} is the top left corner of the game object, {x:1, y:1} is the bottom right corner.

let { GameObject } = kontra

let gameObject = GameObject({
  x: 150,
  y: 100,
  width: 50,
  height: 50,
  color: 'red',
  render: function() {
    this.context.fillStyle = this.color;
    this.context.fillRect(0, 0, this.height, this.width);
  }
});

function drawOrigin(gameObject) {
  gameObject.context.fillStyle = 'yellow';
  gameObject.context.beginPath();
  gameObject.context.arc(gameObject.x, gameObject.y, 3, 0, 2*Math.PI);
  gameObject.context.fill();
}

gameObject.render();
drawOrigin(gameObject);

gameObject.anchor = {x: 0.5, y: 0.5};
gameObject.x = 300;
gameObject.render();
drawOrigin(gameObject);

gameObject.anchor = {x: 1, y: 1};
gameObject.x = 450;
gameObject.render();
drawOrigin(gameObject);

import { GameObject } from 'path/to/kontra.mjs'

let gameObject = GameObject({
  x: 150,
  y: 100,
  width: 50,
  height: 50,
  color: 'red',
  render: function() {
    this.context.fillStyle = this.color;
    this.context.fillRect(0, 0, this.height, this.width);
  }
});

function drawOrigin(gameObject) {
  gameObject.context.fillStyle = 'yellow';
  gameObject.context.beginPath();
  gameObject.context.arc(gameObject.x, gameObject.y, 3, 0, 2*Math.PI);
  gameObject.context.fill();
}

gameObject.render();
drawOrigin(gameObject);

gameObject.anchor = {x: 0.5, y: 0.5};
gameObject.x = 300;
gameObject.render();
drawOrigin(gameObject);

gameObject.anchor = {x: 1, y: 1};
gameObject.x = 450;
gameObject.render();
drawOrigin(gameObject);

import { GameObject } from 'kontra';

let gameObject = GameObject({
  x: 150,
  y: 100,
  width: 50,
  height: 50,
  color: 'red',
  render: function() {
    this.context.fillStyle = this.color;
    this.context.fillRect(0, 0, this.height, this.width);
  }
});

function drawOrigin(gameObject) {
  gameObject.context.fillStyle = 'yellow';
  gameObject.context.beginPath();
  gameObject.context.arc(gameObject.x, gameObject.y, 3, 0, 2*Math.PI);
  gameObject.context.fill();
}

gameObject.render();
drawOrigin(gameObject);

gameObject.anchor = {x: 0.5, y: 0.5};
gameObject.x = 300;
gameObject.render();
drawOrigin(gameObject);

gameObject.anchor = {x: 1, y: 1};
gameObject.x = 450;
gameObject.render();
drawOrigin(gameObject);

GameObject.children

An Array of GameObjects. The game objects children objects.

GameObject.context

CanvasRenderingContext2D. The context the game object will draw to.

GameObject.ddrotation

Number. Angular acceleration of the rotation in radians.

GameObject.ddx

Number. X coordinate of the acceleration vector.

GameObject.ddy

Number. Y coordinate of the acceleration vector.

GameObject.draw()

Draw the game object at its X and Y position, taking into account rotation, scale, and anchor.

Do note that the canvas has been rotated and translated to the objects position (taking into account anchor), so {0,0} will be the top-left corner of the game object when drawing.

If you override the game objects render() function with your own render function, you can call this function to draw the game object normally.

let { GameObject } = kontra;

let gameObject = GameObject({
 x: 290,
 y: 80,
 width: 20,
 height: 40,

 render: function() {
   // draw the game object normally (perform rotation and other transforms)
   this.draw();

   // outline the game object
   this.context.strokeStyle = 'yellow';
   this.context.lineWidth = 2;
   this.context.strokeRect(0, 0, this.width, this.height);
 }
});

gameObject.render();

let { GameObject } = kontra;

let gameObject = GameObject({
 x: 290,
 y: 80,
 width: 20,
 height: 40,

 render: function() {
   // draw the game object normally (perform rotation and other transforms)
   this.draw();

   // outline the game object
   this.context.strokeStyle = 'yellow';
   this.context.lineWidth = 2;
   this.context.strokeRect(0, 0, this.width, this.height);
 }
});

gameObject.render();

let { GameObject } = kontra;

let gameObject = GameObject({
 x: 290,
 y: 80,
 width: 20,
 height: 40,

 render: function() {
   // draw the game object normally (perform rotation and other transforms)
   this.draw();

   // outline the game object
   this.context.strokeStyle = 'yellow';
   this.context.lineWidth = 2;
   this.context.strokeRect(0, 0, this.width, this.height);
 }
});

gameObject.render();

GameObject.drotation

Number. Angular velocity of the rotation in radians.

GameObject.dx

Number. X coordinate of the velocity vector.

GameObject.dy

Number. Y coordinate of the velocity vector.

GameObject.height

Number. The height of the game object. Represents the local height of the object as opposed to the world height.

GameObject.init(properties)

Use this function to reinitialize a game object. It takes the same properties object as the constructor. Useful it you want to repurpose a game object.

init Parameters

properties: Object. Properties of the game object.

GameObject.isAlive()

Check if the game object is alive.

isAlive Return value

Boolean. true if the game objects ttl property is above 0, false otherwise.

GameObject.opacity

Number. The opacity of the object. Represents the local opacity of the object as opposed to the world opacity.

GameObject.parent

GameObject or null. The game objects parent object.

GameObject.position

Vector. The game objects position vector. Represents the local position of the object as opposed to the world position.

GameObject.radius

Number. The radius of the game object. Represents the local radius of the object as opposed to the world radius.

GameObject.removeChild(...objects)

Remove an object as a child of this object. The removed objects world property will be updated to not take into account this object and all of its parents.

removeChild Parameters

...objects: A list of (GameObject or Array of GameObjects). Object to remove as a child. Can be a single object, an array of objects, or a comma-separated list of objects.

GameObject.render()

Render the game object and all children. Calls the game objects draw() function.

GameObject.rotation

Number. The rotation of the game object around the anchor in radians. Represents the local rotation of the object as opposed to the world rotation.

GameObject.scaleX

Number. The x scale of the object. Represents the local x scale of the object as opposed to the world x scale.

GameObject.scaleY

Number. The y scale of the object. Represents the local y scale of the object as opposed to the world y scale.

GameObject.setScale(x[, y])

Set the x and y scale of the object. If only one value is passed, both are set to the same value.

setScale Parameters

x: Number. X scale value.
y Optional: Number. Y scale value. Defaults to x.

GameObject.ttl

Number. How may frames the game object should be alive.

GameObject.update([dt])

Update the position of the game object and all children using their velocity and acceleration. Calls the game objects advance() function.

update Parameters

dt Optional: Number. Time since last update.

GameObject(​[properties], ...properties.props)