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.

Every Figura in Engine.js carries a Transform — the single object that describes where on the canvas the figure lives, how large it is, what colour it is filled with, and which image and sound assets are attached to it. You create a Transform when constructing a figure, and you modify it at runtime to move, resize, or restyle objects.

​
Constructor

new $g.Transform({ x, y, anchura, altura, radio, relleno })
All properties are passed as a single configuration object. For squares and images you will use x, y, anchura, altura, and relleno. For circles, use x, y, radio, and relleno.

​
Constructor parameters

​
x
number
Horizontal position of the figure in canvas pixels, measured from the left edge of the canvas.
​
y
number
Vertical position of the figure in canvas pixels, measured from the top edge of the canvas.
​
anchura
number
Width in pixels. Used by "cuadrado" (square) and "imagen" (image) figures. Ignored by circles.
​
altura
number
Height in pixels. Used by "cuadrado" and "imagen" figures. Ignored by circles.
​
radio
number
Radius in pixels. Used exclusively by "circulo" (circle) figures. Has no effect on squares or images.
​
relleno
string
Fill colour as a CSS hex string (e.g. "#ff0000" for red). This controls the solid fill of squares and circles, and acts as the background colour placeholder for image figures.

​
Runtime properties

In addition to the constructor arguments, the Transform instance also holds two optional asset references that are set after construction:
​
imagen
Imagen | null
An $g.Imagen instance wrapping an HTMLImageElement. When set, the engine draws the image instead of (or in addition to) the fill colour. See the Sprites page for sprite sheet animation.
​
sonido
Sonido | null
A $g.Sonido instance defining the sound effect attached to this figure. See the Sounds page for the full activation reference.

​
Code example

let transform = new $g.Transform({
    x: 150,
    y: 200,
    anchura: 80,
    altura: 80,
    relleno: "#2ecc71"
});

let figura = new $g.Figura({
    tipo: "cuadrado",
    transform: transform
});
$g.AgregarFigura(figura);
$g.Dibujar();

​
Modifying a transform at runtime

Because $g.figuras holds references to the live objects, you can update any transform property directly and then redraw the scene: 
// Find the figure you want to change
let obj = $g.figuras.find(f => f.id === myId);

// Move it to a new position
obj.transform.x = 300;
obj.transform.y = 150;

// Change its fill colour
obj.transform.relleno = "#9b59b6";

// Reflect changes on the canvas
$g.Dibujar();
When $g.Animar() is running, transform changes take effect on the very next frame — there is no need to call $g.Dibujar() manually during animation.

​
A note on circles

For "circulo" figures, the engine uses only radio and relleno from the transform. Setting anchura or altura on a circle’s transform has no visual effect and does not influence collision detection. Always use radio when working with circles.

​
Summary table

PropertyApplies toDescription
xall typesHorizontal canvas position in pixels
yall typesVertical canvas position in pixels
anchurasquare, imageWidth in pixels
alturasquare, imageHeight in pixels
radiocircleRadius in pixels
rellenoall typesCSS hex fill colour string
imagenanyOptional Imagen asset reference
sonidoanyOptional Sonido asset reference

Build docs developers (and LLMs) love

Get started for freeTalk to us