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.

When a Figura has its tipo set to 'imagen', the engine looks for a $g.Imagen instance on figura.transform.imagen and draws the image in place of the solid fill rectangle. Imagen is a thin wrapper around a native HTMLImageElement — it stores the element itself and an optional Sprite configuration that enables frame-by-frame sprite sheet animation.

​
Constructor

new $g.Imagen(imgElement)
​
imgElement
HTMLImageElement | null
The Image object (or new Image()) whose src the engine will draw. You can pass null initially and assign .src later — for example, when the editor enables the image component before the user has picked a file.

​
Instance Properties

​
src
HTMLImageElement
The raw HTMLImageElement that holds the loaded image data. Set src.src to point it at a URL or an object URL created from a File.
​
sprite
Sprite | null
An optional $g.Sprite instance. When present, the engine slices the image into frames according to the sprite configuration and advances the animation each frame. Set to null to display the full image without animation.

​
Examples

​
Attaching a static image by URL

const img = new Image();
img.src = 'path/to/texture.png';

figura.tipo = 'imagen';
figura.transform.imagen = new $g.Imagen(img);
$g.Dibujar();

​
Loading an image from a file input (browser pattern)

This is how the built-in editor works when a user selects a file: 
fileInput.onchange = function (event) {
    const img = new Image();
    img.src = URL.createObjectURL(event.target.files[0]);

    figura.tipo = 'imagen';
    figura.transform.imagen = new $g.Imagen(img);
    $g.Dibujar();
};

​
Initializing an empty Imagen slot

When you want to reserve the component slot before a file is chosen (as the editor does when the checkbox is ticked), pass null: 
figura.transform.imagen = new $g.Imagen(null);
Once the user picks a file, assign the real image: 
const img = new Image();
img.src = URL.createObjectURL(selectedFile);
figura.transform.imagen.src = img;
$g.Dibujar();

​
Adding sprite animation to an image

After the Imagen is attached, assign a Sprite to enable animation: 
figura.transform.imagen.sprite = new $g.Sprite(
    0,    // row (0-based)
    8,    // total columns
    48,   // frame height (px)
    48,   // frame width (px)
    0.12  // seconds per frame
);

​
Removing the image

figura.transform.imagen = null;
$g.Dibujar();

Build docs developers (and LLMs) love

Get started for freeTalk to us