How to Make a 2D Fighting Game (Hitbox Loop 2026)

Street Fighter II did not invent one-on-one combat, but it locked the grammar every 2D fighter still speaks: a side-view plane, health bars, specials, and combos that chain on timing (Wikipedia Fighting game article, verified 2026-10-12). The hard part in 2026 is not finding a framework — it is shipping a loop where hitboxes actually resolve, a two-character roster looks consistent, and the input buffer forgives human hands. This guide is the full path for how to make a 2D fighting game without pretending you need a console SDK or a twelve-person animation team. You will lock fighter anatomy (hitbox, hurtbox, state machine), generate a sprite roster with Quick Sprites and Auto-Sprite v2, wire combo logic through WizardGenie’s dual-agent Planner-plus-Executor pattern, and bed the match with Music Gen plus SFX Gen. Every credit constant and citation below was re-checked against the Sorceress source or the live reference on 2026-10-12.

What searchers typing how to make a 2d fighting game actually want

DataForSEO lists how to make a 2d fighting game at 40 searches a month, KD 0, competition 0.04, intent informational (verified 2026-10-12 in tools/research-supplement.md, seed how to make a 2d game). KD 0 is a soft SERP. The adjacent head term how to make a fighting game already has a Sorceress primer at Court How to Make a Fighting Game (Browser Combo Loop 2026); this post owns the tighter 2D long-tail — side-view plane, sprite sheets, AABB hitboxes, and a two-fighter roster you can animate in a weekend.

Reader intent splits into three honest buckets: (1) “show me hitbox and hurtbox before I draw anything,” (2) “map idle / walk / jump / attack / block / hitstun onto a state machine I can actually code,” (3) “be honest about sprite and audio cost so I do not stall on art.” All three answered below. If you only need the abstract genre loop, start with the Court primer; if you are building a side-view match with sheets, stay here.

Fighter anatomy: hitbox, hurtbox, and the state machine

MDN’s Anatomy of a video game (verified 2026-10-12) reduces any game loop to present → accept input → interpret → calculate → repeat. A 2D fighter is that loop with three genre-specific primitives bolted on.

1. Hurtbox. The region that can take damage. Usually a stack of axis-aligned rectangles covering head, torso, and legs. Active almost every frame the fighter is vulnerable.
2. Hitbox. The region that deals damage. Active only during the “active” window of an attack (often 2 to 6 frames at 60 FPS). A punch’s hitbox is a small red rectangle on the fist arc, not the whole sprite.
3. State machine. Idle, walk, jump, attack, block, hitstun (plus optional knockdown and wake-up). Only one state is live. Transitions are gated by input, timers, and collision results.

A hit connects when any active hitbox from fighter A overlaps any active hurtbox from fighter B on the same frame. That is classic collision detection — the Wikipedia collision detection article (verified 2026-10-12) calls out axis-aligned bounding boxes (AABBs) as the cheap broad-phase test that games use before any fancy geometry. For a jam fighter, AABBs are not a shortcut; they are the product.

Publish a frame data table before you write combo code. Three columns per move: startup (frames before the hitbox appears), active (frames the hitbox exists), recovery (frames after the hitbox dies before you can act again). Example for a light punch at 60 FPS: startup 3, active 2, recovery 8. The Wikipedia fighting game article notes that combos have been fundamental since Street Fighter II in 1991 (verified 2026-10-12); frame data is how you make those combos deterministic instead of lucky.

Lock the sprite roster before you touch collision code

Most abandoned fighters die in the art queue, not the physics queue. Lock a two-fighter roster (plus one shared stage backdrop) before you write a single AABB test. Each fighter needs at minimum: idle, walk, jump, light punch, heavy kick, block, and hitstun. That is seven sheets per character. Keep silhouettes distinct — one tall rushdown shape, one squat zoning shape — so players can read who is who at 50% zoom.

