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 Hierarchy panel is the primary navigator for your scene. It maintains a live list of every object currently in $g.figuras and lets you select, inspect, and reorder them without ever touching the canvas directly. Understanding how the Hierarchy works — especially how render order relates to array position — is essential for building well-layered scenes.

​
Panel Structure

The Hierarchy panel is the <aside id="jerarquia"> element. It renders inside a scrollable container with its own padding so long object lists stay readable. Internally it contains a single <div class="objetos"> node whose children are rebuilt from scratch every time actualizarLista() is called. Each object appears as a <p> element whose id matches the object’s unique id field: 
┌────────────────────────────────────┐
│  Jerarquía                         │
├────────────────────────────────────┤
│  Player           ■  (square icon) │
│  Ground           ■                │
│  Coin             ●  (circle icon) │
│  Background       🖼  (image icon)  │
└────────────────────────────────────┘

​
Object type icons

The colored icon at the right of each row makes it easy to identify an object’s type at a glance. The icon color is driven by the object’s transform.relleno fill property so it always matches what you see on the canvas.
Type valueIcon classColor source
cuadradofas fa-squareobj.transform.relleno
circulofas fa-circleobj.transform.relleno
imagen / spritefar fa-images(no color applied)

​
Auto-hide Behavior

The Hierarchy panel is invisible (display: none) by default. The validarJerarquia() function runs every time the object list changes and shows or hides the panel based on whether $g.figuras contains any entries: 
function validarJerarquia() {
  if ($g.figuras.length == 0) {
    $("#jerarquia").style.display = 'none';
  } else {
    $("#jerarquia").style.display = 'block';
  }
}
This means the panel appears automatically when you add your first object and disappears again when the last object is deleted — you never see an empty, blank panel.

​
Selecting Objects

Click any row in the Hierarchy to select the corresponding scene object. Selecting an object does three things:
  1. Adds the seleccionado CSS class to the clicked row — a blue highlight (background-color: #3481E3, white text) that clearly marks the active selection.
  2. Sets the global objetoSeleccionado variable to the matching Figura instance from $g.figuras.
  3. Shows the Attributes panel (#atributos) and populates it with all of the object’s current property values.
// Simplified view of what happens on row click (seleccionarObjeto)
this.classList.add('seleccionado');
objetoSeleccionado = $g.figuras.find((x) => x.id == this.id);
$("#atributos").style.display = 'block';
You can also select objects by clicking them directly on the canvas. The $g.clickListener callback (registered via $g.DetectarClick()) calls actualizarLista() and then seleccionarObjeto(false) so the Hierarchy highlights the correct row even when the selection originates from the canvas.
During Play mode the actualizarLista(true) call is made with removerListeners = true. This strips the onclick handler and the objeto-seleccionable cursor class from every row, making the Hierarchy display-only while the scene is running. Click listeners are restored automatically when you press Pause.

​
Render Order and Layers

Objects in $g.figuras are drawn in array order: index 0 is the bottommost layer and the last index is the topmost. The Hierarchy list mirrors this order top-to-bottom, so the first item in the panel is drawn first (behind everything else) and the last item is drawn on top. You can change an object’s layer position using the up (↑) and down (↓) arrow buttons in the Attributes panel header. These perform an in-place splice on $g.figuras: 
// Move selected object up one layer (rendered in front of its previous position)
let posicion = $g.figuras.findIndex((x) => x.id == objetoSeleccionado.id);
$g.figuras.splice(posicion - 1, 0, $g.figuras.splice(posicion, 1)[0]);
actualizarLista();
$g.Dibujar();

// Move selected object down one layer (rendered behind its previous position)
$g.figuras.splice(posicion + 1, 0, $g.figuras.splice(posicion, 1)[0]);
actualizarLista();
$g.Dibujar();
After every reorder the list is rebuilt and the canvas is redrawn immediately so you can see the layering change in real time.

​
Deleting Objects

To remove an object from the scene, select it and click the trash icon (far fa-trash-alt) in the Attributes panel header. The handler splices the object out of $g.figuras by its id, hides the Attributes panel, clears objetoSeleccionado, and triggers a full redraw: 
$("#eliminar").onclick = function () {
  $g.figuras.splice(
    $g.figuras.findIndex((x) => x.id == objetoSeleccionado.id),
    1
  );
  $("#atributos").style.display = 'none';
  objetoSeleccionado = null;
  actualizarLista();
  $g.Dibujar();
  validarJerarquia();
};
If that was the last object in the scene, validarJerarquia() will automatically hide the Hierarchy panel.

​
Adding New Objects

New objects are added from the configuration bar at the bottom of the editor. Each button creates a Figura with sensible defaults and places it at canvas position (100, 100):
ButtonDefault properties
fas fa-square (Add square)tipo: "cuadrado", 20×20, fill #000000
fas fa-circle (Add circle)tipo: "circulo", radius 10, fill #000000
far fa-images (Add image)tipo: "imagen", 100×100, fill #000000
After creation, $g.AgregarFigura() registers the object, $g.Dibujar() renders it, and actualizarLista() refreshes the Hierarchy so the new row appears immediately.
Newly created objects are appended to the end of $g.figuras, which means they start at the topmost render layer. Move them down with the ↓ arrow button if you need them to appear behind existing objects.

Build docs developers (and LLMs) love

Get started for freeTalk to us