API

new Object

Initialize an Object

Properties

Object.id

Get identifier of Object

Do not modify this property.

import { Object } from '/src/core/object.js';

let obj = new Object('New Object', 0, 0, 20, 20, 0);
console.log(obj.id); /* Object identifier */

Object.name

Get name of Object

let particleSystem = new Object();
particleSystem.name = 'Particle System';

Object.x

Get x position of Object

let player = new Object();
player.x += 1;

Object.y

Get y position of Object

let player = new Object();
player.y += 1;

Object.width

Get width of Object

let player = new Object();
player.width = 200;

Object.height

Get height of Object

let player = new Object();
player.height = 150;

Object.layer

Get layer (z-index) of Object

let menu = new Object();
menu.layer = 10;

Object.active

Active Object

let hud = new Object();
hud.active = false;

Methods

Object.update()

update is called every frame if Object is active

Do not modify this method.

Object.draw()

draw is called every frame if Object is active

Do not modify this method.

Object.addComponent(component)

Add the Object component

let obj = new Object('Circle', 100, 100, 20, 20, 0);
obj.addComponent(new Circle('#CC8844', 0.6));
scene.add(circle);

Object.removeComponent(component)

Remove the Object component

let obj = new Object('New Object', 100, 100, 20, 20, 0);
let circleComponent = new Circle('#CC8844', 0.6);
obj.addComponent(circleComponent);
obj.removeComponent(circleComponent);

Object.addChild(child)

Add child to Object

let parent = new Object('Parent', 0, 0, 20, 20, 0);
let child = new Object('Child', 0, 0, 10, 10, 0);
parent.addChild(child);

Object.removeChild(child)

Add child to Object

let parent = new Object('Parent', 0, 0, 20, 20, 0);
let child = new Object('Child', 0, 0, 10, 10, 0);
parent.addChild(child);
parent.removeChild(child);

Object.contain(component)

Contains the Object component

let obj = new Object('New Object', 100, 100, 20, 20, 0);
let circleComponent = new Circle('#CC8844', 0.6);
obj.addComponent(circleComponent);
if (obj.contains(circleComponent)) {
    return true;
}

Object.translate(x, y)

Translate the Object by (x, y)

let player = new Object();
player.translate(1, 0);

Object.rotate(angle)

Rotate the Object by angle (in degrees)

let player = new Object();
player.rotate(60);

Object.copy(obj)

Copy the Object properties

for (let id in scene.objects) {
    let obj = new Object();
    obj.copy(scene.objects[id]);
    scene.add(obj);
}

Object.copy(obj)

Copy the Object properties

for (let id in scene.objects) {
    let obj = new Object();
    obj.copy(scene.objects[id]);
    scene.add(obj);
}

Object.detectMouse(x, y)

Detect Mouse hover

if (obj.detectMouse(Mouse.x, Mouse.y)) {
    Dnd.resize = obj.detectSide(Mouse.x, Mouse.y);
    Dnd.hovering = true;
}

Object.detectSide(x, y)

Detects sides for editor resizing

if (obj.detectMouse(Mouse.x, Mouse.y)) {
    Dnd.resize = obj.detectSide(Mouse.x, Mouse.y);
    Dnd.hovering = true;
}

Object.select(ctx)

Select Object in editor with Mouse

if (obj === scene.current && !obj.lock) {
    obj.select(this.ctx);
}

Object.createImage(ctx)

Create image of the Object

let obj = new Object('Empty', 0, 0, width, height);
obj.addComponent(new Light());
let img = obj.createImage();

static Component

Allow to manage Components

Properties

Component.components

Get Component from project

import { Component } from '/src/core/component.js';

let rotatorComponent = Component.components['Rotator'];

Methods

Component.add(component, icon, category)

Add Component to list

import { Component } from '/src/core/component.js';

