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.

Every Figura carries exactly one Transform. It is the object the engine reads every frame to decide where to draw a figure and how it should look. Position coordinates, pixel dimensions, fill color, an optional image or sprite, and an optional sound effect are all consolidated into a single Transform instance. Understanding its properties is essential for placing and styling anything on the canvas.

​
Constructor

new $g.Transform({ x, y, altura, anchura, radio, relleno, imagen, sonido })
​
x
number
required
The horizontal canvas coordinate of the figure’s origin, in pixels. For rectangles this is the left edge; for circles it is the centre point.
​
y
number
required
The vertical canvas coordinate of the figure’s origin, in pixels. For rectangles this is the top edge; for circles it is the centre point. Physics moves this value downward each frame.
​
altura
number
default:"0"
Height of the figure in pixels. Used by 'cuadrado' figures for fillRect() and by physics to calculate floor boundaries. Ignored for 'circulo' figures when radio is set (see below).
​
anchura
number
default:"0"
Width of the figure in pixels. Used by 'cuadrado' figures for fillRect() and by collision checks. Ignored for 'circulo' figures when radio is set.
​
radio
number
default:"0"
Radius in pixels for 'circulo' figures. When this value is non-zero, the constructor automatically sets both anchura and altura to the same value as radio, making the collision bounding box match the visible circle.
​
relleno
string
default:"\"#000000\""
A CSS color string applied as fillStyle before drawing. Accepts any valid CSS color value: hex strings ('#ff0000'), named colors ('red'), rgb()/rgba() notation, etc.
​
imagen
Imagen | null
default:"null"
An Imagen instance (optionally containing a Sprite) used when the parent figure’s tipo is 'imagen'. Leave as null for 'circulo' and 'cuadrado' figures — the engine ignores this property for those types.
​
sonido
Sonido | null
default:"null"
A Sonido instance that attaches audio to this figure. The engine triggers playback based on the Sonido.activacion mode: 'inicial' (plays on loop start), 'colision' (plays while colliding), or 'colisionInversa' (plays while airborne). See Sound for details.

​
Examples by Shape Type

​
Circle Transform

const circleTransform = new $g.Transform({
  x: 400,       // centre x
  y: 100,       // centre y
  radio: 30,    // radius — also sets anchura and altura to 30
  relleno: '#e74c3c',
});

// After construction:
// circleTransform.anchura === 30
// circleTransform.altura  === 30

​
Rectangle Transform

const rectTransform = new $g.Transform({
  x: 50,         // left edge
  y: 200,        // top edge
  anchura: 120,  // width
  altura: 80,    // height
  relleno: '#2ecc71',
});

​
Static Image Transform

const imgTransform = new $g.Transform({
  x: 100,
  y: 300,
  anchura: 64,   // drawn width
  altura: 64,    // drawn height
  imagen: new $g.Imagen('assets/gem.png'),
});
The engine passes transform.anchura and transform.altura as the destination dimensions to drawImage(), so you can scale the image up or down by changing those values.

​
Sprite Transform

const spriteTransform = new $g.Transform({
  x: 100,
  y: 300,
  // anchura/altura are ignored for rendering — Sprite's own dimensions are used
  imagen: new $g.Imagen('assets/run.png', new $g.Sprite({
    anchura: 64,    // frame width
    altura: 64,     // frame height
    cols: 6,        // number of animation frames (columns)
    row: 0,         // spritesheet row to play
    velocidad: 0.12 // seconds between frames
  })),
});
When transform.imagen contains a Sprite, the rendered size is taken from Sprite.anchura and Sprite.altura — not from transform.anchura or transform.altura. Setting those properties on the transform will have no effect on how the sprite appears. Likewise, floor-collision for sprite figures uses sprite.altura as the height boundary instead of transform.altura.

​
Transform with Sound

const bouncer = new $g.Transform({
  x: 200,
  y: 50,
  anchura: 50,
  altura: 50,
  relleno: '#9b59b6',
  sonido: new $g.Sonido('assets/bounce.mp3', 'colision'),
});
The sound above will play whenever the figure is in a collision state and pause when it is not. See Sound for all activation modes.

​
Moving a Figure at Runtime

Because transform is a plain object, you can update x and y directly at any time — even inside a custom loop or event handler — and the change takes effect on the next drawn frame. 
// Teleport a figure to the centre of the canvas
player.transform.x = Environment.anchura / 2;
player.transform.y = Environment.altura / 2;
For smooth horizontal movement, update transform.x each frame using the frame counter (Environment.contador) or a velocity variable that you manage yourself. The engine only handles vertical (gravity) movement automatically.

Figures

How Transform fits inside a Figura.

Images & Sprites

Loading and configuring Imagen and Sprite objects.

Sound

Attaching and triggering audio with Sonido.

Transform API Reference

Complete API reference for the Transform class.

Build docs developers (and LLMs) love

Get started for freeTalk to us