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.

A sprite sheet is a single image file that contains multiple animation frames arranged in a grid of rows and columns. Instead of loading a separate image for each frame, Engine.js reads one region of the sheet per frame and advances through the columns automatically, producing smooth animation at the speed you configure.

​
Prerequisites

Before adding a Sprite, the figure must already have an Imagen attached. The Imagen wraps an HTMLImageElement pointing to your sprite sheet file: 
let img = new Image();
img.src = "path/to/spritesheet.png";
figura.transform.imagen = new $g.Imagen(img);
Once the image is attached, you can add a Sprite to drive the animation.

​
The Sprite constructor

new $g.Sprite(row, cols, altura, anchura, velocidad)
Arguments are positional (not an object), in the order listed below.
​
row
number
required
The row index of the animation strip to play, 0-based. Row 0 is the top row of the sprite sheet.
​
cols
number
required
Total number of columns in the sprite sheet — i.e. how many frames are in each row.
​
altura
number
required
Height of a single sprite frame in pixels.
​
anchura
number
required
Width of a single sprite frame in pixels.
​
velocidad
number
required
Playback speed expressed as seconds per frame. For example, 0.1 advances one frame every 100 ms (approximately 10 fps).
The row argument to the Sprite constructor is 0-based: the first row is 0, the second is 1, and so on. The editor UI accepts a 1-based value and subtracts 1 before passing it to the constructor, which is why the displayed value and the code value differ by one.

​
Attaching a sprite to a figure

let img = new Image();
img.src = "path/to/spritesheet.png";

// Attach the image first
figura.transform.imagen = new $g.Imagen(img);

// Then attach the Sprite
figura.transform.imagen.sprite = new $g.Sprite(
    0,    // row index (0-based) — first row
    4,    // total columns in the sheet
    64,   // height of one frame in pixels
    64,   // width of one frame in pixels
    0.1   // seconds per frame (~10 fps)
);

​
Updating sprite properties at runtime

Because the Sprite object is stored as a plain reference, all five properties can be changed at any time: 
let sprite = figura.transform.imagen.sprite;

sprite.row = 1;          // Switch to the second animation row
sprite.velocidad = 0.05; // Speed up to ~20 fps
Changes take effect on the next animation frame automatically.

​
Removing sprite animation

Set figura.transform.imagen.sprite to null to stop the frame cycling. The figure continues to display its attached image as a static bitmap: 
figura.transform.imagen.sprite = null;

​
Running the animation

The sprite advances frames only when the engine simulation loop is running. Call $g.Animar() to start it: 
$g.Animar();
If you stop the animation with $g.DetenerAnimacion(), the sprite freezes on its current frame. Calling $g.Animar() again resumes playback from where it left off.

​
Sprite property reference

PropertyTypeDescription
sprite.rownumberActive row index (0-based).
sprite.colsnumberTotal number of columns (frames per row).
sprite.alturanumberFrame height in pixels.
sprite.anchuranumberFrame width in pixels.
sprite.velocidadnumberSeconds per frame.

Build docs developers (and LLMs) love

Get started for freeTalk to us