跪拜 Guibai
← All articles
Frontend · JavaScript

A Fighting Game Prototype Got Its Hitboxes Right, Then Stick Figures Killed It

By 强尼银手 ·
Read original on juejin.cn ↗ Google Translate ↗ Alt translation

Art asset production, not code, is the primary cost driver in fighting game development, and current AI tools cannot generate frame-consistent sprites with alpha channels, so that cost remains unavoidable. Teams should validate a single fully-styled character before building the architecture, because feature validation doesn't equal product viability.

Summary

Fighting game code is a one-time investment: a three-box hit system (hitbox, hurtbox, pushbox), a state machine, and a frame data table let a developer add characters by filling in numbers. The prototype's 1,321-line HTML had all of that working, including multi-hit dedup by frame index, hitstop, and a debug overlay. The cost curve flips at art: each character needs 300–600 hand-drawn frames, and adding a character means adding hundreds of images with zero leverage. At four characters, art costs 1.9 times the code; at eight, it's 3.1 times.

AI won't rescue that line. Generated sprites lack cross-frame consistency because models have no memory between frames, and video models output compressed pixel video without an alpha channel. So the paper-thin art budget for a fighting game is a hard constraint. The prototype's author put up a stick-figure version to validate mechanics, and it was technically sound; a user's reaction that it was unplayable killed the project. The post's advice is to spend half a day producing one finished-looking character before building architecture, because feature validation is not product validation.

That's the core lesson that generalizes to any game with sprite animation: you need the visual style approved early, and you need to know that art is the linear cost that will blow your schedule. The comparison to KOF'97 is telling: SNK had 50–70 people for 10–12 months (over 13,000 person-days) but reused sprites from previous games, built their own hardware, and employed professional pixel artists. Modern indie fighting games survive by deliberately choosing art that is cheap to produce and easy to match to hitboxes.

Takeaways
— Hit detection uses three boxes per frame: hitbox for attack reach on active frames, hurtbox for vulnerable area, and pushbox for body occupancy.
— Each fighting game character needs 300–600 hand-drawn animation frames; adding a character adds that many frames with no reuse.
— A frame data table stores per-frame duration, pose, and hit properties; the state machine reads it to drive logic and presentation.
— Hit registration deduplicates by frame index, enabling multi-hit moves like a three-hit thrust that applies each strike separately.
— A fixed 60 Hz logic clock with an accumulator keeps hit detection identical across display refresh rates.
— At 4 characters, art costs 1.9× the code; at 8 characters, it's 3.1×.
— SNK's KOF'97 consumed over 13,000 person-days, mostly because it reused sprites from earlier releases.
— AI image generators lack cross-frame memory, and video models output compressed pixel video without alpha channels, so AI cannot supplant art assets.
Conclusions

The art bottleneck is a general law for sprite-based games: because each frame must be independently referenceable and aligned to hitboxes, simplifying the visual style doesn't proportionally cut the work; the requirement of per-frame reference stays.

The prototype's death came from treating a developer-facing placeholder as a player-facing product. The post's half-day cost to render one finished character before architecture would have surfaced that objection immediately, not after the whole system was built.

SNK's reuse of old sprites shows that even a big studio amortizes art across years; a solo developer starting from zero has a structural cost disadvantage that no code architecture can offset.

Concepts & terms
hitbox
The attack box that exists only during the active frames of an attack and defines where the attack can connect.
hurtbox
The vulnerable box that always exists and changes with pose, defining where the character can be hit.
pushbox
The body occupancy box that prevents characters from overlapping, usually narrower than the hurtbox.
frame data table
A data structure mapping each action to a sequence of frames with duration, pose, and optional hit properties, decoupling animation from logic.
hitstop
A few frames of global freeze when a hit lands, used to emphasize impact.
Source: juejin.cn ↗ Google Translate ↗ Backup ↗