export class Rotator {
    /**
    * Initialize the component
    * @constructor
    * @param {number} speed - The speed in degree
    */
    constructor(speed = 10) {
        this.rotation = 0;
        this.speed = speed;
    }
    
    /**
    * Update the component
    * @update
    */
    update(self) {
        this.rotation += this.speed;
        this.rotation = this.rotation % 360;
        self.rotate(this.rotation);
    }

    /**
    * Draw the component
    * @draw
    */
    draw(self) {
        
    }
}

Component.add(Rotator, 'far fa-sync', 'physics');

new Renderer

Initialize a Renderer

Properties

Renderer.width

The width of the Renderer

Renderer.height

The height of the Renderer

Renderer.ratio

The ratio of the Renderer relative to the Camera

Renderer.parent

The DOM Element parent of Renderer

import { Renderer } from '/src/core/renderer.js';

const canvas = document.getElementById('canvas');
const renderer = new Renderer(canvas.clientWidth, canvas.clientHeight, canvas);
console.log(renderer.parent); // return canvas

Renderer.pause

True if the game renderer is paused

Renderer.canvas

The HTMLCanvasElement of the Renderer

Renderer.ctx

The CanvasRenderingContext2D of the Renderer

Renderer.main

Get current Renderer

Methods

Renderer.createCanvas(id, zIndex)

Create canvas from layer

Do not use this property directly.

Renderer.init(scene, camera)

Init the canvas Renderer

import { Renderer } from '/src/core/renderer.js';

const renderer = new Renderer(canvas.clientWidth, canvas.clientHeight, canvas);
const scene = new Scene('Main Scene');
const camera = new Object('Viewport', 0, 0, canvas.clientWidth, canvas.clientHeight)
    .addComponent(new Camera('#272727'));

renderer.init(scene, camera);

Renderer.render(scene, camera)

Render the Scene

function loop() {
    window.requestAnimationFrame(loop);    
    renderer.render(scene, camera);
}

Renderer.clear(color)

Clear canvas

renderer.clear('#000000');

Renderer.resize(width, height)

Resize the canvas

window.onresize = function() {
    renderer.resize(canvas.clientWidth, canvas.clientHeight);
};

new Scene

Initialize a Scene

Properties

Scene.name

The name of the Scene

import { Scene } from '/src/core/scene.js';

const scene = new Scene('Main Scene');
console.log(scene.name);

Scene.objects

Contains all Objects of the Scene

for (let id in scene.objects) {
    const obj = scene.objects[id];
    obj.getActive(true);
}

Scene.events

Contains all events of the Scene

Do not use this property directly.

Scene.current

Get current Object of Scene

let obj = scene.current;

Scene.camera

Get active Camera of Scene

let camera = scene.camera;

Scene.main

Get current Scene

import { Scene } from '/src/core/scene.js';

const scene = Scene.main;

Methods

Scene.add(obj, dispatch)

Add an Object to Scene

let obj = new Object('Test', 0, 0, 20, 20, 0);
scene.add(obj);

Scene.remove(obj, dispatch)

Remove an Object from Scene

let obj = new Object('Test', 0, 0, 20, 20, 0);
scene.add(obj);
scene.remove(obj);

Scene.instanciate(obj, dispatch)

instanciate an Object to Scene

let obj = new Object('Test', 0, 0, 20, 20, 0);
scene.instanciate(obj);

Scene.dispatchEvent(e, data)

Dispatch event

function setObject(obj) {
    scene.dispatchEvent('setObject', obj);
}

Scene.addEventListener(e, fn)

Listen event

// On added object
scene.addEventListener('add', obj => {
    obj.x += 10;
});

// Object removed from scene
scene.addEventListener('remove', obj => {
    // do something
});

Scene.getObjectByName(name)

Get Object by name

let obj = scene.getObjectByName('New Object');

Scene.updateName(el, obj)

Update Object name from HTML Element

