Project Info
This project did not submit a demo video on Devpost.
Inspiration
Some of our favorite childhood memories came from drawing silly and magical creatures and imagining them coming to life. For TreeHacks, we wanted to bring back this sense of nostalgia, amazement and feeling of pure imaginative joy. That's why we created Scribble Fighters, a multiplayer game that transforms doodles into playable fighters using AI.
What it does
Scribble Fighters is a 1v1 multiplayer battle game where players battle each other with their creativity. Players draw creatures of their choices - giant turtles, snakes, to tanks - the sky is the limit! GPT then interprets these drawings, giving each creation a unique name, stats (health, attack damage), and abilities (melee attacks, projectiles). The game is balanced through an ink economy where bigger / detailed drawings are rewarded with stronger stats, but consume ink players need to summon more drawings into the battle. Battles play out in real-time with physics-based environments, with a chat your friends can use to while an AI avatar provides live commentary. Last player with drawings standing wins!
How we built it
Frontend: Next.js, React, Tailwind CSS, Phaser (js game framework), Backend: Colyseus (multiplayer server and live chat), Matter.js (server side physics), Express AI Pipeline: GPT: Analyzes drawings, generates a structured fighter config with abilities and stats, and provides battle commentary HeyGen LiveAvatar SDK: AI video commentator
Challenges we ran into
This was our first time vibe coding a project. While we found that getting ideas into code was significantly, debugging became difficult since we had less intimate knowledge of what was actually happening. As such, we spent lots of time tracing through a codebase we were unfamiliar with. This tradeoff taught us that AI-assisted coding excels at rapid prototyping but requires deliberate effort and code reviews to maintain code comprehension.
Accomplishments we're proud of
Overall, we are proud of building a procedural content pipeline where any drawing becomes a unique playable entity with different abilities. We also explored game design fundamentals by creating an ink economy that forces meaningful strategic choices, and polished the battle feel with projectile trails, knockback physics, and death animations that brought the hand-drawn sprites to life.
What we learned
One of things we learned was how to get reliable AI output for game mechanics. Getting GPT to consistently return valid, balanced fighter configs meant iterating on structured prompts, defining clear rules for stat scaling based on ink investment, and building fallback configs to ensure creative drawings never crash the game.
What's next
More abilities: some examples could include shield, healing, teleportation, summons Team battles: 2v2 or free-for-all (e.g. battle royale style) Arena variety: walls, platforms, hazards like spikes or lava that can damage your drawings
Scribble Fighters
Draw your champion, bring it to life, and fight!
A web-based game where players draw creatures on a canvas, AI (GPT-4o Vision) analyzes the drawings to determine combat abilities, and the scribbles come to life to battle each other in real-time.
Quick Start
Prerequisites
- Node.js 18+
- OpenAI API key (optional for development - uses fallback configs without it)
1. Install dependencies
# Install client dependencies
npm install
# Install server dependencies
cd server && npm install && cd ..
2. Configure environment
# Copy and edit the env file
cp .env.local.example .env.local
# Add your OPENAI_API_KEY to .env.local
Production: Set OPENAI_API_KEY in your deployment env. Without it, all fighters become "Scribble Warrior" (fallback). The analyze phase has a 25s timeout; cold starts and latency can cause timeouts if the API is slow.
3. Start the game server
cd server
npm run dev
4. Start the web app (in another terminal)
npm run dev
5. Play!
- Open http://localhost:3000
- Click "Create Room"
- Share the room code with a friend (or open another browser tab)
- Both players ready up
- Draw your champion! Add "+fire", "+fly", arrows, etc.
- AI analyzes your drawing and assigns combat abilities
- Battle using trackpad/mouse gestures!
How to Play
Drawing Phase
- Draw your creature on the canvas
- Add attack shapes (fireballs, swords, etc.) near your creature
- Write text annotations: "+fire", "+fly", "+shield"
- Draw arrows from attacks to your creature
- Ink is limited - be strategic!
Battle Phase (Gesture Controls)
- Click & drag: Move your creature
- Tap: Fire projectile
- Swipe left/right: Melee attack
- Draw circle: Activate shield
- Swipe up: Fly / jump
Live Commentator (LiveAvatar)
During battles, a live AI commentator speaks play-by-play using HeyGen's LiveAvatar. To enable it:
- Get an API key from LiveAvatar (or use your HeyGen key)
- Add to
.env.local:LIVEAVATAR_API_KEY=your-key # or HEYGEN_API_KEY=your-heygen-key (fallback)
The commentator auto-picks an avatar and voice. To customize (e.g. Toronto accent), pass avatarId and voiceId to LiveCommentator—fetch options from /api/liveavatar/avatars and /api/liveavatar/voices.
Tech Stack
- Next.js 14 - Web framework
- Phaser 3 - Battle rendering
- Colyseus - Real-time multiplayer
- Matter.js - Physics simulation
- OpenAI GPT-4o - Drawing analysis
- Tailwind CSS - Styling
Analysis
View
Metric
- 32
- 11
- 6
- 2
Figures cover GitHub contributors during the hackathon window. A co-authored commit counts in full for each author, so per-member totals add up to more than the whole-team figures.
Technology
- CSSIn code
- ExpressIn code
- Next.jsIn code
- OpenAIIn code
- ReactIn code
- Tailwind CSSIn code
- TypeScriptIn code
- Node.jsClaimed
7 of 8 appear in the indexed code. 1 claimed on Devpost could not be matched to code, which may simply mean the tool leaves no trace in the repository.
AI coding agents
No AI coding agent signals were found in this repository.
Detected from committed agent config files and commit authorship. Absence of a signal is not proof an agent was unused.
Codebase size
Source size
329 KB
Source files
45
Counts recognized source files only; vendored directories, binaries and lockfiles are excluded, so this is smaller than the repository on disk.
Repository
potatoeggy/mribs
62 files · 683 KB · @ af79473
Structure
Interface
18 files · 29%Screens, components and styles rendered to the user.
API & routing
13 files · 21%Request entry points: routes, handlers and controllers.
Application logic
7 files · 11%Domain rules, services and shared utilities.
Data & schema
1 file · 2%Schema definitions, migrations and data access.
Supporting
Layers are inferred from where files sit in the tree, not from reading the code. A project that names its directories unconventionally will read oddly here — open the file browser to check anything the diagram implies.
Languages
- TypeScript81%
- Markdown17%
- CSS3%
Share of indexed source by file size. Binary and vendored files are excluded.
Dependencies
package.json
npm · 18- @heygen/liveavatar-web-sdk
- colyseus.js
- livekit-client
- matter-js
- next
- openai
- phaser
- react
- react-dom
- uuid
- +8 more
server/package.json
npm · 12- @colyseus/monitor
- @colyseus/ws-transport
- colyseus
- cors
- dotenv
- express
- matter-js
- +5 more
Declared in the repository’s manifests at the indexed commit. A declared package is not proof it is used, and runtime dependencies are listed first.
This project’s features have not been analysed yet.
Export this project's context (description, README, evidence, key source files) to chat with an AI agent elsewhere.