2. Instances

Class Instance

You can add an Instance class to your code by this:

import { Canvas, Instance } from '../je/index.js';

or:

import { Instance } from '../je/instance.js';

Instance is a game object.

class MyObject extends Instance {
  onDraw() {
    this.fillColor = 'red';
    this.rectangle(0, 0, 20, 20); // rectangle(x, y, width, height). x and y are 0.
    this.fill();
  }
}

Now you can add it to game:

new MyObject().addToMain();

Now you can see a small red rectangle in the left top corner.

Full code:

import { Canvas, Instance } from '../je/index.js';

const cv = new Canvas({
  width: 1366,
  height: 768
});

class MyObject extends Instance {
  onDraw() {
    this.fillColor = 'red';
    this.rectangle(0, 0, 20, 20);
    this.fill();
  }
}

new MyObject().addToMain();

cv.start();

Class Scene

You can add a Scene class to your code by this:

import { Canvas, Scene } from '../je/index.js';

Scene is an game object too. But it automatically adds to canvas and can has child elements.

Here's an example:

import { Canvas, Instance, Scene } from '../je/index.js';

const cv = new Canvas({
  width: 1366,
  height: 768
});

class MyObject extends Instance {
  onDraw() {
    this.fillColor = 'red';
    this.rectangle(0, 0, 20, 20);
    this.fill();
  }
}

class MyGame extends Scene {
  onCreate() { // this event is called only once at start!
    this.add(new MyObject());
  }
}

new MyGame().addToMain();

cv.start();

You can see a small red rectangle too.

Warning

Don't use scenes for game objects, use only one scene to render all your objects (e.g. main menu scene, game scene, settings scene, etc.).

Render

Drawing rects

this.rectangle(x, y, width, height); // draw a rectangle at an angle to the center.

Rounded rects

this.roundRect(x, y, width, height, radius); // draw a rounded rectangle at an angle to the center.

Drawing circles

this.circle(x, y, radius); // draw a circle at an angle to the center.

Drawing polygons

Important

At the moment, the polygon method not used at an angle to the center.

this.polygon(N); // draw a polygon with N-th number of edges.
this.polygon(N, { scale: 2 });
this.polygon(N, { rotation: 45 });
this.polygon(N, { scale: 2, rotation: 30 });

Drawing custom path

Important

At the moment, the path method not used at an angle to the center.

this.path([new Point(0, 0), new Point(0, 1), new Point(1, 1), new Point(0, 1)]); // draw a rectangle.

drawImage

Draw an image (required to create it).

this.drawImage(image, x, y, width, height);

Text

Fill text

this.fillText(x, y, ...text);
this.fillText(x, y, 'Number:', 1); // fill "Number: 1" text in x, y position

Stroke text

this.strokeText(x, y, ...text);
this.strokeText(x, y, 'Number:', 1); // stroke "Number: 1" text in x, y position

Measure text

const metrics = this.measureText(...text);

Translate

Warning

This method is not safe use this

this.translate(x, y);

Rotate

Warning

This method is not safe use this

this.rotate(radians); // rotate in radians
this.rotateAngle(angle); // rotate in angle (0 - 360)

Scale

Warning

This method is not safe use this

this.scale(xscale, yscale);

Safe translate, rotate, scale

this.save();
{
    this.translate(x, y); // you can change it on rotate or scale too.
    /* code translated with x, y */
}
this.restore();
/* code translated as default */

Fill

Fill in the selected area.

this.fill();
this.fill('red'); // fast fillColor

stroke

Stroke in the selected area.

this.stroke();
this.stroke('blue'); // fast strokeColor

destroy

Delete the instance.

this.destroy();

add

Add an instance to this instance.

this.add(instance);

addToMain

Add an instance to the canvas.

this.addToMain();

getRect

Return the Rect class.

get rect() { // `get rect` is used in collisions.
    return this.getRect(width, height); // now your object has collisions.
}

isClassOf

Is one of selected classes parent of this class

if (this.isClassOf(MyObject)) { // example
    console.log('my parent is the MyObject class');
}

Properties

lineWidth

Change the width of the lines for the stroke method.

this.lineWidth = 10;

fontAlign

Set align for text.

this.fontAlign = 'center';

fontBaseline

The same as fontAlign but horizontally.

this.fontBaseline = 'middle';

font

this.font = '32px Intel'; // '<font resolution>px <font name>'

fillColor

this.fillColor = 'red';
this.fillColor = [255, 0, 0]; // RGB
this.fillColor = Color.create(255, 0, 0); // don't forget to import `Color`

strokeColor

The same as fillColor but for the stroke method.

this.strokeColor = 'red';

alpha

this.alpha = 0.1;
/* code */
this.alpha = 1; // reset alpha

ctx

Get the original context of canvas.

const ctx = this.ctx;
// or
const { ctx } = this;
...
ctx.rotate(45 / 180 * Math.PI); // rotate it at a 45-degree angle.

pos

Get absolute position of instance.

const pos = this.pos;
// or
const { pos } = this;

Set pos

this.pos = new Point(10, 10); // don't forget to import `Point`.

Get the Canvas class

const canvas = this.canvas;
// or
const { canvas } = this;

Variables

drawDirection

this.drawDirection = 'top-left'; // center is default

index

Unique ID for every instance.

depth

"Layer" of instance

onCreate() {
    this.depth = 1;
}

x

X position

y

Y position

clipStroke

Clips the stroke if enabled.

onDraw() {
    this.circle(0, 0, 64, 64);
    this.fill('white');
    this.clipStroke = true;
    this.lineWidth = 4;
    this.stroke('rgba(0, 0, 0, 0.2)');
    this.clipStroke = false;
}

Protected variables

dontTranslate

onCreate() {
    this.dontTranslate = true; // disables x, y. Default is false
}

drawChildBottom

onCreate() {
    this.drawChildBottom = false; // enable drawing of children on top instead of bottom. Default is true
}