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.

The entire Engine.js runtime is exposed through a single global object called $g. Every method, every class constructor, and every scene property lives on this namespace — there are no separate imports or module paths to manage. If $g is in scope, the engine is ready to use. The API is divided into two categories: Methods, which are functions you call directly on $g to initialize the canvas, manage the scene, and control animation; and Classes, which are constructor functions on $g used to build and configure game objects and their components.

​
Methods

MethodDescription
$g.InitCanvas(canvas, container)Initialize the engine with a canvas element and its parent container
$g.DetectarClick(activar?)Enable or disable canvas click detection
$g.AgregarFigura(figura)Add a Figura instance to the active scene
$g.Dibujar()Render the current scene as a single static frame
$g.Animar()Start the real-time animation and physics loop
$g.DetenerAnimacion()Stop the running animation loop

​
$g.InitCanvas(canvas, container)

Bootstraps the engine by binding it to a specific <canvas> element and its surrounding container <div>. This must be called before any other $g method. In the built-in editor this is called inside window.onload using $("canvas") and $("#container-canvas").

​
$g.DetectarClick(activar?)

Attaches (or detaches) a pointer-down listener on the canvas. Calling $g.DetectarClick() with no arguments enables click detection. Passing false disables it. When a click lands on a figure, the $g.clickListener callback is invoked with that figure as its argument.

​
$g.AgregarFigura(figura)

Appends a Figura instance to the $g.figuras array, making it part of the active scene. The figure will appear on the next call to $g.Dibujar() or on the next animation tick.

​
$g.Dibujar()

Clears and redraws the entire canvas once using the current state of every figure in $g.figuras. Use this for a static, non-animating render — for example, after editing a property in the editor.

​
$g.Animar()

Starts a requestAnimationFrame-based loop that calls $g.Dibujar() on every frame and advances any physics simulations. Call $g.DetenerAnimacion() to stop it.

​
$g.DetenerAnimacion()

Cancels the running animation frame loop. The canvas is left in its last-rendered state. You can call $g.Dibujar() afterwards to snapshot the current frame.

​
Properties

​
$g.figuras
Figura[]
The live array of all Figura objects currently in the scene. You can read, splice, or reorder this array directly — changes take effect on the next draw call.
​
$g.clickListener
(figura: Figura) => void
An assignable callback that fires whenever a canvas click hits a figure (requires $g.DetectarClick() to be active). Assign a function to this property to handle object selection or custom interaction logic.

​
Classes

Each class below is a constructor accessible on the $g namespace. Follow the links for full parameter documentation and examples.

Figura

The fundamental game object. Holds a type, a Transform, and an optional Rigido for physics.

Transform

Stores position, size, color, and references to optional Imagen and Sonido attachments.

Rigido

Adds gravity simulation and collision detection to a game object.

Imagen

Attaches an HTML Image element for texture rendering and optional sprite animation.

Sprite

Configures sprite sheet animation: row, columns, frame size, and playback speed.

Sonido

Attaches a per-object sound effect with a configurable trigger mode.

​
Quick Example

The snippet below shows a minimal Engine.js setup — initializing the canvas, creating a blue square with physics, and starting the animation loop. 
// 1. Initialize the engine
$g.InitCanvas(
    document.querySelector('canvas'),
    document.querySelector('#container-canvas')
);

// 2. Enable click selection
$g.DetectarClick();
$g.clickListener = function (figura) {
    console.log('Clicked:', figura.nombre);
};

// 3. Create and add a figure
let box = new $g.Figura({
    tipo: 'cuadrado',
    transform: new $g.Transform({
        x: 100,
        y: 100,
        anchura: 50,
        altura: 50,
        relleno: '#3498db'
    })
});
$g.AgregarFigura(box);

// 4. Render a static frame first
$g.Dibujar();

// 5. Start simulation
$g.Animar();

Build docs developers (and LLMs) love

Get started for freeTalk to us