Generate base stills in Quick Sprites at 9 credits per generation (CREDITS_PER_GEN = 9 at src/app/quick-sprites/page.tsx line 21, verified 2026-10-12). Use one shoulder prompt per roster so proportions stay consistent: “pixel art 2D fighting game character, side view, 64x96, white outline, cel-shaded, solid chroma background, no UI.” Change only archetype words (scarred striker, masked grappler) and palette. Plan on 4 to 6 generations per fighter to lock the idle before you animate. For the stage, send AI Image Gen a wide 16:9 prompt (“neon rooftop arena, side-view parallax layers, dusk, no characters”) and crop to your camera width.

If you want a deeper roster pipeline later, the sprite-sheet walkthrough at Grid How to Make a Sprite Sheet (Engine Atlas 2026) covers atlas packing once your match loop is already fun.

Turn stills into animation sheets with Auto-Sprite v2

Still portraits do not make a fighter. You need keyed frame strips. Pipe each locked still through Auto-Sprite v2: generate or import a short motion clip, key the chroma plate, and export a game-ready sheet. Cloud GPU keying on Auto-Sprite v2 bills SD at 1 credit per 10 frames and HD at 2 credits per 10 frames (src/app/autosprite-v2/page.tsx lines 3820–3827, verified 2026-10-12). A 40-frame light-punch strip at SD is about 4 credits. Local keying stays free when you run Corridor Key on your own machine.

Name sheets with the move and frame count baked in — striker_lp_12.png, grappler_hk_18.png — and keep a sidecar JSON that maps frame index → hitbox rect and hurtbox rect. That sidecar is the contract between art and code. If the punch sheet gains two frames of wind-up later, you edit the JSON, not half the combat file. For True Pixel palette locking after generation, see True Pixel and the pixel-art game workflow at How to Make a Pixel Art Game (Browser Workflow 2026).

Wire the combo system in WizardGenie

With frame data and sheets locked, the remaining work is code: a fighter controller, an input buffer, and a collision resolver. This is where WizardGenie earns its keep. The dual-agent label in the Sorceress source at src/app/wizard-genie/page.tsx line 299 (verified 2026-10-12) is explicit: “A smart Planner thinks; a cheap Executor codes. Same quality at roughly a quarter of the token cost.” Pair a top-tier Planner (Claude Opus 4.7, GPT-5.5, Gemini 3.1 Pro, or Grok 4.2) with a cheap Executor (DeepSeek V4 Pro, Kimi K2.5, MiniMax M2.7, Gemini 3.1 Flash, or GPT-5.5 Mini). Live lineup verified at src/app/_home-v2/_data/tools.ts lines 767–774 on 2026-10-12. Never put a frontier-priced model on the typing side — that erases the pattern. For pairing economics see Best AI Model for Vibe Coding (Executor Picks 2026).

A Planner brief that actually compiles on the first Executor pass:

Goal: add a 6-frame input buffer to FighterController.
File allowed: FighterController.ts only.
Change: each frame push the current directional + button
  snapshot into a ring buffer of length 6. On attack start,
  scan the buffer for LIGHT_PUNCH then HEAVY_KICK within
  the window and, if found, queue heavy kick as a cancel
  from light punch recovery frames 0-2.
Done when: holding right + LP then HK inside 100ms produces
  the heavy kick animation even if HK was pressed one frame
  early during LP recovery.
Out of scope: netcode, training mode, AI opponent.

Run that brief, then a second brief for the AABB resolver: each active frame, test attacker hitboxes against defender hurtboxes; on first overlap apply damage, switch defender to hitstun for N frames from the move table, and clear the attacker’s remaining active hitboxes for that move so one punch cannot multi-hit. Keep the runtime 2D. Phaser (verified 2026-10-12: open-source HTML5, WebGL + Canvas, 2D-only by design, 11+ years of active development) is a clean browser host if you want a framework; a raw canvas loop is fine if you want zero dependencies. Either way, stay on the side-view plane the genre defined.

