Turning One Image Into a Playable iOS Game With AI - Full Tutorial (Step-by-Step)

🎮 VibeGameDev — My AI Game Dev Skills & Playbook ► https://aiod.dev/w4p 🧰 This video's FREE resources (cheat sheet + prompts) ► https://aiod.dev/nfg 🚀 Get My FULL AI Builder System (ALL ACCESS) ► https://aiod.dev/kca 🦊 Spriterrific — the AI animation tool I built ► https://aiod.dev/1uf Take it from the very start: a single AI-generated concept image all the way to a complete, playable 2D hero-quest platformer. A hero, an orc with a sword, three levels, coins, hazards, a locked portal at the end of each one. This runs BOTH in the browser and ships straight to my iPhone — virtual joystick, touch buttons, the works. One project. Web AND native. 🕒 TIMESTAMPS 00:00 Intro 01:10 This Video's Resources and More 02:21 Step 1: Generate Mockups 03:36 Step 2: Asset Atlas 05:01 Step 3: Generating UI 06:48 Step 4: Parallax Background Layers 08:55 Step 5: Background Test Scene 09:46 Step 6: Generate Characters 11:27 Step 7: Animating Characters 15:43 Step 8: Tile Inspector 16:41 Step 9: Level Editor 18:14 Step 10: Integrating HUD & UI 19:46 Step 11: More Levels and Progression 20:55 Step 12: Building for iOS using Capacitor 22:56 Wrap Up Next Steps 🚀 WHAT YOU'LL LEARN • Starting from an AI-generated concept mockup — and the prompt trick that keeps it atlas-friendly (simple, standalone, reachable platforms) • Splitting one mockup into a chroma-key atlas of platforms, tiles, props, and characters — with a manifest.json as the source of truth • Generating a dynamic UI atlas with a magenta transparent-fill slot so the health bar depletes at runtime • Three-layer parallax (far / mid / foreground) with colors that don't clash with the gameplay layer • The gym pattern — Background Gym, Character Gym, Tile Gym — and why every system gets its own test scene • Animating a character with Spriterrific — source-faithful anchor, no pixel-snap, then animating it with image-to-video • Why your attack hitbox should only register on the active frame (not the whole swing) • Tuning collision bounds so the character's feet sit in the grass instead of floating above it • Building a level editor with gizmos, snapping, prop previews, a player spawn point, and save-to-JSON • A HUD that depletes the UI-atlas slot and swaps the character portrait (healthy → hurt → worn-out → defeated) • Locked level progression — finish a level to unlock the next, persisted across sessions • Shipping the same dist/ build to iOS with Capacitor in a single prompt • Adding placement-insensitive virtual joysticks + jump/attack touch buttons, with walk vs run thresholds 🔗 LINKS • VibeGameDev: [REBRANDLY: vgd09-vgd] • Free resources (cheat sheet + prompts): [REBRANDLY: vgd09-free] • Spriterrific: https://spriterrific.com • Codex: https://chatgpt.com/codex • Phaser: https://phaser.io • Capacitor: https://capacitorjs.com • ElevenLabs: https://elevenlabs.io #vibegamedev #aigamedev #vibecoding #claudecode #codex #phaser #gamedev #indiedev #aigame #aitools #platformer #spriterrific #capacitor #ios #mobilegame #aianimation #imagegen #aimusic #vibecode #devlog #howto #tutorial