Tiny Planet: Project Story

Inspiration

I wanted to build a management game that inverted the usual relationship between player agency and world state. Instead of unlocking building types, I wanted every region to enforce different building strategies—a desert farm costs twice as much water, a tundra preserve thrives. The core idea: placement should matter more than quantity.

The constraint was tight: 30 days, portrait-only, one Three.js scene, no external assets. It felt like a real constraint forced better design.

How It Was Built

I used Claude as a collaborative partner, not a replacement. We worked in 14 iterative cycles:

1. Sessions 1–2: Built the first playable loop—five regions, four resources, emergent population, and three escalation events (Drought, Boom, Storm). Tested for win and loss paths.

2. Sessions 3–5: Added procedural 3D terrain, biome coloring, dynamic atmosphere, and fixed critical bugs (terrain displacement, health tinting, mobile layout).

3. Sessions 6–7: Scaled to five regions, added region traits (temperate boosts food; arid punishes water), synergies between project pairs, tier-2 unlocks, diminishing returns on repeats. Retuned the entire economy three times.

4. Sessions 8–10: Compressed 30 days from 42 seconds to 5 minutes by animating the display continuously while keeping simulation discrete. Added a day-progress bar, visibility-change pause (so tabbing away doesn't fast-forward your run), and penalty labels on buttons.

5. Sessions 11–14: Built the submission package—cross-verified all design claims against code, fixed dead trait modifiers and dead CSS, rebuilt the design-intent doc on the official template, and caught critical bugs (project buttons weren't responding to real clicks because the preview handler was destroying them mid-press).

What I Learned

Testing matters more than you think. My automated tests used element.click(), which skips the pointer event path real players use. The buttons were broken in play but passed all my checks—I only found out when I tested with real browser input.

Layout is a constraint, not decoration. The globe was crushed under UI chrome. Moving the objective card into the drawer, hiding the mission panel when idle, and making the toast overlay freed 36% of the screen. The planet should own the space.

Simulation and display are different layers. Days advance discretely (for balance), but animating the bar and resource values smoothly every frame made the game feel responsive at 10 seconds per day instead of sluggish.

Trait systems teach through play. Once players see "×1.6 Arid" on a Solar Array and "×2 water cost" on a Farm, they start reading the terrain. The numbers are small but they change everything.

Challenges

1. Economy balance at scale. Five regions × three projects × diminishing returns created emergent dominance chains. Tier-2 projects broke everything. Solved by simulating every collapse case (no-action, solar spam, trait-matched, each tier-2 strategy) and tuning five constants to make all paths viable but distinct.

2. The button-press bug. The press-and-hold preview feature silently broke the primary action. The fix: preview only sets state, doesn't re-render. Synthetic tests never caught it.

3. Mobile layout under pressure. The resource bars, mission text, milestone card, objective panel, guide step, region strip, and action panel all wanted screen space. The solution was aggressive prioritization: only show urgent text, move instructional text into the drawer, make transients overlay.

4. Caching during development. After fixing a bug, the browser served a cached .html file without the fix. Real <ctrl+shift+R> reloads and unzipping the submission into a clean folder are non-negotiable.

The Submission

Three files:

• tiny-planet-prototype.zip (1 MB): The game, self-contained, no CDN links
• design-intent-tiny-planet.docx (499 words): Seven prescribed sections on design, controls, loop, scope, progression, and vision
• buildlog.md (14 sessions): Decision log and verification

The game runs in ~5 minutes, survives to Day 30 with careful play, and teaches the core decision—read the land, place strategically—within the first two minutes.

Built With

• chatgpt
• claude