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.
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.
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.
Game	The play view: your game's own `index.html` running when you press Play. See Play mode.
Assets	The project's `assets/` folder: folders, search and a type filter. Renaming or moving a file rewrites every scene, prefab and material that refers to it.
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….
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.

Not yet: the 2D tools#

A Tilemap painter, an Atlas packer and a Sprite Animation editor are planned for the 2D phase and are not in the editor yet. Until they are, edit .tilemap.json, .atlas.json and .spriteanim.json as files (the editor reloads them when they change), and import Tiled or LDtk maps with the engine's ignifx import tilemap command.

Not yet: the import pipeline#

Dropping source files into Assets and converting them on import (glTF optimisation, image resizing, KTX2 encoding, audio transcoding, all as WebAssembly inside the editor) is in progress. Models are glTF 2.0 only, by design: export .glb or .gltf from Blender or your modelling tool.

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.