GameObject(properties) +
+ +A versatile way to update and draw your game objects. It can handle simple rectangles, images, and game object sheet animations. It can be used for your main player object as well as tiny particles in a particle engine.
+GameObject Parameters
+-
+
-
+
properties+ +
+ Object. Properties of the game object.
+
+ -
+
properties.x+ +
+ Number. X coordinate of the position vector.
+
+ -
+
properties.y+ +
+ Number. Y coordinate of the position vector.
+
+ -
+
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.color+ Optional +
+ String. Fill color for the game object if no image or animation is provided.
+
+ -
+
properties.width+ Optional +
+ Number. Width of the game object.
+
+ -
+
properties.height+ Optional +
+ Number. Height of the game object.
+
+ -
+
properties.ttl+ Optional +
+ Number. How many frames the game object should be alive. Used by Pool. Defaults to
+Infinity.
+ -
+
properties.rotation+ Optional +
+ Number. game objects rotation around the origin in radians. Defaults to
+0.
+ -
+
properties.anchor+ Optional +
+ Number. 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 bottomright corner. Defaults to
+{x:0,y:0}.
+ -
+
properties.context+ Optional +
+ CanvasRenderingContext2D. The context the game object should draw to. Defaults to core.getContext().
+
+ -
+
properties.image+ Optional +
+ Image or HTMLCanvasElement. Use an image to draw the game object.
+
+ -
+
properties.animations+ Optional +
+ Object. An object of Animations from a game objectsheet to animate the game object.
+
+ -
+
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.*+ Optional +
+ Any type. Any additional properties you need added to the game object. For example, if you pass
+game object({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
+ +-
+
+
-
+
Properties
+-
+
- + + GameObject.acceleration + + +
- + + GameObject.anchor + + +
- + + GameObject.children + + +
- + + GameObject.color + + +
- + + GameObject.context + + +
- + + GameObject.ddx + + +
- + + GameObject.ddy + + +
- + + GameObject.dx + + +
- + + GameObject.dy + + +
- + + GameObject.height + + +
- + + GameObject.localPosition + + +
- + + GameObject.localPosition + + +
- + + GameObject.parent + + +
- + + GameObject.position + + +
- + + GameObject.rotation + + +
- + + GameObject.sx + + +
- + + GameObject.sy + + +
- + + GameObject.ttl + + +
- + + GameObject.velocity + + +
- + + GameObject.viewX + + +
- + + GameObject.viewY + + +
- + + GameObject.width + + +
- + + GameObject.x + + +
- + + GameObject.y + + +
+
+ -
+
Methods
+-
+
- + + GameObject.advance([dt]) + + +
- + + GameObject.draw() + + +
- + + GameObject.init(properties) + + +
- + + GameObject.isAlive() + + +
- + + GameObject.render() + + +
- + + GameObject.update([dt]) + + +
+
+ + GameObject.acceleration + + +
+ +The game objects acceleration vector.
+ ++ + GameObject.advance([dt]) + + +
+ +Move the game object by its acceleration and velocity. If the game object is an [animation game object](api/gameObject#animation-game object), it also advances the animation every 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 { game object } = kontra;
+
+let game object = game object({
+ x: 100,
+ y: 200,
+ width: 20,
+ height: 40,
+ dx: 5,
+ dy: 2,
+ update: function() {
+ // move the game object normally
+ game object.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 { game object } from 'path/to/kontra.mjs';
+
+let game object = game object({
+ x: 100,
+ y: 200,
+ width: 20,
+ height: 40,
+ dx: 5,
+ dy: 2,
+ update: function() {
+ // move the game object normally
+ game object.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 { game object } from 'kontra';
+
+let game object = game object({
+ x: 100,
+ y: 200,
+ width: 20,
+ height: 40,
+ dx: 5,
+ dy: 2,
+ update: function() {
+ // move the game object normally
+ game object.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 + + +
+ +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 { game object } = kontra
+
+let game object = game object({
+ x: 150,
+ y: 100,
+ color: 'red',
+ width: 50,
+ height: 50,
+ render: function() {
+ this.draw();
+
+ // draw origin
+ this.context.fillStyle = 'yellow';
+ this.context.beginPath();
+ this.context.arc(this.x, this.y, 3, 0, 2*Math.PI);
+ this.context.fill();
+ }
+});
+game object.render();
+
+game object.anchor = {x: 0.5, y: 0.5};
+game object.x = 300;
+game object.render();
+
+game object.anchor = {x: 1, y: 1};
+game object.x = 450;
+game object.render();import { game object } from 'path/to/kontra.mjs'
+
+let game object = game object({
+ x: 150,
+ y: 100,
+ color: 'red',
+ width: 50,
+ height: 50,
+ render: function() {
+ this.draw();
+
+ // draw origin
+ this.context.fillStyle = 'yellow';
+ this.context.beginPath();
+ this.context.arc(this.x, this.y, 3, 0, 2*Math.PI);
+ this.context.fill();
+ }
+});
+game object.render();
+
+game object.anchor = {x: 0.5, y: 0.5};
+game object.x = 300;
+game object.render();
+
+game object.anchor = {x: 1, y: 1};
+game object.x = 450;
+game object.render();import { game object } from 'kontra';
+
+let game object = game object({
+ x: 150,
+ y: 100,
+ color: 'red',
+ width: 50,
+ height: 50,
+ render: function() {
+ this.draw();
+
+ // draw origin
+ this.context.fillStyle = 'yellow';
+ this.context.beginPath();
+ this.context.arc(this.x, this.y, 3, 0, 2*Math.PI);
+ this.context.fill();
+ }
+});
+game object.render();
+
+game object.anchor = {x: 0.5, y: 0.5};
+game object.x = 300;
+game object.render();
+
+game object.anchor = {x: 1, y: 1};
+game object.x = 450;
+game object.render();+ + GameObject.children + + +
+ +The game objects children objects.
+ ++ + GameObject.color + + +
+ +The color of the game object if it was passed as an argument.
+ ++ + GameObject.context + + +
+ +The context the game object will draw to.
+ ++ + GameObject.ddx + + +
+ +X coordinate of the acceleration vector.
+ ++ + GameObject.ddy + + +
+ +Y coordinate of the acceleration vector.
+ ++ + GameObject.draw() + + +
+ +Draw the game object at its X and Y position. This function changes based on the type of the game object. For a [rectangle game object](api/gameObject#rectangle-game object), it uses context.fillRect(), for an [image game object](api/gameObject#image-game object) it uses context.drawImage(), and for an [animation game object](api/gameObject#animation-game object) it uses the currentAnimation render() function.
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 { game object } = kontra;
+
+let game object = game object({
+ x: 290,
+ y: 80,
+ color: 'red',
+ width: 20,
+ height: 40,
+
+ render: function() {
+ // draw the rectangle game object normally
+ this.draw();
+
+ // outline the game object
+ this.context.strokeStyle = 'yellow';
+ this.context.lineWidth = 2;
+ this.context.strokeRect(this.x, this.y, this.width, this.height);
+ }
+});
+
+game object.render();import { game object } from 'path/to/kontra.mjs';
+
+let game object = game object({
+ x: 290,
+ y: 80,
+ color: 'red',
+ width: 20,
+ height: 40,
+
+ render: function() {
+ // draw the rectangle game object normally
+ this.draw();
+
+ // outline the game object
+ this.context.strokeStyle = 'yellow';
+ this.context.lineWidth = 2;
+ this.context.strokeRect(this.x, this.y, this.width, this.height);
+ }
+});
+
+game object.render();import { game object } from 'kontra';
+
+let game object = game object({
+ x: 290,
+ y: 80,
+ color: 'red',
+ width: 20,
+ height: 40,
+
+ render: function() {
+ // draw the rectangle game object normally
+ this.draw();
+
+ // outline the game object
+ this.context.strokeStyle = 'yellow';
+ this.context.lineWidth = 2;
+ this.context.strokeRect(this.x, this.y, this.width, this.height);
+ }
+});
+
+game object.render();+ + GameObject.dx + + +
+ +X coordinate of the velocity vector.
+ ++ + GameObject.dy + + +
+ +Y coordinate of the velocity vector.
+ ++ + GameObject.height + + +
+ +The height of the game object. If the game object is a [rectangle game object](api/gameObject#rectangle-game object), it uses the passed in value. For an [image game object](api/gameObject#image-game object) it is the height of the image. And for an [animation game object](api/gameObject#animation-game object) it is the height of a single frame of the animation.
+Setting the value to a negative number will result in the game object being flipped across the horizontal axis while the height will remain a positive value.
+ ++ + 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. Primarily used by Pool to know when to recycle an object.
+ +isAlive Return value
+true if the game objects ttl property is above 0, false otherwise.
+ + GameObject.localPosition + + +
+ +The game objects local rotation, which is its rotation relative to a parent object. If the game object does not have a parent object, the local rotation will be the same as the [rotation](api/gameObject#rotation].
+ ++ + GameObject.localPosition + + +
+ +The game objects local position vector, which is its position relative to a parent object. If the game object does not have a parent object, the local position will be the same as the [position vector](api/gameObject#position].
+ ++ + GameObject.parent + + +
+ +The game objects parent object.
+ ++ + GameObject.position + + +
+ +The game objects position vector. The game objects position is its position in the world, as opposed to the position in the viewport. Typically the position in the world and the viewport are the same value. If the game object has been added to a tileEngine, the position vector represents where in the tile world the game object is while the viewport represents where to draw the game object in relation to the top-left corner of the canvas.
+ ++ + GameObject.render() + + +
+ +Render the game object. Calls the game objects draw() function.
+ ++ + GameObject.rotation + + +
+ +The rotation of the game object around the origin in radians. This rotation takes into account rotations from parent objects.
+ ++ + GameObject.sx + + +
+ +The X coordinate of the camera. Used to determine viewX.
+ ++ + GameObject.sy + + +
+ +The Y coordinate of the camera. Used to determine viewY.
+ ++ + GameObject.ttl + + +
+ +How may frames the game object should be alive. Primarily used by Pool to know when to recycle an object.
+ ++ + GameObject.update([dt]) + + +
+ +Update the game objects position based on its velocity and acceleration. Calls the game objects advance() function.
+update Parameters
+-
+
-
+
dt+ Optional +
+ Number. Time since last update.
+
+
+ + GameObject.velocity + + +
+ +The game objects velocity vector.
+ ++ + GameObject.viewX + + +
+ +Readonly. X coordinate of where to draw the game object. Typically the same value as the position vector unless the game object has been added to a tileEngine.
+ ++ + GameObject.viewY + + +
+ +Readonly. Y coordinate of where to draw the game object. Typically the same value as the position vector unless the game object has been added to a tileEngine.
+ ++ + GameObject.width + + +
+ +The width of the game object. If the game object is a [rectangle game object](api/gameObject#rectangle-game object), it uses the passed in value. For an [image game object](api/gameObject#image-game object) it is the width of the image. And for an [animation game object](api/gameObject#animation-game object) it is the width of a single frame of the animation.
+Setting the value to a negative number will result in the game object being flipped across the vertical axis while the width will remain a positive value.
+ ++ + GameObject.x + + +
+ +X coordinate of the position vector.
+ ++ + GameObject.y + + +
+ +Y coordinate of the position vector.
+ +