sprout-garden-level-design

Sprout Garden: Level Design

Progression, phases, UI components, and puzzle philosophy.

Design Philosophy

The Golden Rule

Build a cool machine → Take pieces out → "Can you figure it out?"

Levels should feel like discovery, not instruction. The player figures out the rules by experimenting, not by reading.

Constraint as Teacher

Each phase introduces new plots by creating puzzles that CAN'T be solved without them. The player hits a wall, gets a new tool, has an "aha" moment.

Professor Hoot 🦉

The hint system. Not a tutorial. Not an instructor. Just an owl perched in the corner.

Philosophy:

He's there, not intrusive
Tap him if you want a hint
He doesn't explain rules - he gives nudges
Progressive hints: vague first, more specific if you're really stuck

Example Hints:

"Hoo! This one might need something to change the shape..."
"Hoo hoo! Tap a vine to see what happens..."
"Hoo! What if the path went down instead of right?"

Visual:

Small owl icon in corner (top-right)
Subtle animation when hint available (head tilt? blink?)
Speech bubble appears on tap
Goes back to watching silently after

When Professor Hoot Appears:

Always present but quiet on early levels
More active (slight bounce) when player is stuck (no moves for X seconds)
Never interrupts - always player-initiated

Progressive Disclosure:

First hint: Very general ("This garden needs a color change...")
Second hint: More specific ("The paint machine blooms colors...")
Third hint: Almost direct ("Try putting a paint machine between B2 and B3")

Professor Hoot watches. Professor Hoot waits. Professor Hoot helps if you ask.

Freeform Canvas

Springs and harvests are placeable. The puzzle is defined by:

Input: What sprouts you start with
Output: What sprouts you need to produce
Palette: What plots you can use
Constraints: Limits (max plots, forbidden plots, etc.)

NOT by fixed edge positions.

Phase 1: Foundation

Learn flow and basic transformation.

Unlocked Plots

Vine (→ ↓ ← ↑)
Form Grower (⚙️)
Color Bloomer (🎨)
Spring (🌱) - pre-placed or placeable
Harvest (🎯) - pre-placed or placeable
Weeder (❌)

UI Components

┌─────────────────────────────────────────────────────────────────┐
│  🌱 SPROUT GARDEN                    Level 3 of 10        🦉   │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  GOAL: Turn ● red into ■ red                                   │
│                                                                 │
│  ┌───┬───┬───┬───┬───┬───┐                                     │
│  │   │   │   │   │   │   │ A                                   │
│  ├───┼───┼───┼───┼───┼───┤                                     │
│  │   │   │   │   │   │   │ B                                   │
│  ├───┼───┼───┼───┼───┼───┤                                     │
│  │   │   │   │   │   │   │ C                                   │
│  ├───┼───┼───┼───┼───┼───┤                                     │
│  │   │   │   │   │   │   │ D                                   │
│  ├───┼───┼───┼───┼───┼───┤                                     │
│  │   │   │   │   │   │   │ E                                   │
│  └───┴───┴───┴───┴───┴───┘                                     │
│    1   2   3   4   5   6                                       │
│                                                                 │
├─────────────────────────────────────────────────────────────────┤
│  PLOTS: [🌱] [🎯] [→] [⚙️] [🎨] [❌]                             │
├─────────────────────────────────────────────────────────────────┤
│  [🌿 TEND]                                          [↩️ RESET]  │
└─────────────────────────────────────────────────────────────────┘

Components:

Header: Level name/number
Professor Hoot: 🦉 in top-right corner (tap for hints)
Goal display: Visual showing input → output
Grid: 6x5 for early levels
Plot palette: Available plots for this level
Action buttons: Tend (run), Reset
(No separate HINT button - that's what Professor Hoot is for)

Level Progression (Phase 1)

Level	Goal	Teaching
1	Connect spring to harvest	Flow, vines
2	Connect with a turn	Vine rotation
3	● → ■ (one form change)	Form Grower
4	🔴 → 🟢 (one color change)	Color Bloomer
5	● → ▲ (two form changes)	Sequential transformation
6	🔴 → 🔵 (two color changes)	Same concept, different property
7	● red → ■ green	Combining transformations
8	● → ★ (three form changes)	Longer paths
9	★ → ● (cycle wrapping)	Modular arithmetic
10	Challenge: ● red → ★ blue, max 8 plots	Optimization

Sample Level File (Phase 1)

level:
  id: "p1-03"
  name: "First Growth"
  phase: 1
  
  grid: [6, 5]
  
  goal:
    description: "Turn the circle into a square"
    input: { shape: circle, color: red, count: 1 }
    output: { shape: square, color: red, count: 1 }
  
  palette:
    - spring
    - harvest
    - vine
    - form-grower
    - weeder
  
  pre_placed: []  # empty - player places everything
  
  constraints:
    max_plots: null  # no limit
  
  hints:
    - "The gear (⚙️) changes shapes"
    - "Circle becomes square when it goes through the gear"
  
  par:
    plots: 4  # spring, vine, grower, harvest

Phase 2: Imprinting

Learn direct assignment vs cycling.

Unlocked Plots

Form Imprinter (● ■ ▲ ★)
Color Imprinter (🔴 🟢 🔵 🟡)

UI Changes

Palette expands with new section: "Imprinters"
Maybe a "toolbox" that opens to show categories

Level Progression (Phase 2)

Level	Goal	Teaching
11	Any shape → ● specifically	Imprinter vs Grower
12	★ green → ● green (reset shape only)	Selective transformation
13	Mix: use grower AND imprinter in same puzzle	When to use which
14	Efficiency puzzle: grower path vs imprinter path	Trade-offs
15	Challenge level	Mastery check

New Puzzle Types

"Make it a circle, no matter what arrives"
"The short path or the long path?"

Phase 3: Gates

Learn conditionals and filtering.

Unlocked Plots

Gate (🚧) with variants

UI Changes

Gate configuration: tap gate to set condition
Visual feedback when sprout is blocked (wilt animation)

Level Progression (Phase 3)

Level	Goal	Teaching
16	Let only stars through	Basic gate
17	Two paths, gate on one	Selective routing
18	Multiple gates in sequence	AND logic (implicit)
19	Gate + transform after	Conditional transformation
20	Challenge: Sort red from blue	Pre-fork thinking

New Puzzle Types

"Only ripe fruit can pass"
"Filter out the wrong colors"

Phase 4: Forking

Learn branching and routing.

Unlocked Plots

Fork (⑂)
Splitter (⚡)
Grafter (⊕)

UI Changes

Fork configuration: set routing rules
Multiple sprouts visible simultaneously
Grafter shows "waiting" state

Level Progression (Phase 4)

Level	Goal	Teaching
21	Split one into two	Splitter basics
22	Route red left, blue right	Fork routing
23	1 → 4 (double split)	Compound splitting
24	Two paths merge	Grafter basics
25	Fork then graft	Branch and merge
26-30	Increasing complexity	Mastery

New Puzzle Types

"Turn 1 red circle into 4 blue squares"
"Sort by color, transform, recombine"

Phase 5: Timing

Learn synchronization.

Unlocked Plots

Delay (⏱️¹, ⏱️², ⏱️³)

UI Changes

Tick counter visible during tend
Path length visualization (optional)

Level Progression (Phase 5)

Level	Goal	Teaching
31	Two paths, must arrive same tick	Sync basics
32	Long path + delay = short path	Compensation
33	Three-way sync	Complex timing
34	Grafter that needs sync	Practical application
35	Challenge: No delays allowed	Pure path planning

New Puzzle Types

"Both sprouts must arrive together"
"The grafter needs both at the same time"

Phase 6: Logic

Learn boolean operations.

Unlocked Plots

AND Trellis (∧)
OR Trellis (∨)
NOT Trellis (¬)
XOR Trellis (⊕)

Level Progression (Phase 6)

Level	Goal	Teaching
36-40	Boolean puzzles	Digital logic basics

New Puzzle Types

"Output only if both inputs arrive"
"Invert the color"

Phase 7: Loops

Learn iteration.

Unlocked Plots

Merge (⊕)
Check (❓)
Counter (+1)

UI Changes

Loop detection in debugger
Iteration counter display

Level Progression (Phase 7)

Level	Goal	Teaching
41	Go around twice	Basic loop
42	Exit when star	Conditional exit
43	Count to 4	Counter usage
44	Infinite loop (intentional failure)	What NOT to do
45	Complex loop with transforms	Mastery

New Puzzle Types

"Keep going until it's a star"
"Go around exactly 3 times"

Phase 8: Abstraction

Learn functions and composition.

Unlocked Plots

Rabbit Hole (🌀)

UI Changes

Zoom into sub-garden
Function library panel
Save/name functions

Level Progression (Phase 8)

Level	Goal	Teaching
46	Use a pre-made function	Function calling
47	Create your own function	Abstraction
48	Function that uses a function	Composition
49	Recursive function (careful!)	Recursion
50	Grand challenge	Everything together

UI Component Specifications

Grid

┌───┬───┬───┬───┬───┬───┐
│   │   │   │   │   │   │ A
├───┼───┼───┼───┼───┼───┤
│   │   │   │   │   │   │ B
...

Cell size: 60x60px minimum (touch-friendly)
Grid size: 6x5 (Phase 1) up to 12x10 (advanced)
Row labels: A, B, C, D, E...
Column labels: 1, 2, 3, 4, 5, 6...
Cell states: empty, plot, highlighted (cursor), active (tending)

Plot Palette

┌─────────────────────────────────────────────┐
│ [🌱] [🎯] [→] [⚙️] [🎨] [❌]                │  ← Phase 1
├─────────────────────────────────────────────┤
│ [●] [■] [▲] [★] [🔴] [🟢] [🔵] [🟡]         │  ← Phase 2 (when unlocked)
├─────────────────────────────────────────────┤
│ [🚧]                                        │  ← Phase 3
...

Horizontal scroll if too many
Categories collapse/expand in advanced phases
Selected plot highlighted
Tap to select, then tap grid to place

Goal Display

GOAL: ● 🔴 × 1  →  ★ 🔵 × 4
      (input)     (output)

Visual representation of input/output
Count if multiple
Checkmarks as goals are met

Action Bar

[🌿 TEND]                    [💡 HINT] [↩️ RESET]

Tend: Run the garden (big, primary button)
Hint: Progressive hints (costs nothing, just for learning)
Reset: Clear player-placed plots

During Tend (Animation Mode)

┌─────────────────────────────────────────────────────────────────┐
│  TENDING...                                        Tick: 3/12  │
│                                                                 │
│  [Grid with animated sprout movement]                          │
│                                                                 │
├─────────────────────────────────────────────────────────────────┤
│  ● red at B2 → enters Form Grower → ■ red emerges              │
├─────────────────────────────────────────────────────────────────┤
│  [⏸️ PAUSE]  [⏭️ SKIP]  Speed: [🐢] [🐇] [🚀]                    │
└─────────────────────────────────────────────────────────────────┘

Tick counter: Current tick / estimated total
Step narration: What's happening
Speed controls: Slow, normal, fast
Pause/Skip: Control playback

Level Complete

┌─────────────────────────────────────────────────────────────────┐
│                        🎉 GARDEN COMPLETE! 🎉                   │
│                                                                 │
│                    ★ ★ ★ (3 stars)                             │
│                                                                 │
│  Plots used: 7 (par: 8)        ✓ Under par!                    │
│  Ticks: 12 (par: 15)           ✓ Under par!                    │
│  No sprouts lost               ✓ Perfect!                      │
│                                                                 │
│              [▶️ NEXT LEVEL]  [↩️ TRY AGAIN]                     │
└─────────────────────────────────────────────────────────────────┘

Level File Format

level:
  # Metadata
  id: "p4-23"
  name: "The Great Split"
  phase: 4
  author: "Dad"
  
  # Grid setup
  grid: [8, 6]
  
  # Goal definition
  goal:
    description: "Turn 1 red circle into 4 blue squares"
    input:
      - { shape: circle, color: red, count: 1 }
    output:
      - { shape: square, color: blue, count: 4 }
    sync: false  # true = all must arrive same tick
  
  # Available plots
  palette:
    - spring
    - harvest
    - vine
    - form-grower
    - color-bloomer
    - splitter
    # gates NOT available - forces use of splitters
  
  # Pre-placed plots (optional)
  pre_placed:
    - { position: [0, 2], type: spring, config: { emits: { shape: circle, color: red } } }
  
  # Locked cells (optional)
  locked: []
  
  # Constraints
  constraints:
    max_plots: 15
    max_of_type:
      splitter: 2
    forbidden: []
  
  # Hints (progressive)
  hints:
    - "You'll need to split the path twice"
    - "A splitter makes copies - one becomes two"
    - "Two splitters: 1 → 2 → 4"
  
  # Par scores
  par:
    plots: 12
    ticks: 20
  
  # Scoring
  scoring:
    completion: 100
    under_par_plots: 50
    under_par_ticks: 50
    no_deaths: 25

Puzzle Design Patterns

The Wall Pattern

Create a puzzle that ALMOST works with current tools, but requires the new tool.

The Aha Pattern

Player struggles, gets hint, new plot appears, instant understanding.

The Efficiency Pattern

Solution exists, but can you do it in fewer plots/ticks?

The Remix Pattern

Same goal, different constraints. "Now do it without delays."

The Sandbox Level

No goal. Just play. Build whatever. Often at end of phase.

Challenge Modes (Post-Campaign)

Mode	Description
Speed Garden	Solve in under N ticks
Minimalist	Fewest plots possible
No Deaths	No sprouts can fall off
Sync Master	All sprouts arrive same tick
Blind Tend	Can't see animation, only result
Daily Garden	New puzzle every day

Free Grow Mode

After completing Phase 1, unlock Free Grow:

Any grid size
All unlocked plots
No goals
Save and share gardens
Export as level file

Slots

North

slots:
- sprout-garden

South

slots: []

East

slots: []

West

slots: []

↑ northsprout-garden

Sprout Garden: Level Design

Design Philosophy

The Golden Rule

Constraint as Teacher

Professor Hoot 🦉

Freeform Canvas

Phase 1: Foundation

Unlocked Plots

UI Components

Level Progression (Phase 1)

Sample Level File (Phase 1)

Phase 2: Imprinting

Unlocked Plots

UI Changes

Level Progression (Phase 2)

New Puzzle Types

Phase 3: Gates

Unlocked Plots

UI Changes

Level Progression (Phase 3)

New Puzzle Types

Phase 4: Forking

Unlocked Plots

UI Changes

Level Progression (Phase 4)

New Puzzle Types

Phase 5: Timing

Unlocked Plots

UI Changes

Level Progression (Phase 5)

New Puzzle Types

Phase 6: Logic

Unlocked Plots

Level Progression (Phase 6)

New Puzzle Types

Phase 7: Loops

Unlocked Plots

UI Changes

Level Progression (Phase 7)

New Puzzle Types

Phase 8: Abstraction

Unlocked Plots

UI Changes

Level Progression (Phase 8)

UI Component Specifications

Grid

Plot Palette

Goal Display

Action Bar

During Tend (Animation Mode)

Level Complete

Level File Format

Puzzle Design Patterns

The Wall Pattern

The Aha Pattern

The Efficiency Pattern

The Remix Pattern

The Sandbox Level

Challenge Modes (Post-Campaign)

Free Grow Mode

Tags

Slots

North

South

East

West