Music Gen and SFX Gen for the match audio bed

A silent fighter feels unfinished even when the hitboxes are perfect. Generate three Music Gen beds at 10 credits each (MUSIC_CREDIT_COST = 10 at src/app/music-gen/page.tsx line 33, verified 2026-10-12): character select, match loop, and victory sting. Keep the match loop under two minutes and seamless so repeats do not click. For impacts, prompt SFX Gen for hit, whiff, block, jump land, and round-start callouts. Suno Sounds generations cost 2 credits each (SUNO_SOUNDS_CREDIT_COST = 2 at src/lib/sorceress-tools/audio/sfx.ts, verified 2026-10-12); Seed Audio paths bill 1 credit per second of output (SEED_AUDIO_CREDITS_PER_SECOND = 1 at src/app/api/sfx-gen/route.ts line 13, verified 2026-10-12).

Wire SFX to state transitions, not to button presses. Play the hit cue when the AABB resolver reports overlap, the whiff cue when an attack exits active frames with zero overlaps, and the block cue when the defender’s state is block during overlap. That mapping is what makes the match feel fair. For a deeper SFX pack workflow see AI Sound Effects Generator (Browser SFX Pack 2026).

Credits math, common issues, and the ship checklist

Honest jam budget at CREDITS_PER_DOLLAR = 100 (src/lib/models.ts line 69, verified 2026-10-12):

• 12 to 24 Quick Sprites generations × 9 credits = 108 to 216 credits
• 6 to 12 Auto-Sprite v2 strips at SD rates ≈ 24 to 60 credits
• 3 to 5 Music Gen beds × 10 credits = 30 to 50 credits
• 20 to 40 SFX Gen cues × 2 credits = 40 to 80 credits
• Dual-agent coding tokens for buffer + resolver ≈ 150 to 300 credits

Total: about 350 to 700 credits ($3.50 to $7.00). The 100-credit signup grant (SIGNUP_GRANT = 100 at src/app/api/admin/credits/route.ts line 12, verified 2026-10-12) covers the first roster pass. Browse the rest of the suite from the tools guide or the Sorceress home when you are ready to expand into training mode or a third fighter.

Common issues when you are learning how to make a 2d fighting game:

• Hits feel random. Your hitbox is probably parented to the sprite’s top-left instead of the fist bone. Offset the rect per frame in the sidecar JSON and draw debug overlays until every active frame looks correct.
• Combos drop on human timing. Lengthen the input buffer from 3 frames to 6 before you nerf damage. Lenient buffers are how arcade fighters stayed playable with thumbs.
• Block never wins. If block does not shrink or disable hurtboxes on the correct axis, every overhead will fake you out. Gate high and low block against high and low hitboxes explicitly.
• Sprites smear in motion. Turn off texture filtering / interpolate-colours on import, and keep pixel art at integer scale factors (2×, 3×, 4×).

Ship checklist: two selectable fighters, one stage, three rounds, health bars, round announcer text, keyboard controls for both sides (or one side plus a trivial CPU that blocks on random ticks), and a debug toggle that paints hitboxes red and hurtboxes green. When that checklist is green, you have finished how to make a 2d fighting game at jam scope — everything else is balance patches and roster DLC.

The verdict

How to make a 2d fighting game in 2026 is a hitbox problem first and an art problem second. Lock AABB pairs and frame data, generate a consistent two-fighter roster with Quick Sprites and Auto-Sprite v2, let WizardGenie’s Planner-plus-Executor pair write the buffer and resolver, then bed the match with Music Gen and SFX Gen. Cite the genre history when you need authority — Street Fighter II’s combo conventions and the side-view plane are still the baseline per the Wikipedia fighting game article (verified 2026-10-12) — but ship the loop before you chase tournament netcode. The Court primer covers the broader fighting-game shape; this post is the 2D sheet-and-box path that actually leaves your hands on a playable match.