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.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.sx Optional

Number. The x camera position. Defaults to 0.

properties.sy Optional

Number. The y camera position. Defaults to 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.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.

Table of Contents

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, use the .class property of the constructor (since the GameObject is a factory function).

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 { GameObject } = kontra

class Triangle extends GameObject.class {
  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 { GameObject } from 'path/to/kontra.mjs'

class Triangle extends GameObject.class {
  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 { GameObject } from 'kontra';

class Triangle extends GameObject.class {
  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(​child)

Add an object as a child to this object. 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');
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');
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');
let child = createObject(25, 25, 'yellow', 2);

parent.addChild(child);

parent.render();

addChild Parameters

child

GameObject. Object to add as a child.

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 the 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​.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​.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​.removeChild(​child)

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

child

GameObject. Object to remove as a child.

GameObject​.render(​[filterObjects])

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

render Parameters

filterObjects Optional

Function. Array.prototype.filter() function which is used to filter which children to render.

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​.sx

Number. The X coordinate of the camera.

GameObject​.sy

Number. The Y coordinate of the camera.

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​.velocity

Vector. The game objects velocity vector.

GameObject​.width

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

GameObject​.world

Object. The world position, width, height, opacity, rotation, and scale. The world property is the true position, width, height, etc. of the object, taking into account all parents.

The world property does not adjust for anchor or scale, so if you set a negative scale the world width or height could be negative. Use getWorldRect to get the world position and size adjusted for anchor and scale.

GameObject​.x

Number. X coordinate of the position vector.

GameObject​.y

Number. Y coordinate of the position vector.