Skip to content

Client and SVG Pipeline

Client Direction

Use a scene-first browser client. Phaser is suitable as the presentation and state-shell layer even if the gameplay is not physics-heavy.

See browser-first-constraints.md for the rules that keep the design grounded in browser-friendly interaction and rendering limits.

  • Boot
  • Login
  • Character Creation
  • Town
  • World Map
  • Mission Planning
  • Expedition Status
  • Market
  • Guild Hall
  • Codex

Character Creation Scene Rule

Character Creation should be guided, short, and preview-driven.

Recommended panels:

  • name and appearance
  • race summary
  • homeland and start-town preview
  • archetype and starter loadout preview
  • background and starter utility preview
  • final review card

Final review should show start town, starter contacts, Familiar skills granted at creation, starter loadout suggestion, and first-board bias in one screen.

See ../world/character-origins.md for full creation model.

Creation Preview Layer Stack

Character Creation preview should use fixed SVG layer stack so appearance customization and starter-loadout preview stay cheap and readable.

Recommended order:

  1. body base and silhouette
  2. skin tone and face base
  3. hair, facial hair, and ears or horn variants where race needs them
  4. race marker details and small cultural accents
  5. base clothing layer
  6. starter archetype silhouette overlay
  7. held weapon or tool preview
  8. homeland banner, climate prop, or backdrop marker

Rules:

  • do not render full inventory paper-doll system in creation scene
  • use starter-loadout silhouette preview, not final gear-stat paper sheet
  • keep race identity visible even under archetype preview layers
  • use region-colored backdrop cues so homeland selection feels different immediately
  • all preview combinations should come from reusable SVG parts, not separate full-character illustrations

World Map Rule

The world map and local survey views should use tile-based rendering with fog-of-war overlays rather than one fully revealed static image.

Recommended client rules:

  • keep logical map knowledge separate from art layers
  • load map tiles in chunks by area or viewport
  • render fog as its own overlay layer
  • show stale chart data differently from fresh chart data
  • use markers and annotations above the terrain and fog layers

See ../systems/exploration/map-tiles-fog-and-cartography.md for the exploration model behind this scene.

SVG Art Direction

All graphics should be vector-first. The world should look deliberate and readable rather than overly detailed.

Asset Categories

  • character bodies and layered equipment
  • monsters and boss variants
  • weapons, tools, and supplies
  • map icons and route markers
  • town buildings and biome props
  • heraldry and faction symbols
  • UI frames and codex illustrations

Inspiration Rules

Take inspiration from public-domain and historical sources such as:

  • heraldry
  • medieval bestiaries
  • antique maps
  • illuminated manuscripts
  • botanical studies
  • folklore motifs

Do not trace copyrighted game art. Redraw original assets with simplified shapes and a controlled style language.

Technical Rules for SVG Assets

  • keep shapes clean and reusable
  • prefer limited palettes per region
  • use layerable parts for equipment swaps
  • optimize paths and remove unnecessary detail
  • avoid embedding scripts or unsafe markup

UI Direction

The UI should support quick status review and planning. Important screens must communicate duration, risk, supplies, weather or climate pressure, and expected reward at a glance.

The UI should assume players are often alt-tabbed, returning briefly, or checking the game while another main game is running.