Getting started with the editor

Create a project from a template or open one you already have, then find your way around the panels. The editor is a preview: this is how it works on its main branch today.

Screenshot to come: the editor with the 3d-third-person template open, Scene and Game in the centre, Hierarchy on the left, Inspector on the right, Assets and Console below.

Create a project from a template#

File → New Project… asks for a name, a parent folder, the kind (2D or 3D), a template and whether to add the desktop variant:

Template	Kind
2D top-down	2D
2D side-scroller	2D
3D third person	3D
3D first person	3D

The editor runs the engine's own scaffolder (@ignifx/cli, at the engine version the editor is pinned to) with its bundled toolchain, then opens the new project the way it opens any other: the trust question, the install, the dev server. The templates are the same four the command line creates, with a title screen, pause menu, settings, rebinding and saves already in place.

Open a project#

File → Open Project… (Ctrl+O, ⌘O on macOS) opens any ignifx project folder, and File → Open Recent lists the ones you opened before. The welcome panel shows the recent projects too.

The first time you open a folder the editor asks whether to trust it, because opening a project runs its scripts (see How the editor relates to your project). Then it installs the dependencies if they are missing or out of date and starts the project's dev server; the status bar shows each step. File → Close Project stops the dev server.

The panels#

The default layout puts Scene and Game in the centre, Hierarchy on the left, Inspector and Settings on the right, and Assets, Console and Build under the centre. Every panel docks, tabs and floats; the Scene and Game views stay alive while you rearrange them.

Panel	What it does
Hierarchy	The open scene's entities as a tree. Create (`Shift+Ctrl+N`), create a child, duplicate (`Ctrl+D`), delete, copy and paste entities, rename, drag to reparent, multi-select. Drop a prefab or model from Assets to place it; a ◆ marks a prefab instance.
Inspector	The selected entity: name, active, static, layer and tags, the Transform, and one section per component, generated from the component's schema. Each section can be enabled or disabled, moved, copied, pasted and reset. Add Component lists the engine's and your project's components. On a prefab instance, edits become overrides.
Scene	The world in edit mode. Move, rotate and scale gizmos, axes, snapping, Frame selection. Click to select. Drop assets onto it. View → Animate Materials switches animated materials on or off, and View → Grid (`Ctrl+G`) the grid; the panel's strip picks the grid's spacing, 0.1 to 10 m. Both are remembered per project, in the editor's own data. Selected colliders are outlined, and 2D colliders get handles.
Game	The play view: your game's own `index.html` running when you press Play. While nothing plays, it shows a 3D scene through the scene's own camera, about 12 frames a second. See Play mode.
Assets	The project's `assets/` folder: folders, search and a type filter, with thumbnails for models and prefabs. Renaming or moving a file rewrites every scene, prefab and material that refers to it. Drop files from your file manager here to import them; each tile shows its import state.
Console	Log lines from the editor, the scene view and the game, with their origin, level filters and a `file:line` link that opens your code editor at that line. TypeScript errors from the project's own `tsc` appear here as you save.
Build	Web and desktop builds, installers, the optional three-OS workflow and publish targets. See Building and publishing.
Settings	The project's settings (`ignifx.settings.json`), one section per settings group the engine registers: layers, sorting layers, rendering, physics, 2D, input, UI. Opened with File → Project Settings….
Tilemap, Atlas, Sprite Animation	Paint tilemaps, pack sprite atlases and edit sprite animation clips. See 2D tools.
Material	Edits the `.material.json` you select or double-click in Assets. A PBR or Standard material shows its fields; a shader material shows the uniforms, textures and defines its `.wgsl` declares in `// @ignifx` pragmas. Changes are written to the file and show live in the scene view.

On macOS the shortcuts use ⌘ where this page says Ctrl.

The keyboard reaches every panel: F6 moves between groups of panels, and Accessibility and the keyboard has the keys for each one.

Scripts and your code editor#

File → New Script… writes a component script under src/scripts/ from a template, with your project's type id namespace, and opens it in your code editor. File → Choose External Editor… picks VS Code, Cursor, WebStorm, Zed or the system default. When you save a script, the engine's hot reload updates the scene view and the game without a page reload, and the Inspector picks up new fields.

Next#

Editing scenes: how edits, undo and saving work.