const obj = new Object('Test', 0, 0, 20, 20, 0);
const el = document.getElementById('objectId-name');
scene.updateName(el, obj);

new Camera

Initialize a Camera

Properties

Camera.main

Get main Camera

import { Camera } from '/src/core/camera.js';

const camera = new Object('Viewport', 0, 0, canvas.clientWidth, canvas.clientHeight)
    .addComponent(new Camera('#272727'));

const mainCamera = Camera.main;

static System

Core system sync of the engine

Properties

System.events

Get system events list

Do not use this property directly.

Methods

System.createID

Create unique ID

import { System } from '/src/core/system.js';

let obj = new Object();
obj.id = System.createID(); // reset ID

System.random(a, b)

Generate random number between a and b

console.log(System.random(0, 100));

System.sync(component)

Synchronize a component

Do not use this method directly.

System.dispatchEvent(e, data)

Dispatch event

System.dispatchEvent('eventName', 'value');

System.addEventListener(e, fn)

Listen event

System.addEventListener('setProperty', data => {
    data.object // return the object which is modified
    data.prop // returns the changed property
    data.value // returns the new property

    if (data.object.components.collider)
        if (data.prop === 'x' || data.prop === 'y')
            // reset collisions
}

Shapes

point()
line()
rect()
circle()

point(x, y)

Draws a point to the screen.

line(x1, y1, x2, y2)

Draws a line (a direct path between two points) to the screen.

rect(x, y, w, h)

Draws a rectangle to the screen.

circle(x, y, r)

Draws a circle to the screen.

Color

fill()
stroke()
strokeWeight()

fill(color)

Sets the color used to fill shapes. RGB, RGBA and Hex CSS color strings and all named color strings are supported.

stroke(color)

Sets the color used to draw lines and borders around shapes. RGB, RGBA and Hex CSS color strings and all named color strings are supported.

strokeWeight(weight)

Sets the width of the stroke used for lines, points, and the border around shapes. All widths are set in units of pixels.

Keyboard

keyPressed
keyReleased
keys

keyPressed

The system variable keyPressed is true if any key is pressed and false if no keys are pressed.

keyReleased

The system variable keyReleased is true if any key is released and false if no keys are pressed.

import { Keyboard } from '/src/input/keyboard.js';

if (Keyboard.keyReleased) {
    // do something
}

keys

The system variable keys always contains the value of all keys on the keyboard that was pressed.

if (keyPressed) {
    if (Keyboard.keys['d']) {
        obj.translate(1, 0);
    }
}

// or

for (let key in Keyboard.keys) {
    switch (key) {
        case 'd':
            obj.translate(1, 0);
            break;
    }
}

Mouse

Mouse.down
Mouse.up
Mouse.x
Mouse.y

Mouse.down

The system variable Mouse.down is true if the mouse is pressed and false if not.

Mouse.up

The system variable Mouse.up is true if the mouse is released and false if not.

Mouse.x

The system variable Mouse.x always contains the current horizontal position of the mouse, relative to (0, 0) of the canvas.

Mouse.y

The system variable Mouse.y always contains the current vertical position of the mouse, relative to (0, 0) of the canvas.

static Dnd

Static class to manage drag & drop

Properties

Dnd.draggedElement

Item being moved

import { Dnd } from '/editor/system/dnd.js';

Sorter.draggedElement = e.target;

Dnd.drag

Return true if mouse is down

Dnd.move

Return true if mouse is moving

Dnd.hovering

Return true if the mouse is over an object

Dnd.resize

Return resize side

Methods

dnd.setCursor(cursor)

Change the cursor

import { Dnd } from '/editor/system/dnd.js';

Dnd.setCursor('grabbing');

dnd.applyDragEvents(el)

Apply a dragstart event on the element

var clone = draggedElement.cloneNode(true);
Dnd.applyDragEvents(clone);

dnd.applyDropEvents(el)

Apply a drop event on the element

Dnd.applyDropEvents(el);