Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/OmarMtya/enginejs-module/llms.txt

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

Every visible object in an Engine.js scene — a bouncing ball, a moving platform, a character sprite — is a Figura. A figure bundles three pieces of information together: the type that controls how it is rendered, a Transform that stores position, size, and appearance, and an optional Rigido component that opts the figure into gravity and collision simulation. Figures without a Rigido are purely visual and remain completely stationary unless you move them manually.

​
Constructor

new $g.Figura({ id, nombre, tipo, transform, rigido })
​
id
string
A unique identifier for this figure. If falsy (omitted, null, undefined, 0, or empty string), Engine.js generates one automatically via Environment.GenerarId(), producing a string such as "_k7x2mq9az".
​
nombre
string
A human-readable name. If omitted, Engine.js assigns "Figura N" where N is the current length of Environment.figuras plus one (e.g. "Figura 1", "Figura 2", …).
​
tipo
'circulo' | 'cuadrado' | 'imagen'
required
The rendering type. Determines which Canvas API call Engine.js uses to draw the figure each frame.
​
transform
Transform
required
A Transform instance carrying position, dimensions, fill color, image, and sound. See Transform for full details.
​
rigido
Rigido | null
default:"null"
A Rigido instance that enables gravity and collision for this figure. When null, the figure is drawn but physics are never calculated for it.

​
Figure Types

​
'circulo' — Circle

A circle is rendered with the Canvas arc() API. Engine.js draws a full circle (0 to 2π) centred at (transform.x, transform.y) with radius transform.radio and filled with transform.relleno. 
const ball = new $g.Figura({
  tipo: 'circulo',
  transform: new $g.Transform({
    x: 400,
    y: 100,
    radio: 30,           // radius in px; also sets anchura and altura to 30
    relleno: '#e74c3c',  // CSS color
  }),
  rigido: new $g.Rigido(9.8),
});

$g.AgregarFigura(ball);
When radio is non-zero, Transform automatically sets both anchura and altura to the same value as radio. This means collision checks and floor-clamping use radio as the effective size dimension.

​
'cuadrado' — Rectangle

A rectangle is rendered with the Canvas fillRect() API at position (transform.x, transform.y) with transform.anchura as width and transform.altura as height. A stroke() call is also made each frame, so the rectangle will have a border using the canvas’s current stroke style. 
const box = new $g.Figura({
  tipo: 'cuadrado',
  transform: new $g.Transform({
    x: 200,
    y: 50,
    anchura: 80,         // width in px
    altura: 80,          // height in px
    relleno: '#3498db',
  }),
  rigido: new $g.Rigido(9.8),
});

$g.AgregarFigura(box);

​
'imagen' — Image or Sprite

An image figure renders a bitmap asset using drawImage(). The transform.imagen property must be set to either an Imagen instance (for static images) or an Imagen instance whose .sprite property holds a Sprite (for animated spritesheets). 
// Static image
const player = new $g.Figura({
  tipo: 'imagen',
  transform: new $g.Transform({
    x: 100,
    y: 200,
    anchura: 64,
    altura: 64,
    imagen: new $g.Imagen('player.png'),
  }),
  rigido: new $g.Rigido(9.8),
});

$g.AgregarFigura(player);

// Animated sprite
const runner = new $g.Figura({
  tipo: 'imagen',
  transform: new $g.Transform({
    x: 100,
    y: 200,
    imagen: new $g.Imagen('spritesheet.png', new $g.Sprite({
      anchura: 64,   // width of a single frame
      altura: 64,    // height of a single frame
      cols: 8,       // number of columns in the sheet
      row: 0,        // which row to animate
      velocidad: 0.1 // seconds per frame
    })),
  }),
  rigido: new $g.Rigido(9.8),
});

$g.AgregarFigura(runner);
If tipo is 'imagen' but transform.imagen is null or not set, Engine.js will log a console error and skip rendering that figure each frame. Always provide a valid Imagen instance.
For sprite dimensions, the rendered size comes from Sprite.anchura and Sprite.altura, not from transform.anchura and transform.altura. Floor collision for sprite figures also uses sprite.altura for the boundary calculation. See Images & Sprites for setup details.

​
Instance Properties

​
tocadoPor
Figura | undefined
Set by tocandoRigidos() on the lower figure whenever another figure lands on top of it. Holds a reference to the impacting Figura. This property does not exist until a collision occurs; it is undefined for figures that have never been hit from above. It is used internally to prevent re-applying the velocity transfer on every frame of sustained contact.

​
Instance Methods

​
afectarGravedad()

Moves the figure downward by rigido.valor pixels and then increases rigido.valor for the next frame: 
transform.y   += rigido.valor
rigido.valor  += rigido.valor / (Environment.FPS * 100)
This method is called automatically by the engine each frame for every figure that has a Rigido and is not currently resting on the floor or another rigid body. You do not need to call it manually.

​
tocandoFondo()

Returns true if the figure has reached the bottom boundary of the canvas and sets rigido.colision = true. When true is returned, transform.y is clamped to Environment.altura - transform.altura (or Environment.altura - sprite.altura for sprite figures) so the figure never falls below the canvas edge. 
// The engine calls this for you, but you can read the collision flag:
if (ball.rigido.colision) {
  console.log('Ball is resting on the floor.');
}

​
tocandoRigidos()

Scans all other figures in Environment.figuras that also have a Rigido (and do not have sinColision = true) and performs an AABB overlap check via the internal Tocando() utility. When an overlap is detected and the other figure is below this one:
  1. This figure is repositioned immediately above the other figure.
  2. rigido.colision is set to true.
  3. The lower figure’s tocadoPor property is set to this (the impacting figure).
  4. The lower figure inherits this figure’s current rigido.valor (velocity transfer on impact).
  5. This figure’s rigido.valor is reset to Environment.gravedad.
If transform.sonido is present, sound playback is triggered or paused according to the sound’s activacion mode ('colision' plays on contact, 'colisionInversa' plays while airborne).

​
Purely Visual Figures

Omitting rigido (or passing rigido: null) creates a figure that is drawn every frame but never moved by the physics engine. Use this for backgrounds, HUD elements, or static decorations. 
const background = new $g.Figura({
  nombre: 'Background',
  tipo: 'cuadrado',
  transform: new $g.Transform({
    x: 0,
    y: 0,
    anchura: 800,
    altura: 800,
    relleno: '#ecf0f1',
  }),
  // no rigido — purely visual
});

$g.AgregarFigura(background);
Register your background figure first with AgregarFigura. Engine.js draws figures in array order, so figures added earlier appear behind those added later.

Transform

Position, size, color, image, and sound for every figure.

Physics

Gravity, collision, and the Rigido component.

Images & Sprites

Load static images and animated spritesheets.

Figura API Reference

Complete API reference for the Figura class.

Build docs developers (and LLMs) love

Get started for freeTalk to us