The Food Fight Auto-Battler — where anthropomorphic street food wage epic battles on a cafeteria table. Built entirely in React Native.
A MOBA-brained auto-battler where the heroes are street food. Everyone already understands team comp — now make it delicious.
Instead of knights and dragons, the heroes are street food, snacks, and desserts. The battleground is a cafeteria table. Unique, highly brandable, and leaves endless room for creative 2D animations — ketchup splatters, soda explosions, the works.
Anyone who has played Mobile Legends instinctively understands team composition. Beefy frontline, ranged attacker, healer. Bite-Sized Brawlers uses this exact logic — but makes it visually instant and universally relatable.
Build a blazing-fast companion website (e.g., bitebrawlers.com) hosting all Brawlers, optimal grid placements, and a global leaderboard. Advanced SEO on this site captures organic traffic from queries like "best mobile auto battlers" or "how to beat level 50 Bite Brawlers", funneling directly into downloads.
Four core food fighters, each with a distinct MOBA role, unique targeting behavior, and a screen-shattering Ultimate.
Sits right in the front row. Big, slow, massive Health. Makes the enemy spend all their attacks on him.
Slams the ground. All enemies are Stunned (miss their next 3 Ticks) and the Burger gains a temporary shield.
Sits in the back corners. Very low Health but blistering Attack Speed. Targets the lowest-HP enemy to finish them off.
Shoots 5 high-damage potato spears at the lowest-health enemy. If the Burger keeps enemies busy, the Fries will wipe out the entire team.
Middle row. Slow individual attacks but a devastating AoE Ultimate. Drops sticky syrup on entire 2×2 grid sections.
Drops a puddle of syrup on a 2×2 section of the enemy grid. Massive burst damage and slows attack speed by 50%.
Back row. Casts cooling auras to restore team health. The difference between a wipe and a comeback.
Restores 30% HP to the friendly Brawler with the lowest health and grants them an attack speed buff.
Built-in AI rule: At the start of battle, immediately jump to the furthest enemy tile. Bypasses all Tanks entirely and starts assassinating the squishy Marksmen hiding in the back. The anti-frontline wildcard.
The entire game flows through six highly-crafted screens built in React Native.
The idle hub. An isometric, cartoonish kitchen counter where your equipped team of 5 Brawlers chills and passively generates currency.
Maximum anticipation and visual explosion. This is where the dopamine peaks.
Tactile satisfaction. All about progression through satisfying drag gestures.
Where the strategy happens. Setup phase → auto-battle spectacle.
Long-term retention through social mechanics and guild economy.
Ethical monetization. Offers things that look too good to ignore without forcing anyone.
A pure state machine running on a Tick system. No game engine needed — just Zustand, Reanimated, and Skia.
Every 100 milliseconds, the game's central Zustand store fires a Tick. Each Tick runs these checks across all living Brawlers:
Each Brawler runs its targeting AI to pick the enemy to attack based on role (nearest / lowest HP / backline).
Brawler moves forward toward the target. Reanimated translates the sprite with a slight rotation wobble to simulate walking.
Attack connects. Enemy HP decreases. Floating damage number animates upward and fades. Lottie hit effect triggers.
Both attacker and target gain Energy. When energy hits 100, Brawler stops basic attacks and casts their Ultimate.
When it's a Burger's turn to attack, he goes through 4 visual states:
Energy bar fills. A yellow "!" pops over his head. Sprite scales 1.0→1.2 (growing with anger). Medium haptic fires.
withSpring animation flies the Burger toward the enemy grid square. Wind streak Lottie animation trails behind.
Burger image swaps to wide-mouth expression. Enemy swaps to damaged sprite. Ketchup splat Lottie plays. HP bar drops.
Springs back to home square. Does a mini victory jump, eyes return to "ready" state. Turn indicator shifts to next Brawler.
Win: Massive "VICTORY" banner drops with heavy haptics + reward chest. Loss: Greyed "DEFEAT" screen + Damage Graph button so players understand exactly why they lost and how to improve.
The secret sauce. How characters choose their targets is where all the strategic depth lives.
Characters target the closest enemy in their lane by default. Your opponent's frontline Tanks soak up 90% of standard damage. Burgers protecting the back row.
The wildcard. At battle start, immediately teleport to the furthest enemy tile. Bypasses Tanks entirely, assassinates the squishy Marksmen hiding in the corners.
Always target the enemy with the lowest total HP. Designed to finish off weakened enemies, preventing them from getting a chance to cast their Ultimate.
It hits when the player perfectly positions their Burger to absorb all damage, allowing their Soda Cup just enough time to build 100 Energy and wipe out the enemy team with a massive explosion — right before the Burger dies. This is the tension-and-release loop that makes auto-battlers addictive.
Basic attacks are fun. Ultimates are what make the game visually spectacular.
To make Brawlers feel alive, swap character expressions during battle:
| State | Visual Cue | Trigger |
|---|---|---|
| Idle | Neutral angry eyes, determined | Waiting for turn |
| Attacking | Wide open mouth, screaming | Phase 2 & 3 |
| Winning | Huge smile, winking | After killing enemy |
| Taking Hit | Eyes squeezed shut, dizzy | Enemy attacks |
| Low Health | Sweating, bruised, nervous | Below 30% HP |
The million-dollar cycle that keeps players coming back every single day.
Every single day, the engaged player does this:
When the player sees the 3-hour timer and taps "Start Timer" — you have guaranteed this user will open your app again in 3 hours. This is the true hook.
Three tiers of rewards calibrated to keep players' hands on the screen at every timescale.
Pure tactile satisfaction. Requires zero brainpower but feels physically incredible.
Tension and release. Validates the player's intelligence.
Adrenaline, retention, and monetization. The slot machine effect.
If you nail the visual and audio feedback for all three tiers, the game becomes mathematically impossible to put down. The Mythic pull is the slot machine effect — because the game is connected to the cloud, they can immediately show off that Mythic Brawler in Club chat or use it in their next battle.
No main menu. Instant action. The player learns everything through doing — never through reading.
App loads directly into battle. No menu. Player sees their Level 1 Burger and French Fry vs. an evil Moldy Donut. An animated finger points: "Tap FIGHT to defend your lunch!"
Battle is rigged. Player cannot lose. Massive "VICTORY!" drops. A shiny Delivery Bag appears.
The shiny Delivery Bag sits center screen. Animated finger points: "Tap to open!" Player taps. Bag shakes and bursts open with a bright flash.
Three reward cards slide out. New Brawler unlocked for the first time.
Game forces player to Pantry. Burger card is glowing green. Finger points: "Your Burger is ready to level up! Tap him!"
They see the UPGRADE button and tap it. Cash-register sound plays. Burger spins, gains shiny new stats, big text announces Level 2.
Full Kitchen home screen unlocks. All three Brawlers chill on the counter. A friendly chef pops up: "Welcome to your Kitchen! Keep fighting to unlock more recipes!"
Bottom nav bar finally appears. Player is now free. They feel smart, powerful, and ready to compete.
Use a isTutorialComplete boolean saved in MMKV. While false, hide the bottom tab bar and force the user to click only the highlighted buttons. All other UI is non-interactive until the tutorial completes.
Cap Brawler levels at 20. Modular accessories unlock visual rank. Three damage sprites per Brawler create the illusion of animation through smart state swapping.
Cap characters at Level 20. This keeps math balanced, prevents ugly "4.54 Million HP" numbers, and gives players a clear finish line. For endlessness, give them Unlimited Stages instead of unlimited levels.
Never generate 100 images. Generate 15–20 images total and create thousands of combinations via stacking.
// Everything stacks perfectly — same canvas size! <View style={{ width: 100, height: 100 }}> <Image source={baseBurger} style={{ position: 'absolute', width: '100%', height: '100%' }} /> {level > 3 && <Image source={sunglasses} style={{ position: 'absolute', width: '100%', height: '100%' }} /> } {level > 7 && <Image source={headband} style={{ position: 'absolute', width: '100%', height: '100%' }} /> } </View>
All assets must share the same canvas size (512×512 px). If the Burger is centered in a 512×512 image, and the sunglasses are positioned at eye level in a 512×512 image, they align perfectly with zero math.
Three PNG assets per Brawler. Swap them based on HP percentage. Hide the swap behind a flash animation so the player's brain perceives it as physical damage.
A massive single-player experience that never runs out. Clean math, capped levels, unlimited stages.
Candy-Crush-style winding path through different "Food Zones." Levels 1–20 in "The Greasy Grill," 21–40 in "The Frosty Freezer."
Before any campaign battle, let the player peek at exactly which enemies are waiting. Teaches deep strategy without any tutorial text.
Endless survival tower. No HP reset between floors. Every floor beaten, a rogue-like buff selection appears. Every run feels unique.
Broken vending machine in the Kitchen corner. Fills with loot while the app is closed, based on how far the player reached in the Adventure Map.
Cap Brawler levels at Level 20 (clean math, no "4.54 Million HP" numbers) + Unlimited Stages to fight in = thousands of hours of gameplay without complexity creep for the developer.
Ethical, player-first. Offers things that look too good to ignore without ever forcing a purchase.
Watch a 30-second ad to receive a free Delivery Bag. You get ad revenue, they get 50 free Gems. Completely optional — players love it.
Habit Builder500 Gems + guaranteed Epic Brawler (Spicy Taco). Show a shiny red "90% OFF!" badge using position: absolute. Once a player spends $1.99, they're 5× more likely to spend $10 later.
High ConversionUnlocks a premium reward track. As players win battles they progress and earn exclusive Brawlers like the Mythic Sushi Roll. Recurring revenue, player-friendly.
Recurring RevenueSunglasses, hats, and unique skins for favorite Brawlers. Zero pay-to-win — purely aesthetic. Players who love a character will absolutely buy this.
Zero P2WStandard hard currency. "Handful of Gems" at $4.99, "Bucket of Gems" at $19.99. On purchase: heavy haptic + Gem icons rain down the screen.
Standard IAPInstantly unlock any Delivery Bag without waiting. Impatient players (highest spenders) will pay for convenience. Classic mobile monetization trigger.
Whale TriggerThe exact AI tool stack, image specs, and copy-paste prompts for every asset in the game.
| Asset Type | Resolution | Format | Purpose |
|---|---|---|---|
| Brawler Bases | 512 × 512 px | PNG-24 (Transparent) | Main body + damage state swaps |
| Accessories | 512 × 512 px | PNG-24 (Transparent) | Hats, glasses — same canvas as base |
| UI Icons | 128 × 128 px | PNG-24 (Transparent) | Coins, status icons, buttons |
| Backgrounds | 1920 × 1080 px | JPG (Compressed) | Kitchen, Battle Arena environments |
| Skill Effects | 256 × 256 px | PNG or Lottie JSON | Splatters, hits, flashes |
A cute, cartoon anthropomorphic [DOUBLE CHEESEBURGER] with angry eyes and small arms and legs, standing in a fighting pose. 2D mobile game asset, vibrant colors, thick black outlines, vector art style, flat shading, symmetric composition, pure solid white background, high resolution --v 6.0
A cute, cartoon anthropomorphic [DOUBLE CHEESEBURGER] with a massive bite taken out of the side, missing a chunk, looking distressed and bruised. 2D mobile game asset, vibrant colors, thick black outlines, vector art style, flat shading, pure solid white background --v 6.0
A completely squashed, flattened, and ruined [DOUBLE CHEESEBURGER], messy crumbs and debris, defeated cartoon 'X' eyes. 2D mobile game asset, defeat state, vibrant colors, thick black outlines, vector art style, flat shading, pure solid white background --v 6.0
A single cartoon [RED MARTIAL ARTS HEADBAND], floating alone, designed to be worn by a 2D mobile game character. Vibrant colors, thick black outlines, vector art style, flat shading, pure solid white background --v 6.0
Isometric view of a wooden school cafeteria table with scattered pencils and a lunch tray. 2D mobile game background, cartoon style, vibrant, slightly blurred depth of field, no characters, empty arena --ar 16:9 --v 6.0
A cartoon comic-book style [POW! IMPACT STAR], floating alone, 2D mobile game visual effect, vibrant colors, thick black outlines, vector art style, pure solid white background --v 6.0
Generate only the Burger and all his accessories first. Build the entire game — battle, leveling, inventory — using only the Burger. Once the "Burger version" is 100% polished and feels fun, then spend one weekend generating Soda, Fries, and Taco. The Modular System means you just swap the image source — all code works automatically.
Supabase as the Source of Truth. The phone only displays — all critical logic runs server-side.
In 2026, Supabase is the best choice for games because it uses PostgreSQL — ideal for relational game data (this Burger belongs to this Player). Easy to handle separate clans, shared resources, and real-time chat.
// User taps Upgrade button in React Native // 1. App sends request to server — NEVER directly update DB from client const { data, error } = await supabase .rpc('upgrade_brawler', { brawler_id: 'burger_001' }); // 2. Edge Function checks: "Does this player have enough Crumbs and Copies?" // 3. If yes → subtracts Crumbs, increments Burger level in DB // 4. Returns { success: true, new_level: 7, new_stats: {...} } // 5. ONLY NOW does the app play the Level Up animation if (data.success) { playLevelUpAnimation(); updateLocalState(data.new_stats); }
Every time the app opens, it asks the cloud: "What is this player's current inventory?" If a player hacks their phone to add a new Burger, the cloud ignores it because it was never recorded in the database. The cloud is always the source of truth.
Offline campaign saves locally to MMKV (fast local storage). The moment the phone sees internet, it pushes local wins to Supabase. Rule: Never allow the Store or Gems to work offline. This ensures 100% revenue security.
Logic first. Art second. Polish last. One Brawler. Full game. Then expand.
Set up React Native project. Use Zustand. Build 3×3 grid. Make a "Burger" box move and attack an "Enemy" box. Core game loop in squares.
Integrate Supabase. Level Up saves to cloud. New level persists when app is closed and reopened.
Build Pantry and Kitchen screens. Buttons work, screens navigate correctly. Art can be ugly placeholders.
AI asset generation. Generate Burger, Soda, and Fries using the Modular Method (Base + Accessories). Background-remove everything.
Add Skia and Reanimated "juice." Replace moving boxes with AI Brawlers. Attack flashes, bouncy transitions.
Build the Adventure Map. Create 20 stages against AI-controlled "Moldy Snacks."
Async PvP Arena. Players upload their Deck to Supabase. Other players fight it. Trophies and league system.
RevenueCat integration. Starter Pack, Season Pass, Gem bundles. Server-side receipt verification.
Clubs and Chat. Players join Franchises, request and donate Brawler cards. Real-time Supabase subscriptions.
Beta test with 10 friends. Watch them play. If they get confused, fix the UI. Prioritize feel over features.
ASO and Marketing. App Store screenshots, keyword-optimized descriptions. Set up Next.js companion website.
Submit to Apple App Store ($99/yr) and Google Play ($25 one-time). Soft launch in Philippines or Canada first.
Sign up early — $99/year. Identity verification can take a full week. Don't let this block your submission date. Register at month 10 at the latest.
Release only in one small country (Philippines or Canada) for 2 weeks. If players keep playing, click the button for Worldwide release. Test retention before scaling marketing spend.