Engine.js Motor: Animation Loop and Rendering API Reference

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.

​

Exported Functions

​

IniciarAnimacion

$g.Animar();

1. Calls the internal Inicializar function, which resolves initial overlaps between figures and plays sounds whose activacion is 'inicial'.
2. Snapshots Environment.figuras into Environment.backup by calling Environment.Copy on every figure, so the scene can be fully restored later.
3. Calls window.requestAnimationFrame(Step) to begin the loop, storing the returned request ID in the module-private requestId variable.

$g.InitCanvas(document.getElementById('c'), document.getElementById('wrap'));

const floor = new $g.Figura({
  tipo: 'cuadrado',
  transform: new $g.Transform({ x: 0, y: 550, anchura: 800, altura: 50, relleno: '#333' })
});
const ball = new $g.Figura({
  tipo: 'circulo',
  transform: new $g.Transform({ x: 400, y: 50, radio: 25, relleno: '#e63' }),
  rigido: new $g.Rigido()
});

$g.AgregarFigura(floor);
$g.AgregarFigura(ball);
$g.Animar();

​

DetenerAnimacion

$g.DetenerAnimacion();

1. Guards against a no-op call: does nothing if requestId is undefined (i.e. the loop was never started or is already stopped).
2. Calls window.cancelAnimationFrame(requestId) and sets requestId = undefined.
3. Replaces Environment.figuras with a fresh deep-clone of every figure in Environment.backup (via Environment.Copy), reverting all positions, velocities, and physics state to their initial values.
4. Sets the module-private animando flag to false.
5. Pauses every figure whose transform.sonido.activacion === 'inicial'.

document.getElementById('stopBtn').addEventListener('click', () => {
  $g.DetenerAnimacion();
  $g.Dibujar(true); // show the restored initial frame
});

​

Dibujar

$g.Dibujar(sinAvance);

1. If sinAvance is false and the animando flag is not yet set, calls Inicializar() to resolve overlaps before the first frame.
2. Increments Environment.contador by 1.
3. Calls c.clearRect(0, 0, Environment.anchura, Environment.altura) to wipe the previous frame.
4. Calls c.beginPath() to reset the path buffer.
5. Iterates Environment.figuras and draws each figure according to its tipo:

6. If sinAvance is false, calls the internal calcularSiguientePaso function to update positions and physics state.

$g.InitCanvasStatic(canvas, 800, 600);
$g.AgregarFigura(myFigure);
$g.Dibujar(true); // render once, no physics

​

detectarClick

$g.DetectarClick(bindear);

$g.clickListener = function(figura) {
  figura.transform.relleno = '#00ff00'; // highlight on click
};
$g.DetectarClick(true);

// Later, disable click detection:
$g.DetectarClick(false);

​

Step (internal — not on $g)

function Step(timestamp) {
  if (!start) start = timestamp;
  Dibujar(false);
  requestId = window.requestAnimationFrame(Step);
}

​

Error (exported — not on $g)

function Error() {
  throw "EXISTE UN ERROR";
}

​

Internal Functions

​

Inicializar

1. Runs a forward-scan overlap-resolution pass over Environment.figuras. For each pair of figures that are already touching at rest, the outer figure is pushed to the right along the X axis to eliminate the initial overlap:
   • Against a 'circulo': pushed to figura.transform.x - (figura.transform.radio * 3).
   • Against a 'cuadrado' (outer is circle): pushed to (pivote.transform.x + pivote.transform.radio) + figura.transform.anchura.
   • Against a 'cuadrado' (outer is square): pushed to pivote.transform.x + figura.transform.anchura.
2. Plays the HTMLAudioElement (src.play()) for every figure whose transform.sonido.activacion === 'inicial'.

​

calcularSiguientePaso

1. Clones Environment.figuras (via spread [...Environment.figuras]) and sorts the clone in descending Y order (highest Y value first). This ensures that figures lower on the canvas process collision responses before figures higher up, preventing tunnelling artefacts.
2. For each figure in the sorted order:
   • Skips figures without a rigido component.
   • If rigido.sinColision is false (collision-enabled): calls figura.tocandoRigidos(). If no collision was detected (rigido.colision === false), calls figura.afectarGravedad() and figura.tocandoFondo().
   • If rigido.sinColision is true: calls only figura.afectarGravedad() (gravity without collision detection).

​

DibujarSprite

1. Reads src (the HTMLImageElement) and sprite (the Sprite config object) from transform.imagen.
2. Calculates the source X offset as sprite.anchura * sprite.frame.valor — each frame is sprite.anchura pixels wide on the sheet.
3. Calls c.drawImage(src, frameX, sprite.altura * sprite.row, sprite.anchura, sprite.altura, transform.x, transform.y, sprite.anchura, sprite.altura) to blit the current frame onto the canvas.
4. Checks whether sprite.velocidad * 1000 milliseconds have elapsed since sprite.frame.ultimo. If so, advances sprite.frame.valor by 1 modulo sprite.cols (looping back to frame 0 after the last column) and records the new timestamp in sprite.frame.ultimo.