The stage editor
site/editors/stages.html — source site/editors/stg-editor.ts. Open http://localhost:5173/editors/stages.html.
Load a STG stage — the screens that are not rooms: the UI band (MAIN.STG), the inventory (INVEN1.STG), the deck plan (MAP.STG), a mini-game board (BLKJACK.STG) — and it comes apart into its flats.
Dust's are .FLT, DreamFactory 1's name for a stage, and its container-0 header is at different offsets — but the reader and every patch take their tables from the file's own version tag, so an edit lands on the byte the name came out of and its twenty open here too. Timelapse's stages are .STG and 640×480; the caption reads the size out of the file rather than assuming one.
What it shows
| Part | What you can do with it |
|---|---|
| a flat | pick one, see its full-screen art, and rename it. Unlike the shop's name this one is a lookup key — gotoflat/transtoflat ask for it and currentflat() answers it — so the scripts that call for a flat have to be renamed with it |
| its regions | the clickable "buttons" sendtobutton/pointinbutton reach, drawn over the picture with their names: rename one, or move/resize its rectangle by its four edges and watch the overlay follow. The rectangles are stored top/left/bottom/right and shown x-first, in screen pixels, because a flat is the whole screen |
| the art | export it as a PNG or replace it. A flat can be a delta over the one before it, as an animated stage's are (Timelapse's, and the v5 stage of #441), so each is shown drawn over the flat before it in the table, the order the game plays them in |
| the scripts and palette | the stage main script (the container the header names at +44 — MAIN.STG's defines the game-wide gotospecial), every flat's, and every region's on the selected flat, decompiled on demand; plus all 256 colours, which a full-screen flat uses where a room view uses 128 |
A flat with no click-logic container has nothing clickable on it, and the page says that rather than showing an empty list.
Exporting
Export .stg repacks the container file and downloads it. The three edits that are not art are copy-on-write patches on a single container each — the flat names in container 0's flat table, a region's name and rectangle in that flat's click-logic container (patchFlatName, patchRegionName, patchRegionRect in engine/src/df/stg.ts) — so everything you did not touch is the byte it was (see taoot/tests/auto/stg-editor.ts).
The stage this port wrote itself
One entry in the file picker is not CyberFlix's: lang.stg, the language chooser (npm run mklang -w taoot builds it; it ships in taoot/public/, which every package's Vite plugin lists alongside its gamefiles/). It shows the whole round trip in one file — a stage this repository wrote, with two flats, six click regions and a compiled mousedown handler each, which the editor reads like any other. Restyle its art by PNG import, nudge the button rectangles, export, drop the result over public/lang.stg, and the game still boots into it: the click regions are where the chooser reads its layout from, so the dimming of uninstalled languages follows whatever you moved.
Art import is also the fix for the one thing the generator cannot do — its 5×8 pixel font has no Cyrillic or CJK, so Русский and 日本語 are drawn as RUSSIAN and JAPANESE until someone imports art with a real font.
See writing a stage for the builder, and Languages & the chooser for what the file does at runtime.
See also
- STG — stage files & the UI — what the structures are
- Stage & UI — how the runtime drives flats and overlays
- The browser editors — what the pages share
- Languages & the chooser —
lang.stg, the stage this repository authored