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.

Engine.js is a browser-based 2D game engine editor that presents everything you need to build, configure, and preview a scene inside a single page. The interface is divided into five distinct regions arranged on a CSS grid — once you understand where each region lives and what it controls, the whole editor becomes intuitive to navigate.

​
Interface Layout

The editor’s <main> element uses a 12-column, 7-row CSS grid (grid-template-columns: repeat(12, 1fr)) that stretches to fill the viewport below the header. Each region of the editor is pinned to a specific slice of that grid, which is why the layout can shift cleanly when you change the canvas position (see Themes). 
┌─────────────────────────────────── HEADER ───────────────────────────────────┐
│  Engine.js logo                                        ▶ Play/Pause button   │
├─────────────┬──────────────────────────────┬───────────────────────────────  │
│             │                              │                                  │
│  Hierarchy  │         Canvas (4–10)        │       Attributes panel           │
│   panel     │      2D viewport             │    (visible when selected)       │
│             │                              │                                  │
├─────────────┴──────────────────────────────┴──────────────────────────────── │
│           Configuration bar  (layout · theme · info · audio · add objects)   │
└──────────────────────────────────────────────────────────────────────────────┘

​
The Five Regions

​
1. Header

The header bar spans the full width of the page and contains two elements:
  • Engine.js logo — styled with the NexaBold font; the dot between Engine and js is an orange circle (#punto).
  • Play / Pause button (#play) — a green button (background-color: #40e334) that toggles scene animation. Clicking Play calls $g.Animar(), hides the Attributes panel, clears the selection, removes click listeners from hierarchy objects, and starts any global audio track. Clicking Pause calls $g.DetenerAnimacion(), redraws the canvas, and restores click listeners so objects can be selected again.

​
2. Hierarchy Panel

The Hierarchy panel (<aside id="jerarquia">) sits on the left side of the canvas (grid columns 4→1 by default) and lists every object currently in $g.figuras. Each entry shows the object’s name alongside a colored type icon:
Object typeIcon class
Square (cuadrado)fas fa-square
Circle (circulo)fas fa-circle
Image / Spritefar fa-images
The panel auto-hides via validarJerarquia() when there are no objects in the scene, and reappears the moment the first object is added. During Play mode, items are rendered without click listeners so the scene cannot be interrupted by accidental selections. For a full guide to managing scene objects, see Hierarchy.

​
3. Canvas Viewport

The canvas (<div id="container-canvas">) occupies grid columns 4–10 by default and all six content rows (grid-row: 1/7). It wraps a standard HTML <canvas> element that Engine.js initialises via $g.InitCanvas(). This is the live 2D viewport where all scene objects are drawn and physics runs during Play mode. The canvas background defaults to #eee in the base stylesheet. Color themes can override this — for example, the oscuro theme sets it to white.

​
4. Attributes Panel

The Attributes panel (<div id="atributos">) occupies the right side of the canvas (grid columns 13→10 by default). It is hidden by default (display: none) and appears only when an object is selected in the Hierarchy or clicked on the canvas. Once visible it exposes every editable property of the selected object, grouped into sections:
  • Basic — name and object type
  • Rigid Body — gravity and collision toggles
  • Transform — position, size/radius, and fill color
  • Image — file upload, preview, and sprite sheet settings
  • Sound — activation type and audio file upload
The panel header also contains the trash, up-arrow, and down-arrow controls for deleting or reordering the selected object. See Attributes for the complete reference.

​
5. Configuration Bar

The configuration bar (<div id="configuracion">) lives at the bottom of the grid (grid-column: 1/13) and is split into two groups of controls: Left group — editor settings:
ButtonIconAction
Layout switcherfar fa-window-maximizeCycles through defaultEstructura, canvasDerecha, canvasIzquierda
Color themefas fa-paletteCycles through defaultColor, oscuro, azul
Info linkfas fa-info-circleOpens the author’s GitHub profile in a new tab
Right group — scene controls:
ButtonIconAction
Mute global audiofas fa-volume-muteClears sonidoGlobal; hidden until audio is loaded
Global audiofas fa-volume-downOpens file picker to load a global background audio track
Add circlefas fa-circleCreates a new circulo object at (100, 100) with radius 10
Add squarefas fa-squareCreates a new cuadrado object at (100, 100) with 20×20 size
Add imagefar fa-imagesCreates a new imagen object at (100, 100) with 100×100 size

​
UI State Variables

All interactive state is tracked by four global JavaScript variables declared in globals.class.js: 
let animando = false;         // true while the scene is playing
let objetoSeleccionado;       // reference to the currently selected Figura object
let sonidos = [];             // array of active sound objects in the scene
let sonidoGlobal;             // the global background Audio object (if loaded)
Knowing these variables is useful when scripting or debugging, because the editor’s event handlers read and write them directly.

​
Quick Navigation

Hierarchy Panel

Learn how to select, reorder, and remove scene objects from the Hierarchy.

Attributes Panel

Configure every property of a selected object: transform, physics, image, and sound.

Themes & Layouts

Switch color themes and canvas layout structures. Preferences persist via localStorage.
The editor automatically restores your last-used color theme and canvas layout on every page load. Both are saved to localStorage under the keys skin and estructura respectively, so your workspace looks exactly the way you left it every time you open the editor.

Build docs developers (and LLMs) love

Get started for freeTalk to us