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.

Engine.js needs nothing more than a browser and a copy of the repository to get running. In the next few steps you’ll have the editor open, a physics-enabled square falling under gravity, and a live simulation running — all without installing a single dependency or starting a server.
1

Clone the repository and open the editor

Clone the Engine.js repository from GitHub, then open index.html directly in your browser:
git clone https://github.com/OmarMtya/engine.js.git
cd engine.js
After cloning, open index.html by double-clicking it in your file manager, or by navigating to it in your browser with File → Open File. No local server is needed — the editor loads immediately. You’ll see the Engine.js header with a green Play button at the top and the configuration toolbar at the bottom.
The engine/ directory — which contains engine/index.js, the ES module that exposes the $g namespace — is listed in .gitignore and is not included in the cloned repository. You must obtain and place the engine/ folder alongside index.html before opening the editor. Without it, $g will be undefined and the editor will not function.
2

Add a square object

Click the square icon (fas fa-square) on the right side of the configuration toolbar at the bottom of the editor.This runs the following logic internally:
let figura = new $g.Figura({
    tipo: "cuadrado",
    transform: new $g.Transform({
        x: 100,
        y: 100,
        anchura: 20,
        altura: 20,
        relleno: "#000000"
    })
});
$g.AgregarFigura(figura);
$g.Dibujar();
A 20×20 black square appears on the canvas at position (100, 100), and a new entry is added to the Hierarchy panel on the left. The object receives an auto-generated name and a unique id automatically.
3

Add a circle object

Click the circle icon (fas fa-circle) in the configuration toolbar.This internally creates:
let figura = new $g.Figura({
    tipo: "circulo",
    transform: new $g.Transform({
        x: 100,
        y: 100,
        radio: 10,
        relleno: "#000000"
    })
});
$g.AgregarFigura(figura);
$g.Dibujar();
A circle with radius 10 appears on the canvas at (100, 100). It is listed separately in the Hierarchy panel. Both objects now coexist in the $g.figuras array.
4

Select an object and configure its properties

Click any entry in the Hierarchy panel to select it. The Attributes panel appears on the right side of the editor with the following editable fields:
FieldDescription
NameFree-text label shown in the Hierarchy panel
TypeDropdown — cuadrado, circulo, or imagen
X / YCanvas position in pixels
Width / HeightDimensions for squares and images (anchura / altura)
RadiusRadius for circles (radio)
FillColor picker for the object’s fill color (relleno)
Try changing the fill color of the square to a red hue using the color picker. The canvas re-renders immediately on every change. You can also reorder objects using the ↑ and ↓ arrow buttons in the Attributes panel header, or delete the selected object with the trash icon.
5

Enable physics on the square

With the square selected in the Hierarchy panel, locate the Rigid (Rígido) section at the top of the Attributes panel.
  1. Check the Rigid checkbox — this attaches a $g.Rigido() instance to the object and reveals the physics sub-fields.
  2. Set Gravity (Gravedad) to a value such as 0.5 — this becomes the rigido.valor applied each animation frame.
  3. Optionally, ensure Collision (Colisión) is checked to allow the object to interact with scene boundaries.
While gravity is set in the editor UI, you can achieve the exact same result programmatically via the $g API:
// Create a square with gravity enabled
let figura = new $g.Figura({
    tipo: "cuadrado",
    transform: new $g.Transform({
        x: 100,
        y: 100,
        anchura: 40,
        altura: 40,
        relleno: "#e74c3c"
    })
});
figura.rigido = new $g.Rigido();
$g.AgregarFigura(figura);
$g.Dibujar();
The $g.Rigido() constructor sets the default gravity value. Adjust figura.rigido.valor to increase or decrease the gravitational pull.
Collision-based sound triggers (colision and colisionInversa) on a $g.Sonido instance require rigido to be enabled on the object. If Rigid is not active, those audio triggers will not fire.
6

Press Play and run the simulation

Click the green Play button in the header. The following happens:
  1. The engine sets animando = true and calls $g.Animar(), starting the requestAnimationFrame loop.
  2. The Attributes panel is hidden so the canvas has full focus.
  3. Click selection on canvas objects is disabled during play.
  4. If a global background audio track was loaded, it begins playing automatically.
Your physics-enabled square will immediately begin falling under gravity. Objects with collision enabled will interact with scene boundaries.To stop the simulation, click the Pause button (the Play icon has toggled to a pause icon). The engine calls $g.DetenerAnimacion(), redraws the final static frame with $g.Dibujar(), and restores the Hierarchy panel and click-selection so you can continue editing.
// The Play button internally does this:
$g.Animar();

// The Pause button internally does this:
$g.DetenerAnimacion();
$g.Dibujar();
Use the palette icon (fas fa-palette) in the left group of the configuration toolbar to cycle through the three built-in color themes: default (dark header), dark (oscuro — full dark UI), and blue (azul — blue header with light panels). Use the window icon (far fa-window-maximize) next to it to cycle through the three canvas layout structures: default (canvas center), canvas right (canvasDerecha), and canvas left (canvasIzquierda). Both preferences are saved automatically in localStorage and restored on your next visit.

Build docs developers (and LLMs) love

Get started for freeTalk to us