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.

The Attributes panel is the control center for any selected object. It is hidden by default and slides into view the moment you click a scene object — either on the canvas or in the Hierarchy panel. Every change you make is applied live: the canvas redraws and the Hierarchy icon updates without requiring a save step. The sections below walk through each property group in the order they appear in the panel.

​
Panel Header Controls

Before diving into properties, note the three icons in the Attributes panel header (#header_atributos). These act on the selected object as a whole:
IconElement IDAction
far fa-trash-alt#eliminarRemoves the object from $g.figuras, clears the selection, and hides the panel
fas fa-arrow-up#subirMoves the object one position earlier in $g.figuras (one layer down in render order)
fas fa-arrow-down#bajarMoves the object one position later in $g.figuras (one layer up in render order)
See the Hierarchy page for a deeper explanation of how array order maps to render layers.

​
Property Groups

These two fields are always visible regardless of object type.Name (nombre)A plain text input (<input type="text" id="nombre">). As you type, the onkeyup handler updates obj.nombre directly and calls actualizarLista() so the new name appears in the Hierarchy list immediately.
// Triggered on every keyup in the name field
obj.nombre = this.value;
Type (tipo)A <select> dropdown with three options:
Option valueDisplay label
cuadradoCuadrado (Square)
circuloCírculo (Circle)
imagenImagen (Image)
Changing the type calls esCirculo(), esCuadro(), or esImagen() to show and hide the appropriate sub-fields in the Transform section, then redraws the canvas.
Transform controls position and size on the canvas. Which fields appear depends on the object’s type.Position
FieldIDPropertyTypes
X#xobj.transform.xAll
Y#yobj.transform.yAll
Size
FieldIDPropertyTypes
Height (Altura)#alturaobj.transform.alturacuadrado, imagen
Width (Anchura)#anchuraobj.transform.anchuracuadrado, imagen
Radius (Radio)#radioobj.transform.radiocirculo only
All position and size values are number inputs. Changes are applied on onkeyup with parseFloat() so decimal values are accepted.Fill color (Relleno)A native <input type="color"> color picker. On change the new hex value is written to obj.transform.relleno and the canvas is immediately redrawn. The color also updates the matching icon in the Hierarchy list.
// Color change handler
case 'relleno':
  obj.transform.relleno = this.value;
  break;
The Rígido section is toggled by a checkbox (#rigido_checkbox). When unchecked, obj.rigido is null and the object has no physics behavior. Checking the box creates a new $g.Rigido() instance and reveals two sub-controls.Gravity (Gravedad)A number input whose onkeyup handler writes to obj.rigido.valor:
case 'gravedad':
  obj.rigido.valor = parseFloat(this.value);
  break;
CollisionA checkbox (#colision, checked by default). When you uncheck it, obj.rigido.sinColision is set to true, making the object pass through others without triggering collisions:
case 'colision':
  objetoSeleccionado.rigido.sinColision = !this.checked;
  break;
Collision-based sounds require Rigid Body to be enabled. If you attach a sound with activation type colision or colisionInversa but the Rigid Body toggle is off, the sound will never play.
The Imagen section is available for cuadrado and imagen object types. It is shown or hidden by a checkbox (#imagen_checkbox). Checking it creates a new $g.Imagen(null) instance on the object.File uploadA <input type="file" id="imagen"> file picker. On selection:
  1. A FileReader reads the file as a data URL and sets the <img id="preview"> thumbnail so you see the image immediately in the panel.
  2. An Image object is created from the file URL and stored in obj.transform.imagen as a $g.Imagen instance.
  3. The canvas is redrawn with the new image.
let img = new Image();
img.src = URL.createObjectURL(this.files[0]);
objetoSeleccionado.transform.imagen = new $g.Imagen(img);
$g.Dibujar();
Preview thumbnailThe <img id="preview"> element (200 px tall, object-fit: contain) shows the selected image inline in the Attributes panel. Its src is restored when you re-select an object that already has an image loaded.

​
Sprite Sub-section

The Sprite sub-section is nested inside the Image section and revealed by its own checkbox (#sprite_checkbox). Enabling it creates a $g.Sprite instance attached to obj.transform.imagen.sprite. All five fields update together on every onkeyup event:
FieldIDDescription
Rows#rows_spriteNumber of rows in the sprite sheet (row = value - 1 internally)
Columns#cols_spriteNumber of columns in the sprite sheet
Frame height#altura_spriteHeight of a single sprite frame in pixels
Frame width#anchura_spriteWidth of a single sprite frame in pixels
Speed#velocidad_spriteSeconds per frame for the animation playback
obj.transform.imagen.sprite.row     = parseInt($("#rows_sprite").value) - 1;
obj.transform.imagen.sprite.cols    = parseInt($("#cols_sprite").value);
obj.transform.imagen.sprite.altura  = parseFloat($("#altura_sprite").value);
obj.transform.imagen.sprite.anchura = parseFloat($("#anchura_sprite").value);
obj.transform.imagen.sprite.velocidad = parseFloat($("#velocidad_sprite").value);
The Sonido section is toggled by a checkbox (#sonido_checkbox). Enabling it creates a new $g.Sonido({ src: null, activacion: 'colision' }) instance on the object.Activation type (tipo_sonido)A <select> dropdown that controls when the sound plays:
ValueLabelBehavior
inicialInicialPlays when the scene starts (Play is pressed)
colisionColisiónPlays when this object collides with another
colisionInversaColisión inversaPlays on the object being collided into
The selected value is stored in obj.transform.sonido.activacion.Audio fileA <input type="file" id="sonido"> file picker. On selection an Audio object is created from the file URL and stored in obj.transform.sonido.src. The file name is also written to obj.transform.sonido.src.title and displayed in the <span id="nombre_audio"> label so you can confirm which file is loaded without needing to re-open the picker.
let audio = new Audio();
audio.src = URL.createObjectURL(this.files[0]);
objetoSeleccionado.transform.sonido.src = audio;
objetoSeleccionado.transform.sonido.src.title = this.files[0].name;
$("#nombre_audio").innerHTML = this.files[0].name;
Sounds with activation type colision or colisionInversa require the Rigid Body toggle to be active on the object. Without rigid body physics, collision events are never fired and the audio will not play.

​
Global Audio Track

In addition to per-object sounds, the editor supports a single global background audio track that plays for the entire scene. Load it via the speaker icon (fas fa-volume-down) in the configuration bar, which opens a hidden <input type="file" id="sonidoGlobal"> file picker. The audio is stored in the sonidoGlobal variable and:
  • Plays automatically when you press the Play button (if a track is loaded).
  • Pauses when you press the Pause button.
  • Can be removed at any time by clicking the mute icon (fas fa-volume-mute), which appears next to the speaker button after a file is loaded.

Build docs developers (and LLMs) love

Get started for freeTalk to us