Shipping an isometric action game directly inside a mobile browser comes with hard technical friction. Mobile web browsers enforce strict memory caps, single-threaded JavaScript execution, and zero allowance for multi-megabyte app downloads. If an arcade game takes ten seconds to download and initialize on a cellular connection, players leave before the first frame renders.
For MADNESS: Last Stand, the design goal was an arcade boss battler with zero installation friction. The player steps onto a floating arena grid, dodges telegraph attacks from a towering multi-part wooden titan, and balances long-range blaster fire with melee combat against encroaching lava minions.
The architecture, system design, procedural audio engine, and asset pipeline were designed, built, and tested inside Antigravity using Gemini. Working within Antigravity enabled fast technical exploration across 2:1 isometric coordinate math, procedural Web Audio synthesis, and client-side canvas image keying, taking the game from design specifications to a deployed web release in hours.
👉 Launch and Play MADNESS: Last Stand Live in Your Browser
(Instant play, no download or install required, touch and desktop ready)
The Stack at Your Fingertips
| Layer | Selected Technology | Why Chosen | What Was Rejected |
|---|---|---|---|
| Engine | Phaser 3 (3.80.1) | Sub-second cold boot, 2D WebGL 2.0 rendering, lightweight dynamic depth sorting | Unity or Godot 4 (heavy 15 to 30 MB WebAssembly binaries) |
| Audio | Procedural Web Audio API | Zero audio asset payload, 4 algorithmic BGM tracks, hardware-clock playback | Audio sprite MP3/WAV packs (10 to 20 MB audio payloads) |
| Asset Pipeline | Client-side Canvas chroma keying | Automated in-browser background removal for raw generative pixel art | Manual graphic cutout workflows and heavy transparent PNG sheets |
| Tooling | TypeScript + Vite | Monomorphic V8 class optimizations, instant HMR, dual-entrypoint studio build | Webpack (slow bundling) or Vanilla JS (runtime bugs in complex state) |
| Physics | Phaser Arcade Physics | Microsecond AABB collision resolution at 60 FPS, minimal CPU load | Matter.js or Box2D (unnecessary polygon math for grid combat) |
| Controls | Contextual action button + virtual stick | Unified button for blaster fire and melee punch, zero screen obstruction | Static multi-button touch schemes that clutter mobile viewports |
| Delivery | PWA + Cloudflare Pages | Global edge distribution, offline service worker support, sub-second loads | Native mobile app stores or centralized application servers |
1. Engine: 2D Isometric Projection over Heavy 3D Engines
Isometric games often tempt developers into adopting full 3D runtimes like Three.js, Babylon.js, or Godot 4. While full 3D engines provide native spatial coordinates, they introduce heavy GPU matrix calculations, complex shader pipelines, and substantial runtime downloads. Exporting Godot 4 or Unity to WebAssembly yields 15 to 30 megabytes of compressed binaries. On mobile devices, compiling and initializing those large modules ties up the main thread and introduces visible boot delays. Multi-threaded WebAssembly exports also demand custom server headers, including Cross-Origin-Opener-Policy and Cross-Origin-Embedder-Policy, which complicates running inside webviews or third-party iframes.
Phaser 3 provides hardware-accelerated WebGL 2.0 rendering with automated Canvas fallback in a bundle that compresses to under 380 kilobytes. Because Phaser operates directly on 2D surfaces, isometric projection becomes an exercise in Cartesian coordinate mapping. Game logic runs on a virtual 6 by 5 grid, projecting positions to screen space with standard 2:1 dimetric formulas. Entity depth sorting updates each frame by calculating the sum of the ground grid coordinates. This lightweight calculation keeps the hero, floating titan hands, and ground minions in proper visual perspective without 3D depth buffers.
2. Audio: Algorithmic Sound Synthesis over Multi-Megabyte Audio Packs
Traditional browser games allocate 60% or more of their total download size to audio assets. Delivering a full arcade score with title music, combat loops, boss attacks, gunshots, and victory fanfare typically requires 10 to 15 megabytes of compressed audio files. Decoding those compressed files into uncompressed audio memory on mobile devices consumes valuable RAM and risks thread stutter during action sequences.
MADNESS: Last Stand eliminates audio downloads entirely. The audio subsystem synthesizes every sound effect and musical score in real time using the native Web Audio API.
The custom music engine plays four algorithmic tracks:
- The Starting Screen theme provides an atmospheric 120 BPM intro using triangular bass waves and pentatonic lead melodies.
- The Battlefield theme runs a driving 135 BPM combat progression powered by sixteenth-note sawtooth basslines and synthetic percussion.
- The Victory Fanfare delivers an upbeat 132 BPM celebration built on major triad chords and arpeggiated synth runs.
- The Defeat Cadence closes matches with a slow 88 BPM descending minor progression.
Combat sound effects run through dedicated synthesizer voices. Laser blasts slide a frequency-swept oscillator from high to low frequencies, explosions and gunshots shape white noise through bandpass biquad filters, and punch impacts deliver short pitch-bent bursts. Audio asset download size is exactly 0 bytes. Because all notes schedule directly on the hardware clock of the browser audio context, audio timing remains sample-accurate regardless of frame rate dips.
3. Asset Pipeline: Client-Side Canvas Chroma Keying over Pre-Rendered Sprite Sheets
Generating custom 16-bit arcade pixel art with generative models produces expressive character stances, but raw model outputs arrive on solid backgrounds. Manually cutting out dozens of isometric angles and combat frames in desktop image editors takes days. Shipping raw PNG files with alpha channels substantially increases network payload size compared to compressed JPEGs.
The asset loader solves this by processing sprites directly in the browser during startup. The game downloads compressed JPEG sprites generated with targeted pixel art prompts. During the boot scene, an off-screen HTML5 Canvas context samples the four corner pixels of each image, identifies the background color, and executes an automated flood-fill chroma key pass with edge despill. The keyed canvas output registers directly into Phaser’s WebGL texture manager.
The asset loader yields execution back to the browser main thread for 16 milliseconds between asset passes. This prevents the browser UI from locking and keeps the boot animation running smoothly at 60 frames per second on mobile phones.
4. Tooling: TypeScript, Vite, and the Dual-Entrypoint Studio Harness
Coordinating combat logic across multi-part bosses, projectile pools, and spawning minions demands rigid type boundaries. TypeScript provides compile-time guarantees for boss phases, hit registration, and player state transitions. In modern JavaScript engines like V8, objects with stable property layouts create monomorphic hidden classes, eliminating dynamic property lookup overhead during the 60 FPS game loop.
Vite manages the build process using a dual-entrypoint architecture:
- The production game serves a lean, tree-shaken client bundle optimized for immediate play in the browser.
- The interactive asset preview studio provides a dedicated secondary application harness where developers can audition procedural music tempos, test soundboard frequencies, cycle through all 13 hero stances and 8 minion angles, and tune chroma key thresholds in isolation.
Separating the balancing environment from the player runtime kept development iterations fast without increasing the production download size.
5. Combat & Physics: Lightweight AABB Grid Collisions over Rigid-Body Engines
Adding full rigid-body physics engines like Matter.js or Box2D often introduces unnecessary computational overhead. Rigid-body engines calculate rotational friction, continuous polygon vertex collisions, and restitution physics across every active body.
MADNESS: Last Stand is an arcade reaction battler. It relies on Phaser Arcade Physics with Axis-Aligned Bounding Box checks. Collisions between player blaster rounds, minion contact zones, and boss attack areas resolve in less than 0.1 milliseconds per frame.
Boss attacks use telegraph floor overlays that render semi-transparent warning patterns across ground tiles 1.5 seconds before strikes land. Players read the floor telegraphs and use continuous analog navigation to step into safe grid zones before the titan slams down a column or row. Because collision math uses minimal CPU resources, the browser dedicates nearly the entire 16.6-millisecond frame budget to rendering sprites and particle effects.
6. Controls & Mobile Delivery: Contextual Dual-Action Controls and Edge PWA
Arcade games on touchscreen devices often suffer from crowded on-screen buttons. Laying out separate virtual buttons for shooting, punching, and dodging leads to misclicks and causes the player’s hands to obscure incoming boss attacks.
The control architecture in MADNESS: Last Stand simplifies touch interactions:
- The left thumb controls continuous analog movement across the isometric ground plane using a dynamic 360-degree floating virtual joystick.
- The right thumb operates a single contextual action button. When the player holds ammunition, the button fires the blaster with automated target-locking onto active boss components. When ammunition reaches zero, the same button automatically transitions into a melee punch button to fight off approaching minions.
- The ammo recovery loop spawns a minion immediately upon running out of bullets. Defeating the minion causes it to drop a weapon crate containing fresh ammunition, restoring ranged fire and returning the player to long-range boss combat.
The game deploys as a Progressive Web App hosted on Cloudflare Pages. Service workers cache static assets for instantaneous repeat loading. A custom orientation handler monitors device aspect ratios, displaying an orientation prompt if held in portrait mode and locking the viewport to landscape orientation for dedicated arcade play.
Built with Antigravity and Gemini
Developing an isometric arcade game with real-time procedural audio, custom asset pipelines, and multi-phase boss state machines typically requires juggling several disconnected development tools. In MADNESS: Last Stand, this entire engineering cycle was designed, coded, and verified inside Antigravity using Gemini:
- System architecture, 2:1 isometric transformation math, and boss attack state machines were planned directly in the conversation context.
- The procedural Web Audio synthesis engine, containing four complete music tracks and synthesized combat sound effects, was modeled mathematically and implemented in TypeScript with zero external audio files.
- The DNA Batch Generator prompt suites were structured to produce consistent 16-bit pixel art across 8 isometric angles for characters, titan components, minions, and arena floor tiles.
- The client-side canvas chroma keying algorithm was implemented and calibrated to remove solid background pixels automatically at startup.
- Mobile ergonomics, touch response, and orientation handlers were verified across browser sessions using automated tooling.
Production Metrics Summary
| Metric | Measurement |
|---|---|
| Production JavaScript Bundle | ~384 kB gzipped (including main game runtime and preview studio) |
| Audio Asset Payload | Exactly 0 bytes (100% procedural Web Audio synthesis) |
| Cold Startup Time | Under 800 milliseconds on 4G cellular connections |
| Target Frame Rate | Stable 60 FPS on desktop and mobile browsers |
| Asset Pipeline | In-browser canvas chroma keying and flood-fill alpha transparency |
| Deployment Target | Cloudflare Pages (Progressive Web App with Service Worker) |
| Playable Live URL | https://madness-2d-isometric.pages.dev/ |
| Source Repository | [email protected]:ihsanberahim/madness-2d-isometric.git |
Experience the Combat Rhythm Live
Ready to feel the combat rhythm, time your dodges through titan telegraphs, and hear real-time procedural audio synthesis in action?
👉 Play MADNESS: Last Stand Now in Your Browser
(Loads in under a second. Compatible with desktop browsers and mobile touch screens.)