Prefabs & list binding

A prefab is reusable UI (task panels, achievement cards, shop pages …) — design once, reference everywhere. The mental model is three steps: design a card → configure a list → mount it.

① Design a card

Create one under “Prefabs” in the sidebar and use the visual canvas (1920×1080; drag/resize/rotate directly). Design at real size: decorations anywhere, and the components that should reflect data (image, texts) placed where you want them. The card doesn’t know about data — it’s a pure layout shell.

Manage layers in the node tree: later nodes render on top; use ↑↓ to reorder.

② Configure a list

In another prefab (e.g. the task panel) add a list node:

  1. Data source: what one card represents — picked attributes, items, achievements, collections, or a data table
  2. Card prefab: pick the card from ①. Cell size auto-fills to the card’s design size (changing it scales proportionally)
  3. Bindings: card components ← data fields (image ← icon, text ← display name / value). Unbound components stay pure decoration

At runtime the list clones the card per data record — when data changes, the UI follows.

③ Mount it

  • Timeline mount: add a “prefab mount” on a scene’s timeline — appears at its start time, unmounts at duration (-1 = until scene end)
  • Open via button: any spot with action “open panel”; put a spot with “close panel” inside the prefab as its close button

Details

  • Prefabs can reference prefabs (sub-prefabs); circular references are broken automatically
  • Lists support columns, gap, per-side padding and scrolling
  • Item filters (“show card only when progress ≥ 1”) and per-node showWhen (state badges like “completed”)