Vibe code games
How To Vibe Code Games
From blank repo to playable build. The skills, source projects, and prompts I use on camera — without the YouTube editing magic.
Vibe coding a game is straightforward up to the 'first playable' moment. After that — animation feel, asset pipelines, mobile builds, polish — every shortcut breaks. That's where most demos die, and it's the part the timelapse compilation videos quietly cut.
I've been at this since before there was a name for it. 77 build videos in, the part that's actually changed isn't the model — it's the resources I lean on. A handful of skills the agent loads first, a few starter repos I fork from, and prompts I've copy-pasted so many times I can recite them.
Why It Matters
- Agent skills I actually use: phaser-gamedev, threejs-builder, love2d-gamedev, threejs-capacitor-ios, retro-diffusion, animated-spritesheets, gpt-image-1-5, sora-2
- Full source for the games in the showcase — Phaser Oakwoods, Castle Clash Duel, Forest Census, the pirate brawler
- Prompts pulled from real sessions, not paraphrased — including the exact 17-prompt pirate beat 'em up sequence
Workflow
Decide the one minute of gameplay first
Camera angle. Player verbs. Win or lose condition. Engine. Write it down before the first prompt — if you can't describe the first minute, the AI can't either.
Let the skill carry the engine knowledge
phaser-gamedev knows the Phaser scene lifecycle. threejs-builder knows the render loop. love2d-gamedev knows iOS touch input. Pick one. Load it. Stop arguing with the agent about basics.
Fork instead of starting blank
Castle Clash Duel, Forest Census, Phaser Oakwoods, the Vibe Jam Starter Pack — pick the one closest to what you're building. Agents imitate the architecture in front of them, and a working repo is the best architecture you can give them.
Public Vault Excerpts
Agent skill
phaser-gamedev
A Phaser 3 workflow skill for scenes, sprites, Arcade and Matter physics, tilemaps, animation, input, and game architecture. Use it when a browser game needs real game-loop structure instead of generic React-style code.
- Phaser
- 2D
- Browser games
Agent skill
threejs-builder
A Three.js skill for scene setup, camera and renderer wiring, lighting, geometry, materials, animation loops, GLTF loading, responsive rendering, and performance guardrails.
- Three.js
- 3D
- WebGL
Project
Castle Clash Duel
A public Phaser 3 tactical strategy game using Tiny Swords pixel art. The useful lesson is not only the source code: it is the turn-based combat loop, sprite animation handling, and AI-assisted iteration pattern behind the build.
- Phaser
- Strategy
- Pixel art
Project
Forest Census
A public Three.js mini-game built with Codex CLI and the threejs-builder skill. It is a compact example of a single-scene game that can be hosted statically and improved in small AI-assisted passes.
- Codex
- Three.js
- Mini-game
Agent skill
retro-diffusion
A pixel-art generation workflow for spritesheets, img2img edits, walk cycles, idle loops, attack sheets, and animation consistency from reference images.
- Pixel art
- Spritesheets
- Animation
Agent skill
animated-spritesheets
A workflow for turning a single character reference into an animated spritesheet through frame recovery, background cleanup, normalization, contact sheets, and GIF previews.
- Characters
- Motion
- Pipeline
Playbook
The Full AI Sprite Pipeline
A public-facing playbook path from image generation to video reference to a Phaser test harness, showing how game-ready character sprites come from a repeatable pipeline rather than one lucky prompt.
- GPT Image
- Sora
- Phaser
Prompt Patterns
Get to a playable loop before anything else
Before adding levels, content, or art, get one playable minute working. Movement, one interaction, one way to win or lose. Use the existing engine conventions in this repo — don't reinvent scene structure. Add a small debug overlay for anything I'll need to tune (speeds, hitboxes, spawn rates).
One system per pass
Change only one system. Tell me: what the current behaviour is, what we're aiming for, which files you expect to touch, and how I can see the difference in the running game. If you find yourself wanting to touch a second system, stop and ask first.
Tool Notes
Your first game should be smaller than you think
One screen. One verb. One way to win. The pirate beat 'em up started as 'duck, weave, swing' on a moonlit deck. Scope grew after the core loop felt right, not before.
The asset pipeline breaks more builds than the code does
I lost two full days to a walk cycle that turned out to be a frame registration bug, not a generation problem. Spritesheets, tilemaps, animation names, loading paths — they need the same structure as the code, and they need it earlier than feels reasonable.
Play after every change
Green tests don't mean fun. Every pass ends with you playing the build, even if it's just 30 seconds. If you stop doing this, you'll wake up three days from now wondering why nothing feels right.
Frequently Asked Questions
Can you really vibe code a real game with AI?
Yes, with discipline on scope. The Pirate Survival Beat 'Em Up — full combat, audio, screen shake, difficulty ramp — was 17 focused prompts from a blank Phaser starter. Forest Census was a few Codex CLI passes. The pattern's the same: small playable target, agent does implementation, you direct what 'good' feels like.
Which AI tool should I start with?
If you want depth and the AI to read your whole repo, Claude Code. If you want speed and built-in image generation, Codex App. If you want to edit a working project as fast as possible, Cursor on a starter pack. I move between all three depending on the task.
Is this just source code I could find on GitHub?
The source is on GitHub and the videos are on YouTube. What you're paying for is the .md skill files the agent loads — that's the part that's actually hard to reverse-engineer — plus the exact prompt sequences and the assembly of all of it in one place.