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 owns a Transform that describes where it lives on the canvas and how it looks. Position, dimensions, radius, fill color, image texture, and sound effect are all stored here. You do not need to construct a Transform independently — you typically create one inline when instantiating a Figura, and then mutate its properties at runtime to move or restyle the object.

​
Constructor

new $g.Transform({ x, y, anchura, altura, radio, relleno })
​
x
number
Horizontal canvas position in pixels, measured from the left edge of the canvas. For squares and images this is the left edge of the figure; for circles it is the center.
​
y
number
Vertical canvas position in pixels, measured from the top edge of the canvas. For squares and images this is the top edge; for circles it is the center.
​
anchura
number
Width of the figure in pixels. Used for 'cuadrado' and 'imagen' types. Ignored for circles (use radio instead).
​
altura
number
Height of the figure in pixels. Used for 'cuadrado' and 'imagen' types. Ignored for circles.
​
radio
number
Radius of the figure in pixels. Used exclusively for 'circulo' type figures. Ignored for squares and images.
​
relleno
string
A CSS-compatible hex color string (e.g. '#ff0000') used as the fill color for squares and circles. For image figures this value is stored but the engine renders the imagen.src texture instead.

​
Instance Properties

In addition to the constructor parameters above, a Transform instance exposes two component slots:
​
imagen
Imagen | null
An optional $g.Imagen instance. When set on an 'imagen'-type figure, the engine draws the image texture instead of a solid fill. Set to null to remove the texture.
​
sonido
Sonido | null
An optional $g.Sonido instance. When set, the engine plays the attached audio according to the sound’s activacion trigger mode. Set to null to detach the sound.

​
Examples

​
Creating a transform for a square

const t = new $g.Transform({
    x: 200,
    y: 150,
    anchura: 60,
    altura: 60,
    relleno: '#1abc9c'
});

​
Creating a transform for a circle

const tCircle = new $g.Transform({
    x: 300,
    y: 200,
    radio: 30,
    relleno: '#e67e22'
});

​
Modifying properties at runtime

All properties are mutable. After making changes, call $g.Dibujar() to see the result (or rely on the running animation loop to pick them up automatically). 
const t = new $g.Transform({
    x: 200,
    y: 150,
    anchura: 60,
    altura: 60,
    relleno: '#1abc9c'
});

// Move the figure
t.x += 10;
t.y += 5;

// Resize it
t.anchura = 80;
t.altura = 80;

// Change color
t.relleno = '#e67e22';

$g.Dibujar();

​
Attaching an image to a transform

const img = new Image();
img.src = 'path/to/texture.png';
figura.transform.imagen = new $g.Imagen(img);
$g.Dibujar();

​
Attaching a sound to a transform

const audio = new Audio();
audio.src = 'path/to/effect.mp3';
figura.transform.sonido = new $g.Sonido({
    src: audio,
    activacion: 'colision'
});

Build docs developers (and LLMs) love

Get started for freeTalk to us