Pattern-driven Development B

Pattern-driven Visual Storytelling

Use a pattern language to design pages and interactions one-by-one, then compose them into a whole.

  • Narrative patterns: Linear Journey, Branching Choice, Hub-and-Spoke
  • Scene patterns: Splash Screen, Title Menu, Bookshelf Selector, Scene-as-Page, Scrollable Panoramic
  • Interaction patterns: Tap-to-Reveal, Drag-to-Assemble, Swipe-to-Page, Parallax Scroll, Physics Toy
  • Feedback patterns: Reward Burst, Confetti, Audio Stinger, Haptic Nudge
  • Progress/save patterns: Bookmark Checkpoint, Sticker Album, Achievement Stars
  • Technical patterns: Shared Asset Atlas, Lazy-load Scene, Preload Audio, Offline Fallback

Workflow with patterns

  1. Intent → pick patterns that resolve your constraints (audience, device memory, monetization).
  2. Instantiate → implement in Kwik Editor (pages/layers/interactions) and Solar2D (composer flows).
  3. Compose → connect scenes (story map), define entry/exit for each pattern.
  4. Playtest → iterate; keep a “pattern card” for reuse.

Pattern card template

Name Context Problem Forces Solution Implementation (Kwik/Solar2D):

  • Kwik: page type, layers, interactions (tap/drag/swipe), audio cues
  • Solar2D: composer scene flow, preload, network/download, analytics events Variations Known pitfalls Example links

Example mini-cards

  • Tap-to-Reveal
    • Problem: Reveal content progressively for young readers.
    • Solution: Taps trigger layer visibility + audio stingers.
    • Implementation: Kwik tap actions on hidden layers; group SFX; optional star particle burst.
  • Bookshelf Selector
    • Problem: Navigate multiple episodes/chapters and support downloads.
    • Solution: Hub-and-spoke “shelf” scene with episode tiles.
    • Implementation: One “bookshelf” scene; tiles link to composer scenes; optional network.download for content packs; analytics events on selection.
  • Branching Choice
    • Problem: Let readers influence the story without dead ends.
    • Solution: Choice buttons set a state token and navigate to branch scenes; provide graceful rejoin.
    • Implementation: Kwik buttons → set variable; composer.gotoScene with params; checkpoint bookmark.