TinyCastle

⚔️ 🏰 Twitch viewers become named knights, build defenses, battle castles and bosses. Summon a dragon in a 3D overlay alongside the streamer’s game!

Comment

🏰 Tiny Castle — Your chat. Your army.

The streamer keeps playing. Chat has a kingdom to defend.

Tiny Castle turns Twitch chat into a miniature 3D battlefield beneath the streamer's webcam. Viewers join armies, influence battles and summon a dragon together.

▶ Watch the demo · ⚔️ Try the interactive rehearsal

📜 Inspiration

A Twitch message can disappear in seconds. I wanted a viewer's participation to leave something visible: a knight with their name, a castle worth defending and a shared moment they helped create.

Tiny Castle gives chat its own rivalries, rallies and victories alongside the streamer's usual content.

⚔️ What it does

Join → Rally → Battle → Celebrate.

  1. Join. Type !join red or !join blue. A parchment welcomes you into the kingdom.
  2. Rally. Eligible messages strengthen your army and build wooden defenses. Vote !charge for stronger attacks or !fortify for protection.
  3. Battle. Drafted viewers appear as named knights that march, fight and break through defenses automatically.
  4. Celebrate. Victory unfurls a parchment with herald trumpets. The winning army's top objective attacker becomes Hero of the Battle.

Castle Clash pits red against blue. Boss Raid unites chat in a gold army against the Iron Colossus, with telegraphed attacks and an enraged phase.

Streamers connect Twitch, add an OBS Browser Source and control matches from a compact panel. Viewers participate through chat with no download or payment.

🐉 A spectacle the community earns

The next shared reward stays visible, giving chat something to anticipate:

  • Shield Rally: knights strike their shields and the castle's power effects surge.
  • Royal Ascension: knights kneel as gold armor assembles and capes unfurl.
  • Legendary Awakening: a dragon lands behind the castle, receives the army's salute and remains as its guardian. A parchment honors contributors.

Exceptional participation can earn a crowned guardian. A separate armor track adds increasingly ornate equipment.

Firestorm rewards sustained team engagement with one warned fireball barrage per army per match. It damages enemy knights and defenses; wooden walls and defensive votes soften the blow.

Goals scale to the starting community, then stay fixed. Cooldowns and distinct-contributor requirements shape progression. Armor and ceremonies are cosmetic; battle power comes from eligible chat, tactical choices and Firestorm.

⚒️ How I built it with Codex

I used OpenAI Codex to build and refine the game, Twitch integration, 3D models, animation, interface, sound and tests.

The live interaction follows a clear path:

Twitch chat → EventSub → Node.js battle rules → Three.js battlefield → OBS.

Twitch OAuth authorizes chat access; EventSub WebSockets deliver chat and moderation events. Node.js maintains shared game state, Three.js renders procedural models, and Web Audio supplies original sounds. Image generation helped develop the heraldic artwork.

A full-match test exposed a five-viewer battle ending before the dragon's original timer. Codex helped adjust the buildup and add a regression test verifying the earned dragon arrives before that match ends. The current suite has 94 passing automated tests.

The game runs without runtime LLM calls.

🛡️ Challenges and design decisions

  • Recognition without crowding. Each wave drafts up to 12 visible knights per army, prioritizing fewer appearances and randomizing ties. Waiting viewers still contribute and vote; extra messages do not improve draft odds.
  • Fair celebrations. Ceremonies briefly pause combat and its clock equally for both armies.
  • A readable stream. Parchment names, framed health bars and compact OBS framing keep the scene legible. Space around the battlefield is transparent.
  • Twitch reliability. Tests cover duplicate events, cooldowns and reconnects. Rehearsal inputs stay separate from live chat; authorization tokens remain in server memory.

👑 What I'm proud of

Tiny Castle connects personal recognition with a shared goal: viewers can see their names, influence their army and help earn a celebration everyone watches together.

The public browser rehearsal uses the same game rules with simulated viewers, letting judges try the complete loop immediately.

🕯️ What I learned

The buildup to a reward and recognition afterward matter as much as the animation itself.

I also learned to separate convincing rehearsal footage from verified Twitch behavior. That distinction shaped the tests and demo labels.

🗺️ What's next

** If I had one more day to build I would animate more power ups, engagement markers, battlefields, bosses, etc.

Next: playtest with 2–5 independent viewers, then refine joining instructions, small-community pacing and OBS setup from their feedback.

Current validation: the video includes actual Twitch/OBS interaction from one real account. Complete group battles and the crowned-dragon sequence use clearly labeled simulated participants. Independent multi-viewer live play and production-scale audience capacity remain unverified.

Built With

Share this project:

Updates

Submission history