Scenes & the Scene Editor

A scene can be a single backdrop — or a composed 2D stage: layered art, real buttons, living motion, and safe clickable objects that react to play. The Scene Editor is a Figma/PowerPoint-style 2D builder (deliberately not a virtual tabletop). The same renderer drives solo play, the live shared display, and the editor preview, so what you build is what plays.

Includes this Scene Editor reference plus the whole authoring workflow.

Layers

Open a scene node and launch the Scene Editor. A scene is a z-ordered stack of normalized layers (every coordinate is 0–1, so it scales identically from phone to the table’s display):

Image — backdrops and objects (crop, chroma-key, cover/contain fit).
Text — narration, labels, titles (horizontal + vertical align, word-wrap, size, color).
Shape — a rect/ellipse panel with fill, corner radius, and border.
Hotspot — a clickable region tied to a scene object.
Group — a container of child layers (see Groups below).

Aim for 1920×1080 (16:9) art — the canvas is the real 16:9 stage; keep key art and clickable objects toward the center.

Buttons & styling — no image upload needed

Make a real button from a shape + text + a click action: type a label right inside a shape (with align + word-wrap), add a border (including a double gold frame), and fill it with a solid color (with alpha) or a bounded fill preset. Style presets — Fantasy Gold, Parchment, Danger, Ghost, Panel Header — style the whole button in one click, and ＋Button stamps a ready-to-bind one. Every color control is the same standardized picker (swatch + hex/rgba + optional alpha), with transparency shown live.

Precise layout — grid, snap & smart guides

Turn on Show Grid and Snap (adjustable step). Smart guides appear while dragging — edge/center alignment and equal-spacing suggestions — and ⇿ Space H / ⇳ Space V distribute three or more layers to even gaps. Grid/snap are editor preferences; positions always save as plain normalized boxes.

Groups & responsive layout

Select 2+ layers (Ctrl/Cmd/Shift-click) and ▣ Group them into a container that moves as one. Lay children out free (absolute) or as a row/col with gap, padding, and justify/align — the “row of buttons” case — and clamp the width (min/max px) so the row never gets cut off when the stage resizes.

Living scenes — motion & lanes

Give any layer subtle motion (drift, float, sway, pulse, bob, shake, fade-in, fade-loop). Use roles/lanes (background · midground · foreground · ui · interactive · decorative) so decoration never steals a click — a drifting cloud over a chest can’t intercept it. Motion is never authoritative: animation is presentation only, outcomes always flow through the deterministic engine, and motion pauses under the reader’s reduced-motion setting.

Clickable objects — hit areas, fallbacks, accessibility

A hit area decouples the clickable target from the art box — put a big invisible tap target over a tiny chest. Every critical visual interaction should carry a text fallback (an accessible “☞ Inspect the chest” button below the scene for mobile / screen readers); the editor offers one automatically, and Campaign Health flags interactions that lack one, have a tiny target, or are accidentally inert.

Conditional layers & state variants

Make a scene react to play. Show only when… reveals a layer when a condition holds (spoils appear after the chest is opened); Disabled when… dims and locks it; and state variants swap a layer’s art / text / style by condition (chest closed→open, an NPC’s expression by trust, a door that glows after a ritual — the first matching variant wins). These read live run state each render; the engine never depends on them, so determinism is untouched.

Test Interactions — verify without a full run

Flip to ▶ Test Interactions. The editor auto-derives a chip for every flag, counter, clue, objective, relationship, and clock your scene references; toggle one and the canvas re-evaluates your conditional layers and variants live, using the same evaluator the runner uses. Confirm “open the chest → spoils appear and the art swaps” in one click. (To run a layer’s actions end-to-end, use ▶ Test play.)

Recipes — start from intent

The ＋Recipe menu stamps ready-made, correctly-wired starting points — a responsive button row, a splash (title + Play), or a clickable object (interactive lane + click action + enlarged tap target + an accessible fallback). Recipes compose only the normal layer vocabulary, so you can tweak the result freely.

Trigger chains (the clickable chest)

Bind a layer’s click (or a hotspot’s interaction) to an ordered chain of actions — the full vocabulary. The classic example:

Click the chest →
setObjectState / set a flag to open (a state-variant layer swaps its art automatically) →
playAudio a creak →
grantCoins +10 silver (into the purse ledger) →
showToast “You found 10 silver” →
optionally goto the next scene (or let a timer/Continue advance it).

Nothing is hardcoded — it’s the same actions you use everywhere, attached to a click. Art-swap-by-state is pure rendering, so it stays deterministic and replayable.

Backdrops, transitions & music

A scene without layers still shows its backdrop (an uploaded image or bundled scene-key art); missing images collapse gracefully — never an empty black box. Attach a transition (fade/slide) and a music track (reusing the soundboard); both play on entry, solo and live alike.

Not a VTT

The Scene Editor has no battle grid, tilemap, pathfinding, line-of-sight, world map, or arbitrary scripting. Any mini-games are bounded templates over layers + the closed action vocabulary. This keeps every scene safe, deterministic, and portable.

Next: Publishing & saves →