HISTORICAL CHAMPIONS

Inspiration

Historical records often feel static and disconnected from the modern audience. We were inspired to bridge the gap between rigorous historical context and the high-octane excitement of arcade fighting games. By using the Crusades as a backdrop, we wanted to create a "Living History" experience where every duel is documented by an AI that understands the gravity of the conflict.

What it does

Historical Champions is a cinematic 2.5D fighting game featuring legendary figures like Baldwin IV and Salahuddin Ayyubi. The core innovation is the Pre-emptive AI Narrative system. As players fight, the AI monitors the match's momentum. Before the final blow even lands, Gemini 2.5 Flash begins crafting a unique historical chronicle of the battle. Once finished, a zero-latency high-fidelity voice synthesis (TTS) narrates the "Legendary Chronicle" to the player, making every victory feel like a recorded moment in time.

How we built it

Engine: Developed using React with a custom Canvas 2D Physics Engine for high-performance collision detection and character movement.

AI Integration: Leveraged Gemini 2.5 Flash for narrative generation and Gemini 2.5 TTS for the cinematic war-narrator voice.

Physics: Implemented a solid character interaction system that prevents "phasing," ensuring tactile combat.

Visuals: Integrated Tailwind CSS for a premium UI and used Imagen 4.0 to generate high-fidelity character assets and thematic arena backgrounds.

Challenges we ran into

The primary challenge was Latency. Traditional AI generation can take seconds, which breaks the flow of a fast-paced game. We solved this by implementing a "Low-HP Trigger." When a character's health drops below 15%, the game pre-emptively calls the Gemini API to generate the result narrative. By the time the final hit is delivered, the story is already cached and ready to be narrated instantly.

Accomplishments that we're proud of

We are particularly proud of the Zero-Latency Narrative Loop. Seeing the AI narrate a specific battle result immediately after the knockout—without a loading spinner—creates a seamless "AAA" gaming feel. Additionally, building a custom physics engine that handles character overlaps smoothly within a React environment was a major technical milestone.

What we learned

We learned how to "hide" AI latency within gameplay loops. We also discovered that providing the AI with specific historical personas (like the "Charon" voice model) significantly enhances the immersion of the game. On the technical side, we deepened our understanding of PCM-to-WAV audio conversion for real-time AI voice playback in the browser.

What's next for HISTORICAL CHAMPIONS

The future of Historical Champions lies in Multiplayer Chronicles. We plan to implement global leaderboards where the AI narrations are saved as a shared "Historical Record" for the community. We are also looking into using Gemini's multi-modal capabilities to allow players to upload their own armor designs, which the AI can then describe and incorporate into the battle narratives.

Built With

• collision
• custom
• framework:-react-ai-models:-gemini-2.5-flash-(narrative)
• gemini-2.5-flash-tts-(voice-synthesis)
• image
• imagen-4.0-(visual-assets/thumbnails)-styling:-tailwind-css-assets:-lucide-react
• logic:
• physics
• processing
• svg/base64