Aegis Protocol

• 

  The Start Screen of the game showcasing the mech

Aegis Protocol Pilot the Titan. Save the Human. Aegis Protocol is a technical demonstration of high-performance, engine-free game development within the browser. It is a boss-rush action game that challenges the traditional boundaries of HTML5 Canvas by implementing a seamless Dual-Scale Combat System, allowing players to transition instantly between a 50-meter combat Mech and a vulnerable 2-meter Pilot. The Vision The core design philosophy was "Scale as a Mechanic." In most games, being "on foot" or "in a vehicle" requires loading screens or vastly different control schemes. I wanted to capture the cinematic tension of Pacific Rim mixed with the tactical fluidity of Titanfall, entirely within a lightweight web environment. The goal was to create a sense of vertigo: one moment you are a colossal machine crushing buildings beneath your feet, and the next, you are a fragile human navigating that same rubble to save survivors, all while the boss battle rages on in the background. Technical Architecture Built with React, TypeScript, and raw HTML5 Canvas, the game eschews heavy game engines (like Unity or Phaser) in favor of a custom-built, lightweight physics and rendering loop.

1. The Scale-Shift Engine The most complex engineering challenge was the coordinate system. The Problem: The game world is massive (4000x4000 units). The Mech requires a zoomed-out view (0.8x), while the Pilot requires a macro view (6.0x). The Solution: I implemented a custom camera interpolation system that lerps context.scale and camera.position simultaneously. To prevent rendering artifacts, the game utilizes dual-collision logic: Mech Mode: Uses Radial Collision detection for fluid movement against massive kaiju. Pilot Mode: Switches to Axis-Aligned Bounding Box (AABB) collision to allow the player to navigate between the tight alleyways of the procedurally generated buildings.
2. Procedural Web Audio API Rather than using static MP3 assets, Aegis Protocol features a fully procedural, reactive audio engine built on the Web Audio API. Dynamic Sequencing: The engine generates music in real-time using oscillators and noise buffers. Adaptive Mixing: The audio manages two parallel mix buses. Mech Bus: Industrial, rhythmic techno with heavy bass and distortion. Pilot Bus: Ambient thriller scores, using heartbeats, sonar pings, and high-pass filters. The Result: As the player ejects from the Mech, the audio crossfades instantly from adrenaline-pumping action to claustrophobic tension based on the player's distance from danger.
3. Visuals & Inverse Kinematics To achieve a "Retro-Neon" aesthetic without WebGL shaders, I utilized advanced Canvas composite operations. Procedural Animation: The Kaiju (Saurian/Wyvern types) utilize procedural animation and basic Inverse Kinematics (IK) for their tails and limbs, making their movement feel organic and unpredictable without sprite sheets. Post-Processing: A CSS-based CRT scanline and vignette overlay unifies the vector graphics, giving the game a gritty, arcade-cabinet feel. Challenges Overcome Performance: Rendering 150+ buildings, particle systems (plasma/sparks), and dynamic lighting at 60 FPS required strict object pooling for particles and projectiles to avoid Garbage Collection stutters. State Management: Synchronizing the React UI (health bars, scores) with the high-frequency Canvas render loop required a hybrid approach using useRef for game logic and throttled state updates for the DOM. Future Roadmap Aegis Protocol serves as a foundational framework. Future updates aim to include: WebSockets: Cooperative multiplayer (One player drives the Mech, the other plays the Pilot on the ground). Roguelite Elements: Upgrading the Mech chassis and Pilot gear between waves.

Built With

• gemini
• html5
• react-19
• tech-stack:-typescript