Engine.js is a fully browser-based visual editor for building 2D canvas game scenes. It gives you a ready-made editing environment — hierarchy panel, live canvas, attributes inspector, and configuration toolbar — all in a single HTML file you open directly in any modern browser. There’s no CLI, no bundler, and no server required: design objects, configure physics, attach sprites and sounds, and hit Play to watch your scene come to life.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 editor interface and source code are written in Spanish (e.g. “Jerarquía”, “Atributos”, “Rígido”). This documentation uses English throughout to describe those panels and properties.
What is Engine.js?
Engine.js is a zero-dependency, browser-native 2D game engine editor built on the HTML5 Canvas API. The engine core is loaded as an ES module fromengine/index.js, which is referenced directly in index.html:
$g, which is available in the browser’s window scope the moment the page loads. You use $g to create game objects, add them to the scene, trigger drawing, and start or stop the animation loop — both from the editor UI and from your own scripts.
The Editor Interface
The editor is divided into five distinct regions that together form the game-building workflow:| Region | Element ID | Purpose |
|---|---|---|
| Header | header | Displays the Engine.js logo and the green Play / Pause button |
| Hierarchy Panel | #jerarquia | Lists every object currently in the scene; click an entry to select it |
| Canvas | #container-canvas | The live game viewport rendered via <canvas> |
| Attributes Panel | #atributos | Appears on the right when an object is selected; exposes all configurable properties |
| Configuration Toolbar | #configuracion | Bottom bar with buttons to add objects, switch color themes, switch layouts, and manage global audio |
Header — Play & Pause
The header contains the Play button (#play), styled in green (#40e334). Clicking it starts the engine animation loop by calling $g.Animar(). While animating, the button switches to a Pause icon; clicking it again calls $g.DetenerAnimacion() and redraws the static scene with $g.Dibujar(). The Attributes panel is hidden during play mode so you can observe the scene without distraction.
Hierarchy Panel
The Hierarchy panel (#jerarquia) lists all objects in the current scene. Each entry shows the object’s name alongside a colored icon that reflects its type and fill color. The panel is hidden when the scene is empty and automatically shown when at least one object exists. Click any entry to select that object and open its Attributes panel.
Canvas
The Canvas (<canvas>) sits inside #container-canvas and is the rendering surface for all game objects. Its position in the 12-column CSS grid layout can be shifted by the layout switcher in the configuration toolbar.
Attributes Panel
When you select an object in the Hierarchy panel (or click it directly on the canvas), the Attributes panel slides into view on the right side. It exposes every configurable property of the selected object, including:- Name — free-text label shown in the Hierarchy panel
- Type —
cuadrado(square),circulo(circle), orimagen(image) - Rigid — toggle to enable physics; exposes Gravity and Collision sub-fields
- Transform — X, Y position; Width/Height (squares & images) or Radius (circles); Fill color
- Image — file picker to load an image asset; enables the Sprite sub-panel for sheet animation
- Sound — file picker to attach audio with a trigger type:
inicial,colision, orcolisionInversa
Configuration Toolbar
The bottom toolbar (#configuracion) contains two groups of controls:
Left group — editor settings:
- Layout switcher (window icon,
#ventana) — cycles through three canvas layout structures - Color theme switcher (palette icon,
#colores) — cycles through three color themes - Info link — opens the author’s GitHub profile
- Global audio (volume icon,
#agregarSonido) — attaches a background music track that plays during simulation - Add circle (
#agregarCirculo) — adds a new circle object to the scene - Add square (
#agregarCuadro) — adds a new square object to the scene - Add image (
#agregarImagen) — adds a new image object to the scene
The $g Global Namespace
The entire Engine.js API lives on the $g object, which is populated by engine/index.js. The most important members you’ll use directly are:
| Member | Type | Description |
|---|---|---|
$g.Figura | Class | Represents a game object (square, circle, or image) |
$g.Transform | Class | Holds positional and visual data for a Figura |
$g.Rigido | Class | Attaches physics (gravity + collision) to a Figura |
$g.Imagen | Class | Wraps an <img> element to render as a texture |
$g.Sprite | Class | Defines sprite-sheet animation parameters |
$g.Sonido | Class | Attaches an audio trigger to a Figura |
$g.figuras | Array | Live array of all Figura objects in the scene |
$g.AgregarFigura(figura) | Method | Adds a Figura to the scene |
$g.Dibujar() | Method | Renders one static frame to the canvas |
$g.Animar() | Method | Starts the animation loop (called by Play) |
$g.DetenerAnimacion() | Method | Stops the animation loop (called by Pause) |
$g.InitCanvas(canvas, container) | Method | Binds the engine to a <canvas> element |
$g.DetectarClick(enable) | Method | Enables or disables click selection on canvas objects |
$g.clickListener | Callback | Function called whenever an object is clicked on the canvas |
Object Types
Engine.js supports three primitive object types, each created as a$g.Figura instance with a matching tipo string:
Square (cuadrado)
Rectangular objects defined by
x, y, anchura (width), altura (height), and relleno (fill color). Supports image textures, sprite animation, physics, and sound.Circle (circulo)
Circular objects defined by
x, y, radio (radius), and relleno. Supports physics and sound. Image textures are not available for circles.Image (imagen)
Objects that render a loaded image asset. Defined by
x, y, anchura, altura. Supports sprite-sheet animation and sound.Sprite Animation
Enabled on image objects via
$g.Sprite. Configure rows, columns, individual frame dimensions, and playback speed (seconds per frame).Supported Features
Physics & Rigid Bodies
Attach a
$g.Rigido instance to any object to enable gravity. Set a gravity value and toggle collision detection per object. Physics runs during the animation loop.Sprite Sheet Animation
Load a sprite sheet onto any image object and configure it with
$g.Sprite: number of rows, columns, individual frame size, and playback speed in seconds per frame.Per-Object Sound
Attach audio to any object via
$g.Sonido. Choose a trigger: inicial (on play start), colision (on collision), or colisionInversa (on inverse collision). Requires Rigid to be enabled for collision-based triggers.Global Background Audio
Load a global audio track from the configuration toolbar. It plays automatically when the Play button is pressed and pauses when the simulation stops.
Color Themes
Three built-in themes cycled by the palette icon: default (dark header, light panels), dark (
oscuro — dark background, white text), and blue (azul — blue header, light grey background). The active theme is persisted in localStorage.Canvas Layout Structures
Three layout structures cycled by the window icon: default (canvas center), canvasDerecha (canvas right), and canvasIzquierda (canvas left). The active layout is persisted in
localStorage.No Installation Required
Engine.js has no build step, no package manager, and no server dependency. The entire editor is a singleindex.html file that loads its assets with relative paths. To run it:
- Clone or download the repository.
- Open
index.htmlin any modern browser that supports ES modules (Chrome, Firefox, Edge, Safari).