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.

$g.Figura is the building block of every Engine.js scene. Every shape you see on the canvas — a square, a circle, or an image — is a Figura instance stored in the $g.figuras array. A Figura does not draw itself; it is a data container. The engine reads its tipo, transform, and rigido properties on every frame to decide what to render and how physics should behave.

​
Constructor

new $g.Figura({ tipo, transform })
​
tipo
string
required
The shape type for this object. Accepted values are:
  • 'cuadrado' — an axis-aligned rectangle
  • 'circulo' — a circle
  • 'imagen' — a rectangle rendered with a texture from transform.imagen
​
transform
Transform
required
A $g.Transform instance that defines the figure’s position, size, and color. Every Figura must have a transform — the engine will not render an object without one.

​
Instance Properties

​
id
number
A unique integer identifier assigned automatically when the figure is created. Used internally by the editor to find and manage objects, and by the $g.figuras array operations.
​
nombre
string
A human-readable display name for the object. Defaults to an empty string. Set this to identify the figure in the hierarchy panel or in your own game logic.
​
tipo
string
The shape type — 'cuadrado', 'circulo', or 'imagen'. Can be changed at runtime; the engine will switch rendering mode on the next draw call.
​
transform
Transform
The attached $g.Transform instance. Modify transform.x, transform.y, and other properties directly to move or resize the figure.
​
rigido
Rigido | null
An optional $g.Rigido instance. When set, the animation loop applies gravity and collision detection to this figure. Set to null to remove physics entirely.

​
Examples

​
Creating a square

const square = new $g.Figura({
    tipo: 'cuadrado',
    transform: new $g.Transform({
        x: 50,
        y: 50,
        anchura: 40,
        altura: 40,
        relleno: '#e74c3c'
    })
});
square.nombre = 'Player';
$g.AgregarFigura(square);
$g.Dibujar();

​
Creating a circle

const circle = new $g.Figura({
    tipo: 'circulo',
    transform: new $g.Transform({
        x: 200,
        y: 100,
        radio: 25,
        relleno: '#9b59b6'
    })
});
circle.nombre = 'Coin';
$g.AgregarFigura(circle);
$g.Dibujar();

​
Adding physics to a figure

square.rigido = new $g.Rigido({ valor: 0.5 });
$g.Animar();

​
Finding a figure by id

const obj = $g.figuras.find(f => f.id === targetId);

​
Removing a figure from the scene

$g.figuras.splice($g.figuras.findIndex(f => f.id === targetId), 1);
$g.Dibujar();

​
Reordering figures (draw order)

Figures are rendered in array order — index 0 is drawn first (back), and the last index is drawn on top. To move a figure one position forward in the draw stack: 
const pos = $g.figuras.findIndex(f => f.id === targetId);
$g.figuras.splice(pos + 1, 0, $g.figuras.splice(pos, 1)[0]);
$g.Dibujar();

Build docs developers (and LLMs) love

Get started for freeTalk to us