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.

$g.Sprite tells the engine how to slice a sprite sheet image into individual frames and how fast to play them back. It does not hold image data itself — it is always stored on a $g.Imagen instance via imagen.sprite, and the Imagen must have a valid src before animation can render correctly. Once a Sprite is attached and $g.Animar() is running, the engine automatically advances through the frames each tick.

​
Constructor

new $g.Sprite(row, cols, altura, anchura, velocidad)
All five arguments are positional — there is no object shorthand for this constructor.
​
row
number
required
The 0-based row index of the animation strip to play within the sprite sheet. Row 0 is the top row. When you enter a row number in the editor UI the editor shows it as 1-based and subtracts 1 before passing it to the constructor — always use 0-based values when calling the constructor directly.
​
cols
number
required
The total number of columns (frames) in the sprite sheet. The engine divides the image width by this number to calculate individual frame width when slicing.
​
altura
number
required
The height of a single frame in pixels. This is the crop height the engine uses when drawing each frame from the sheet.
​
anchura
number
required
The width of a single frame in pixels. This is the crop width used when drawing each frame.
​
velocidad
number
required
Playback speed expressed as seconds per frame. For example, 0.1 plays at roughly 10 fps and 0.033 plays at roughly 30 fps. Smaller values produce faster animations.

​
Prerequisites

Before attaching a Sprite, make sure:
  1. The Figura has tipo set to 'imagen'.
  2. figura.transform.imagen is a valid $g.Imagen instance.
  3. figura.transform.imagen.src points to a loaded HTMLImageElement.

​
Examples

​
Attaching a sprite animation

// First, set up the image
const img = new Image();
img.src = 'path/to/spritesheet.png';
figura.tipo = 'imagen';
figura.transform.imagen = new $g.Imagen(img);

// Then attach the sprite config (row is 0-based)
figura.transform.imagen.sprite = new $g.Sprite(
    0,    // row (0-based): first animation strip
    8,    // total columns in the sheet
    48,   // height of one frame in pixels
    48,   // width of one frame in pixels
    0.12  // seconds per frame (~8 fps)
);

​
Switching animation rows at runtime

You can change the active row by mutating sprite.row directly while the animation loop is running: 
// Switch to the second row (index 1) — e.g. a walking-left strip
figura.transform.imagen.sprite.row = 1;

​
Changing playback speed

// Slow down to ~4 fps
figura.transform.imagen.sprite.velocidad = 0.25;

// Speed up to ~30 fps
figura.transform.imagen.sprite.velocidad = 0.033;

​
Removing sprite animation

Setting sprite to null causes the engine to render the full unclipped image instead: 
figura.transform.imagen.sprite = null;
The built-in editor displays row numbers starting at 1 and subtracts 1 internally before assigning to sprite.row. When calling the constructor directly in code, always pass the 0-based row index. Passing 1 in code selects the second row of the sheet.

Build docs developers (and LLMs) love

Get started for freeTalk to us