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.

Figura is the core game-object class in Engine.js. Every visible entity on the canvas — a rectangle, a circle, or an image — is a Figura. It combines a visual description (Transform) with an optional physics component (Rigido) and exposes three methods that the animation loop calls each frame to apply gravity, detect floor contact, and resolve collisions with other rigid figures.

​
Constructor

new Figura({ id, nombre, tipo, transform, rigido })
​
id
string
Explicit identifier for this figure. The constructor uses a truthy check (if(id)), so any falsy value — including 0 or an empty string — is treated the same as omitting the field and causes an ID to be auto-generated by Environment.GenerarId(), which returns a random 9-character base-36 string prefixed with _.
​
nombre
string
Human-readable display name. When omitted, defaults to "Figura N" where N is Environment.figuras.length + 1 at the moment of construction.
​
tipo
string
required
Shape type that controls how the figure is drawn each frame. No validation is performed in the constructor; only the following values are recognized by the renderer:
  • 'circulo' — drawn as a filled arc using transform.radio
  • 'cuadrado' — drawn as a filled rectangle using transform.anchura × transform.altura
  • 'imagen' — rendered from transform.imagen; uses DibujarSprite when a Sprite is attached, otherwise drawImage
​
transform
Transform
required
Position, size, color, image, and sound data for this figure. See Transform.
​
rigido
Rigido | null
Physics component. When null (the default) the figure is purely visual and is excluded from all gravity and collision calculations. See Rigido.

​
Instance Properties

​
id
string
Unique identifier. Either the value passed to the constructor or the auto-generated one from Environment.GenerarId().
​
nombre
string
Display name of the figure.
​
tipo
'circulo' | 'cuadrado' | 'imagen'
Shape type string as supplied at construction time.
​
transform
Transform
The Transform instance controlling position, size, color, image, and sound. See Transform.
​
rigido
Rigido | null
The Rigido physics component, or null if physics are disabled for this figure. See Rigido.
​
tocadoPor
Figura | undefined
The last figure that landed on top of this one during a rigid-body collision. Set internally by tocandoRigidos() on the other figure when it resolves a downward collision with this one. undefined until a collision occurs.

​
Instance Methods

​
afectarGravedad()

Advances the figure downward by one gravity step and accelerates the fall for the next frame.
  • Adds rigido.valor to transform.y (moves the figure down by the current speed).
  • Increases rigido.valor by rigido.valor / (Environment.FPS * 100), producing a smooth exponential acceleration.
afectarGravedad() should only be called when rigido is set and rigido.colision is false. The animation loop is responsible for this guard; calling it while the figure is already resting will push it through the floor or through another figure.

​
tocandoFondo()

Returns: boolean Checks whether the figure has reached the bottom of the canvas and updates the rigido.colision flag accordingly.
  • For sprite figures (transform.imagen.sprite is set), the floor boundary is Environment.altura - transform.imagen.sprite.altura.
  • For all other figures, the boundary is Environment.altura - transform.altura.
  • When transform.y >= fondo: clamps transform.y to fondo, sets rigido.colision = true, and returns true.
  • Otherwise: sets rigido.colision = false and returns false.

​
tocandoRigidos()

Returns: void Iterates every other figure in Environment.figuras that has a Rigido component with sinColision = false, and resolves any overlap using axis-aligned bounding-box (AABB) detection via Tocando(). Collision resolution steps (when overlap is detected and the other figure is below):
  1. Repositions this figure so its bottom edge sits flush against the top of the figure below.
    • If the figure below is a circle: newY = figura.transform.y - figura.transform.radio - this.transform.altura
    • Otherwise: newY = figura.transform.y - this.transform.altura
  2. Sets this.rigido.colision = true.
  3. On the first contact tick (when figura.tocadoPor != this):
    • Sets figura.tocadoPor = this.
    • Transfers this.rigido.valor to figura.rigido.valor (the impacted figure inherits the incoming gravity speed).
    • Resets this.rigido.valor to Environment.gravedad.
    • Sets this.rigido.gravedadReiniciada = true so the next tick does not prematurely set colision = false.
Sound triggering (runs after the loop, when transform.sonido is set with activacion of 'colision' or 'colisionInversa'):
activacionrigido.colisionAudio stateAction
'colision'truepaused.play()
'colision'falseplaying.pause()
'colisionInversa'falsepaused.play()
'colisionInversa'trueplaying.pause()
Sound is only triggered inside tocandoRigidos(), so the figure must have a Rigido component for 'colision' and 'colisionInversa' modes to fire. See Sonido for full details on the activacion modes.

​
Usage Example

const box = new $g.Figura({
  nombre: 'box1',
  tipo: 'cuadrado',
  transform: new $g.Transform({ x: 100, y: 0, anchura: 50, altura: 50, relleno: '#4F46E5' }),
  rigido: new $g.Rigido(9.8)
});
$g.AgregarFigura(box);
  • Transform — position, size, and appearance
  • Rigido — physics component
  • Sonido — sound attachment
  • Imagen — image and sprite attachment

Build docs developers (and LLMs) love

Get started for freeTalk to us