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.

The Imagen class is the bridge between a browser Image object and Engine.js’s rendering pipeline. Wrap any HTMLImageElement in an Imagen instance, hand it to a Transform, and Engine.js will call drawImage on every frame — scaling the image to fit the figure’s anchura and altura dimensions automatically.

​
The Imagen Class

Imagen is a thin data container. It holds the image source and an optional Sprite instance (covered in Sprites). For static (non-animated) images, you only need the first argument. 
new Imagen(src, sprite = null)
ParameterTypeRequiredDescription
srcHTMLImageElement✅A native browser Image object with its .src property set to a valid URL
spriteSprite❌A Sprite instance for sprite-sheet animation. Pass null (or omit) for a static image

​
Attaching an Image to a Figure

1

Create an HTMLImageElement

Use the browser’s built-in Image constructor and set its src to the path of your asset.
const img = new Image();
img.src = './assets/hero.png';
2

Wrap it in Imagen

Pass the Image object as the first argument to $g.Imagen. Leave the second argument empty for a static image.
const imagen = new $g.Imagen(img);
3

Assign it to a Transform

Pass your Imagen instance to the imagen property of a Transform. Set anchura and altura to control the rendered size on the canvas.
const transform = new $g.Transform({
  x: 100,
  y: 100,
  anchura: 64,
  altura: 64,
  imagen: imagen
});
4

Set the figure tipo to 'imagen'

Pass tipo: 'imagen' when constructing the Figura. Engine.js switches rendering to drawImage only for this type.
const hero = new $g.Figura({
  tipo: 'imagen',
  transform: transform,
  rigido: new $g.Rigido()
});
$g.AgregarFigura(hero);

​
Full Example

Here is a complete, self-contained example that places a 64 × 64 hero sprite on the canvas: 
const img = new Image();
img.src = './assets/hero.png';

const hero = new $g.Figura({
  tipo: 'imagen',
  transform: new $g.Transform({
    x: 100, y: 100,
    anchura: 64, altura: 64,
    imagen: new $g.Imagen(img)
  }),
  rigido: new $g.Rigido()
});
$g.AgregarFigura(hero);

​
How Engine.js Renders the Image

When a figure’s tipo is 'imagen' and no Sprite is attached, Engine.js calls the following on every frame: 
c.drawImage(
  transform.imagen.src,
  0, 0,
  transform.imagen.src.width,
  transform.imagen.src.height,
  transform.x,
  transform.y,
  transform.anchura,
  transform.altura
);
The image is read at its natural size (full src.width × src.height) and then scaled to the figure’s transform.anchura × transform.altura on the canvas. Resize the figure by changing those two Transform properties.
If src is not a valid HTMLImageElement, drawImage will throw and Engine.js will catch the error and log the following message to the console:
La imagen ingresada no tiene formato de objeto tipo "Image"
Always create your image with new Image() and ensure the .src string is correct before passing it to Imagen.

​
Next Steps

Static images are great for backgrounds, tiles, and props that don’t move through frames. When you need frame-by-frame animation from a sprite sheet, see Sprites to learn how to use the Sprite class together with Imagen.

Sprites

Animate sprite sheets with the Sprite class

Transform

All position, size, and appearance properties

Figures

Creating and registering figures in a scene

Imagen API

Full Imagen and Sprite API reference

Build docs developers (and LLMs) love

Get started for freeTalk to us