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 includes a built-in physics layer that can apply gravity to any figure and resolve collisions between objects. Physics is opt-in: by default a figure is static and stays exactly where you place it. To make a figure fall, bounce, or react to other bodies, attach a Rigido (rigid body) to it.

​
What Rigido does

A Rigido component enables two behaviours for the figure it is attached to:
  • Gravity simulation — the figure accelerates downward each frame, scaled by the valor property.
  • Collision detection — the engine checks for overlaps with other rigid bodies and resolves them automatically.
Both behaviours are active by default once a Rigido is attached. You can suppress collision detection individually per object using the sinColision flag.

​
Adding a rigid body

Assign a new $g.Rigido instance to figura.rigido, then set properties directly on the instance: 
figura.rigido = new $g.Rigido();
figura.rigido.valor = 0.5;        // set gravity strength
figura.rigido.sinColision = false; // enable collision detection

​
Properties

​
valor
number
Gravity strength applied to the figure each frame. Higher values cause the figure to fall faster. A value of 0.5 is a gentle pull; 2.0 or more is a strong pull.
​
sinColision
boolean
When true, collision detection is disabled for this figure — it falls through other objects. When false, the engine resolves overlaps with other rigid bodies.

​
Removing physics

Set figura.rigido to null to detach physics entirely. The figure immediately becomes static: 
figura.rigido = null;

​
Full example

let figura = new $g.Figura({
    tipo: "cuadrado",
    transform: new $g.Transform({
        x: 100,
        y: 50,
        anchura: 40,
        altura: 40,
        relleno: "#e74c3c"
    })
});

figura.rigido = new $g.Rigido();
figura.rigido.valor = 0.8;
$g.AgregarFigura(figura);
$g.Animar(); // Start the simulation loop

​
Collision detection

When two figures both have a Rigido attached and neither has sinColision: true, the engine detects overlapping bounds and prevents them from passing through each other. No additional configuration is needed — attaching a Rigido to both objects is sufficient.

​
Sound on collision

Sounds can be wired to physics events. Attach a $g.Sonido to figura.transform.sonido with the appropriate activacion value:
  • 'colision' — plays when this figure begins overlapping another rigid body.
  • 'colisionInversa' — plays when this figure stops overlapping another rigid body.
See the Sounds page for the full Sonido reference.
Sounds that use activacion: 'colision' or activacion: 'colisionInversa' require the figure to have rigido set. If figura.rigido is null, collision events never fire and the sound will never play.
Setting sinColision: true is useful for background or environmental objects — for example a falling cloud or decoration — that should be subject to gravity but should never block the player or other gameplay figures.

​
Physics property reference

PropertyTypeDescription
figura.rigidoRigido | nullThe rigid body component. null means no physics.
figura.rigido.valornumberGravity strength per frame.
figura.rigido.sinColisionbooleantrue disables collision response for this figure.

Build docs developers (and LLMs) love

Get started for freeTalk to us