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.

Engine.js performs axis-aligned bounding box (AABB) collision detection every frame for all figures that carry a Rigido component. The engine handles ground contact, figure-to-figure stacking, and velocity transfer automatically — your job is to configure each figure’s Rigido correctly and read the resulting state.

​
The Tocando function

All collision checks ultimately delegate to the Tocando(a, b, circulo, calcularGravedad) utility in utilidades.class.js. You will rarely call it directly, but understanding it explains every behaviour described below.
ParameterTypeDescription
aFiguraThe figure being tested (the “mover”).
bFiguraThe figure it is tested against (the “obstacle”).
circuloBooleanWhen true, figure b is treated as a circle: the Y-axis overlap check uses b.transform.altura * 2 instead of b.transform.altura to account for the circular bounding area.
calcularGravedadBooleanDefaults to true. When true, the current rigido.valor (gravity velocity) is subtracted from the overlap bounds so the engine can predict the next frame’s overlap, not just the current one.
Tocando returns false immediately — without doing any geometry — if either figure lacks a Rigido component or if either figure has sinColision = true. 
// Internal rectangle AABB check (calcularGravedad = true)
return a.transform.x < (b.transform.x + b.transform.anchura) &&
       a.transform.x + a.transform.anchura > b.transform.x &&
       a.transform.y < (b.transform.y + b.transform.altura) - fixGravedad &&
       a.transform.altura + a.transform.y > b.transform.y - fixGravedad;
The fixGravedad offset (equal to a.rigido.valor when calcularGravedad is true) means the engine looks one gravity-step ahead, preventing figures from tunnelling through thin platforms at high velocities.

​
Per-frame collision pipeline

Each call to calcularSiguientePaso() (triggered by Dibujar(false) inside the animation loop) runs the following pipeline:
1

Sort figures by Y descending

Environment.figuras is cloned and sorted so figures with a larger transform.y value (closer to the bottom of the canvas) are processed first. This prevents stacking bugs where a figure resolves its collision before the figure below it has moved.
2

Figure-to-figure collision: tocandoRigidos()

For every figure that has a Rigido and does not have sinColision = true, tocandoRigidos() is called. It checks all other rigid, collision-enabled figures for overlap and repositions this figure if needed.
3

Ground collision: tocandoFondo()

If the figure is not currently resting on another figure (rigido.colision === false), gravity is applied via afectarGravedad(), and then tocandoFondo() clamps the figure to the canvas floor.

​
Figure-to-figure collisions: tocandoRigidos()

When Tocando returns true and the obstacle figure’s transform.y is greater than this figure’s transform.y (i.e. the obstacle is below), the engine:
  1. Repositions this figure so its bottom edge sits exactly on top of the obstacle’s top edge.
  2. Transfers velocity: the obstacle’s rigido.valor is set to this figure’s current gravity velocity (simulating an impact impulse).
  3. Resets gravity: this figure’s rigido.valor is reset to Environment.gravedad (default 9.8).
  4. Sets rigido.colision = true on this figure.
  5. Sets rigido.gravedadReiniciada = true to prevent an erroneous colision = false on the very next tick after the reset.
If the overlapping figure is above this figure (not below), rigido.colision is set to false — two figures eating into each other from above do not count as a supported collision.
The gravedadReiniciada flag is a one-tick guard. After a gravity reset, the engine skips setting colision = false on the immediately following frame. Without it, the collision state would flicker on the very tick the gravity is reset, causing visible jitter.

​
Ground collision: tocandoFondo()

tocandoFondo() computes the maximum allowable transform.y position as: 
fondo = Environment.altura - transform.altura
For sprite-based figures it uses the sprite height instead of transform.altura. When transform.y >= fondo, the figure is clamped and rigido.colision is set to true. Otherwise rigido.colision is set to false.

​
Opting out: sinColision

Pass sinColision: true as the second argument to Rigido to make a figure fall freely without participating in any collision resolution. It will still be affected by gravity (via afectarGravedad()), but it passes through every other figure. 
const ghost = new $g.Figura({
  tipo: 'cuadrado',
  transform: new $g.Transform({ x: 50, y: 0, anchura: 40, altura: 40, relleno: '#94A3B8' }),
  rigido: new $g.Rigido(9.8, true) // sinColision = true
});

​
Worked example: stacked boxes

The following scene creates a static platform and a falling box that lands on top of it. 
$g.InitCanvas(canvas, container);

// Static platform — Rigido(0) means no gravity acceleration
const floor = new $g.Figura({
  tipo: 'cuadrado',
  transform: new $g.Transform({ x: 0, y: 500, anchura: 800, altura: 20, relleno: '#555' }),
  rigido: new $g.Rigido(0)  // no acceleration, acts as a static platform
});

// Falling box — will land on floor
const box = new $g.Figura({
  tipo: 'cuadrado',
  transform: new $g.Transform({ x: 100, y: 100, anchura: 50, altura: 50, relleno: '#4F46E5' }),
  rigido: new $g.Rigido(9.8)
});

$g.AgregarFigura(floor);
$g.AgregarFigura(box);
$g.Animar();
Once box lands on floor, box.rigido.colision will be true every frame it remains resting there. You can poll this property at any time: 
// Read collision state after each frame (e.g. in your own game loop)
console.log(box.rigido.colision); // true when box is resting on floor
If two figures start the scene already overlapping, the engine’s Inicializar() function runs a bubble-sort separation pass before the first frame. It pushes overlapping figures apart along the X axis so they begin the simulation in a valid, non-colliding state. You do not need to manually separate figures placed close together.

​
Collision sound triggers

When a figure has a Sonido attached with activacion: 'colision', the engine automatically plays the sound while rigido.colision === true and pauses it when the figure is airborne. Use activacion: 'colisionInversa' to invert this behaviour — the sound plays while the figure is not colliding. 
import { Sonido } from '/path/to/enginejs-module/index.js';

const box = new $g.Figura({
  tipo: 'cuadrado',
  transform: new $g.Transform({
    x: 200, y: 50,
    anchura: 60, altura: 60,
    relleno: '#4F46E5',
    sonido: new $g.Sonido('thud.mp3', 'colision')
  }),
  rigido: new $g.Rigido(9.8)
});

Build docs developers (and LLMs) love

Get started for freeTalk to us