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.

Sprite configures how Engine.js slices and animates a sprite sheet attached to an Imagen. Each Sprite instance selects a single row of the sheet to play, specifies how many frames (columns) that row contains, the pixel dimensions of each frame, and the total desired loop duration. The engine’s DibujarSprite function reads these values every frame to decide which column to drawImage from the sheet.

​
Constructor

new Sprite(row, cols, altura, anchura, velocidad)
​
row
number
required
Zero-indexed row of the sprite sheet to play. Row 0 is the topmost strip. The engine multiplies this value by altura to calculate the sy (source Y) offset passed to drawImage.
​
cols
number
required
Total number of columns (frames) in the selected row. The current frame index cycles from 0 to cols - 1 and then wraps back to 0.
​
altura
number
required
Height of a single frame in pixels. Used as both the source height in drawImage and (by tocandoFondo()) as the collision floor boundary for sprite figures.
​
anchura
number
required
Width of a single frame in pixels. Used as the source width in drawImage.
​
velocidad
number
required
Desired total animation loop duration in seconds. Internally converted to a per-frame interval using:
velocidad = parseFloat(velocidad) / (cols / parseFloat(velocidad))
The resulting value is stored in this.velocidad and compared against elapsed time on each tick to decide whether to advance the frame index.

​
Instance Properties

​
row
number
The row index, stored as an integer (parseInt).
​
cols
number
The column count, stored as an integer (parseInt).
​
altura
number
Frame height in pixels, stored as a float (parseFloat).
​
anchura
number
Frame width in pixels, stored as a float (parseFloat).
​
velocidad
number
Computed per-frame interval in seconds. Derived from the constructor’s velocidad argument; not the raw value you pass in.
​
frame
{ valor: number, ultimo: number | null }
Internal animation state.
  • valor — current column index (0-based). The engine uses this as the sx multiplier: sx = sprite.frame.valor * sprite.anchura.
  • ultimo — Date.now() timestamp of the last frame advance, or null before the first tick.

​
Frame Advance Logic

The engine advances the frame index when:
Date.now() - sprite.frame.ultimo > sprite.velocidad * 1000
When that condition is met, sprite.frame.valor is incremented by 1 and wrapped with modulo cols:
sprite.frame.valor = (sprite.frame.valor + 1) % sprite.cols
sprite.frame.ultimo is then updated to Date.now(). This keeps the animation rate consistent regardless of the canvas FPS.

​
Usage Example

// 6-frame walk cycle, 4 rows tall, each frame 48x48, 1 second loop
const walkSprite = new $g.Sprite(0, 6, 48, 48, 1.0);

const sheet = new Image();
sheet.src = './walk.png';

const walker = new $g.Figura({
  tipo: 'imagen',
  transform: new $g.Transform({
    x: 120,
    y: 300,
    anchura: 48,
    altura: 48,
    imagen: new $g.Imagen(sheet, walkSprite)
  }),
  rigido: new $g.Rigido()
});
$g.AgregarFigura(walker);
To switch animation rows at runtime (e.g. walk → jump), create separate Sprite instances for each animation state and swap figura.transform.imagen.sprite between them as game state changes.
  • Imagen — holds the Sprite reference and the sheet source
  • Transform — holds the Imagen reference
  • Figura — the game object that renders the animation

Build docs developers (and LLMs) love

Get started for freeTalk to us