Vibe Coding an Entire Street Fighter Game With AI (Cursor, Codex, Opus 4.8)
🎮 VibeGameDev — My AI Game Dev Skills & Playbook ► https://aiod.dev/ip4 🧰 This video's FREE resources (asset pack + every prompt) ► https://aiod.dev/nkl 🚀 Get My FULL AI Builder System (ALL ACCESS) ► https://aiod.dev/pjl 🦊 Spriterrific — the AI animation tool I built ► https://aiod.dev/c5h This week, let's vibe code: a 2D fighting game. Real hitboxes, hurtboxes, blocking, best-of-3 rounds, and meter specials with multi-hit combos. The art, animations and code, including UI and the special finishers all made with AI. If you've ever wanted to build a Street Fighter-style 2D fighter with AI — three characters, real frame-data combat, blocking, and meter specials — this video is for you. 🛠️ THE STACK • AI agents: Codex (OpenAI) for the art, Cursor for the build — same workflow runs on Claude Code • Game engine: Phaser 4 + TypeScript • Concept mockups, character references, portraits, UI + prop atlases: Image Gen (Image 2.0, built into Codex) 🚀 WHAT YOU'LL LEARN • Why a fighting game is "just" a per-frame box engine — and how a platformer starter already had everything it needed • Generating SNES-style concept mockups and pulling a fighter out of each one as a clean reference • Splitting a mockup into transparent parallax background layers for the stage • The Character Gym — authoring per-frame hit / hurt / attack / guard boxes with Unity-style translate + scale gizmos • Active-frame attack windows — why a punch only hits on its strike frames (the line between a fighter and a swing-through) • Blocking as geometry, not labels — a guard box and two independent checks (did it touch, was the right stance up) • A reusable Fighter entity + a playground with a training dummy and live per-character stat tuning • The versus flow — mode → stage → character select with portraits → "Round 1, Fight!" • Hit detection, best-of-3 rounds, a 60s round timer, and a group camera that scrolls a wide stage only when one fighter gives ground • A UI-atlas HUD with a dynamic health fill, low-health blink, and a match-start entrance • Meter specials with multi-hit combos — the attack-span trick that makes a single swing land several hits — and a super cut-in finisher 🕒 TIMESTAMPS 00:00 Vibe Fighter Intro 01:08 This Video's Resources 01:53 What we're building 02:40 Step 1: Context 03:16 Step 2. Generating concept art and mockups 04:01 Step 3: Exracting the backgrounds 05:09 Step 4: Character references 06:13 Step 5: Character Sprites & Animations 09:19 Step 6: Build a Character Gym 11:59 Step 7: Build a Playground 14:02 Step 8: Generating menu portraits 14:55 Step 9: Core combat loop 15:23 Step 10: Generating UI & Health Bars 16:53 Step 11: Special Moves and Polish 18:09 Wrap Up #vibegamedev #aigamedev #vibecoding #claudecode #codex #cursor #phaser #gamedev #indiedev #aigame #aitools #fightinggame #streetfighter #2dfighter #spriterrific #aianimation #imagegen #vibecode #devlog #howto #tutorial