BattleMonsters

Inspiration

We were inspired by the incredible pace of generative AI, especially the creative power of large language models and modern image generators. As fans of comics and RPG battle games, we wondered:

What if players could not only design their own heroes but watch them come to life in a comic-book style battle narrative?

Originally, we envisioned a purely strategic battle system where players picked attacks to reduce their opponent’s HP. But after seeing how expressive and fun the AI-generated images were, we shifted to embrace creativity — letting the visuals and storytelling take center stage.

We think this pivot gives BattleMonsters strong viral and emotional potential, empowering anyone to become a comic storyteller with just a simple prompt.

What it does

BattleMonsters is an interactive browser-based game where players:

Prompt the creation of their battle hero
Receive an AI-generated character with three unique powers
Fight an opponent in a real-time, comic-inspired battle arena
Trigger AI-generated comic panels for each action taken
Use new prompts mid-battle, updating their character visually and their abilities

Instead of just combat logs, each fight becomes a living comic book, panel by panel.

How we built it

Frontend (React & Tailwind CSS):

React for fast, fluid interactive gameplay
Tailwind for consistent, stylish UI
Character creation and battle interfaces built with reusable components
Game state managed through React Context for clean state transitions

Backend (Supabase & Edge Functions):

Supabase Edge Functions for secure, scalable API calls to the AI
GPT-4 for consistent, structured text-based character and battle action generation
Replicate’s black-forest-labs/flux-schnell image model for fast, battle-friendly image generation (more tolerant of fantasy battle violence than other models)

Why this matters: We balanced frontend and backend responsibilities carefully, creating a modern, scalable architecture that supports a generative, real-time experience.

Challenges we ran into

Getting consistent, strictly structured outputs from GPT-4 (like exactly 3 powers every time)
Managing the asynchronous and sometimes slow nature of image generation, while keeping the user experience snappy
Handling API rate limits and cost pressures during development
Dealing with quality variations from generative images (prompting retries, handling errors)
At first we hoped to have AI-generated battle videos, but they were too slow and expensive for real-time — so we pivoted to comic panels, which ended up even more charming

Accomplishments that we’re proud of

Building a system where anyone can instantly co-create a comic hero and battle story
Crafting a seamless, engaging flow from prompt to playable comic
Successfully integrating two separate AI models (text + image) into a single, coherent experience
Designing a game that encourages playful imagination and creativity over pure strategy
Delivering a polished experience in a short timeframe thanks to modern serverless and React tooling

What we learned

Prompt engineering is critical to get reliable, predictable outputs from generative AI
Supabase Edge Functions made it surprisingly easy to scale and secure AI workloads
A responsive user interface with clear loading feedback is vital when working with slower generative tasks
Video generation is still impractical for real-time gaming, but comic panels hit a great sweet spot between quality and speed
Balancing “AI freedom” and “user control” is essential for a coherent and fun game

What’s next for BattleMonsters

Adding multiplayer battles, letting friends team up or fight in shared comic adventures
Exploring more advanced image models for higher consistency and style control
Investigating partial video generation for replay highlights instead of real-time panels
Polishing the comic panel layout with more dynamic transitions and panel-to-panel storytelling

We believe BattleMonsters has huge potential to inspire creativity, empower storytelling, and bring players together through the magic of generative AI.