Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/OmarMtya/engine.js/llms.txt

Use this file to discover all available pages before exploring further.

Every interactive element you place in an Engine.js scene is a Figura (figure). Figures are the foundational building block of the engine: they carry a type, a position, visual properties, and optional physics and audio data. Understanding how figures are constructed, stored, and rendered is the first step to building anything in Engine.js.

​
The Figura class

A Figura is the fundamental game object in Engine.js, exposed on the global $g namespace as $g.Figura. Every object on the canvas — whether a coloured square, a bouncing circle, or a sprite-animated character — is an instance of Figura. When you create a figure you pass a configuration object with two required keys:
​
tipo
string
required
The shape type. One of "cuadrado" (square), "circulo" (circle), or "imagen" (image).
​
transform
Transform
required
A $g.Transform instance that defines the figure’s position, size, and fill colour. See the Transform page for the full property reference.
After instantiation, Engine.js automatically attaches the following properties to every Figura:
PropertyTypeDescription
idnumberAuto-assigned unique integer identifier.
nombrestringHuman-readable name shown in the editor hierarchy.
tipostringThe shape type ("cuadrado", "circulo", or "imagen").
transformTransformSpatial and visual properties.
rigidoRigido | nullOptional rigid body for physics. null by default.
The transform property also holds references to an optional Imagen (image asset) and Sonido (sound effect) — both are accessed via figura.transform.imagen and figura.transform.sonido.

​
The three figure types

​
"cuadrado" — Square

A square (or rectangle) drawn with a solid fill colour. Defined by x, y, anchura (width), and altura (height). 
let square = new $g.Figura({
    tipo: "cuadrado",
    transform: new $g.Transform({
        x: 100,
        y: 100,
        anchura: 60,
        altura: 60,
        relleno: "#3498db"
    })
});
$g.AgregarFigura(square);
$g.Dibujar();

​
"circulo" — Circle

A circle drawn with a solid fill colour. Defined by x, y, and radio (radius). The anchura and altura properties are not used for rendering circles. 
let circle = new $g.Figura({
    tipo: "circulo",
    transform: new $g.Transform({
        x: 200,
        y: 100,
        radio: 30,
        relleno: "#e74c3c"
    })
});
$g.AgregarFigura(circle);
$g.Dibujar();

​
"imagen" — Image object

An image figure renders a bitmap loaded from a file. It shares the same anchura/altura sizing as squares. The image asset is attached after creation via figura.transform.imagen. 
let imgObj = new $g.Figura({
    tipo: "imagen",
    transform: new $g.Transform({
        x: 50,
        y: 50,
        anchura: 100,
        altura: 100,
        relleno: "#000000"
    })
});
$g.AgregarFigura(imgObj);
$g.Dibujar();

​
The $g.figuras array

All active scene objects are stored in the $g.figuras array. The engine iterates this array every frame to draw and simulate every object. You can read it at any time to inspect or modify existing figures: 
// Find a figure by its id
let obj = $g.figuras.find(f => f.id === myId);

// Move it
obj.transform.x += 10;
$g.Dibujar();

​
Adding figures: $g.AgregarFigura()

Use $g.AgregarFigura(figura) to register a new Figura in the scene. This pushes it into the $g.figuras array and assigns its id. Always call $g.Dibujar() afterwards to update the canvas. 
let figura = new $g.Figura({
    tipo: "cuadrado",
    transform: new $g.Transform({ x: 0, y: 0, anchura: 40, altura: 40, relleno: "#1abc9c" })
});
$g.AgregarFigura(figura);
$g.Dibujar();

​
Removing figures

Splice the figure out of $g.figuras by its index, then call $g.Dibujar() to refresh the canvas: 
// Remove the figure whose id matches myId
$g.figuras.splice(
    $g.figuras.findIndex(f => f.id === myId),
    1
);
$g.Dibujar();

​
Object ordering and layering

Figures are rendered in the order they appear in $g.figuras. A figure at a higher index is drawn on top of figures at lower indices. To reorder figures programmatically, use splice(): 
// Move figure at position 2 one step forward (on top)
let pos = 2;
$g.figuras.splice(pos + 1, 0, $g.figuras.splice(pos, 1)[0]);
$g.Dibujar();

// Move figure at position 2 one step back (underneath)
$g.figuras.splice(pos - 1, 0, $g.figuras.splice(pos, 1)[0]);
$g.Dibujar();
In the editor UI, the up and down arrow controls in the Attributes panel call exactly these splice operations under the hood. Use them to adjust draw order without writing code.

​
Click detection with $g.clickListener

Engine.js automatically detects clicks on canvas figures and fires a callback when a figure is hit. Assign your handler to $g.clickListener: 
$g.clickListener = function (figura) {
    console.log("Clicked figure:", figura.id, figura.nombre);
};
The callback receives the clicked Figura object as its only argument. Click detection is active while the scene is not animating; it is temporarily suspended when $g.Animar() is running.

​
Rendering: $g.Dibujar()

Call $g.Dibujar() any time you make a change that should be reflected on screen (adding a figure, moving it, changing its colour). During animation ($g.Animar()), the engine calls this automatically every frame — you only need to call it manually when the scene is paused or static.

Build docs developers (and LLMs) love

Get started for freeTalk to us