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.

Imagen wraps an HTMLImageElement and attaches it to a Transform so that a Figura of tipo: 'imagen' can be drawn on the canvas. When a Sprite configuration is also provided, the engine switches from a plain drawImage call to DibujarSprite, which slices the sheet into individual frames and advances them over time.

​
Constructor

new Imagen(src, sprite = null)
​
src
HTMLImageElement
required
The image to render. Must be a valid Image object with its .src property already set. The engine passes this reference directly to drawImage (or to DibujarSprite as the sheet source), so the image should be fully loaded before the first frame is drawn.
​
sprite
Sprite | null
default:"null"
Sprite sheet configuration. When set, the engine uses DibujarSprite to render a single frame from the sheet each tick and advances the frame index according to the elapsed time. When null, the entire image is drawn at the figure’s position and size. See Sprite.

​
Instance Properties

​
src
HTMLImageElement
The image reference passed at construction time.
​
sprite
Sprite | null
The Sprite configuration, or null for a static image.
If src is not a valid Image object (for example, a plain string path or an uninitialized object), Engine.js will log an error and skip rendering that figure entirely for that frame. Always construct an HTMLImageElement, assign its .src, and pass the element — not the path string — to Imagen.

​
Usage

// Static image
const img = new Image();
img.src = './hero.png';
const imagen = new $g.Imagen(img);

// Sprite sheet
const sheet = new Image();
sheet.src = './run.png';
const sprite = new $g.Sprite(0, 4, 64, 64, 0.4);
const imagenSprite = new $g.Imagen(sheet, sprite);
Once an Imagen is created, pass it to a Transform: 
const hero = new $g.Figura({
  tipo: 'imagen',
  transform: new $g.Transform({
    x: 100,
    y: 200,
    anchura: 64,
    altura: 64,
    imagen: imagenSprite
  })
});
$g.AgregarFigura(hero);
For sprite-sheet figures, set transform.anchura and transform.altura to the frame dimensions (matching Sprite.anchura and Sprite.altura), not the full sheet dimensions. The engine uses those values for positioning and collision bounds.
  • Sprite — sprite sheet animation configuration
  • Transform — holds the Imagen reference
  • Figura — the game object rendered using Imagen

Build docs developers (and LLMs) love

Get started for freeTalk to us