Custom engine over templates: Built from scratch to learn architecture, not configuration. React 19 bridge: UI overlay communicates with engine via typed events, not global state. PixiJS 8 + WebGL: Hardware-accelerated rendering with Canvas 2D fallback. GSAP timelines: Cinematic transitions between game states, not just CSS. TypeScript strict: Engine/UI contract mismatches caught at compile time.
01 The challenge
Most browser games use a prebuilt engine or a template. I wanted to prove I could design and implement a custom game engine from scratch — one that handles rendering, entity management, wave spawning, and state transitions without relying on a black box.
The constraints were tight: React 19 for UI overlay, PixiJS 8 for rendering, TypeScript for type safety across the engine boundary, and GSAP for cinematic transitions. The result needed to feel like a real game, not a tech demo.
02 Custom engine architecture
Instead of fighting PixiJS's scene graph, I built a thin engine layer that owns the game loop, entity lifecycle, and wave orchestration while delegating rendering to PixiJS.
- Game loop — requestAnimationFrame with delta-time normalization for consistent speed across refresh rates
- Entity system — base Entity class with position, velocity, health, and render state; subclassed for player, enemies, projectiles
- Wave manager — declarative wave definitions with spawn timing, enemy composition, and difficulty scaling
- State machine — explicit states for menu, playing, paused, gameover with clean transitions
- React bridge — UI overlay (menus, HUD, game over) in React 19, communicating with the engine via typed events
Templates teach you configuration, not architecture. Building a custom engine forced me to make real design decisions: how to handle collision, how to manage entity lifecycles, how to decouple game logic from rendering. Those are the skills that transfer to any complex system.
03 The 5 insect classes
Each class has distinct movement patterns, attack behaviors, and visual identities. Diversity isn't just cosmetic — it changes how players approach each wave.
| Class | Role | Behavior |
|---|---|---|
| Beetle | Tank | Slow, high HP, charges in straight lines |
| Wasp | Skirmisher | Fast, erratic movement, hit-and-run attacks |
| Ant | Swarm | Low HP, high numbers, follows pheromone trails |
| Spider | Controller | Web traps that slow player, ranged attacks |
| Mantis | Boss | Multiple attack phases, pattern-based combat |
Each class is a standalone TypeScript module with its own AI state machine. Adding a new class requires implementing the Entity interface and registering it with the wave manager.
04 Rendering & visual style
Sci-fi cyberpunk aesthetic with neon bio-luminescent insects against a dark, atmospheric background. GSAP handles cinematic transitions between states.
- PixiJS 8 renderer — WebGL with automatic fallback to Canvas 2D
- Procedural sprites — insect bodies generated with bezier curves, not image assets
- Particle systems — damage numbers, explosion debris, trail effects
- GSAP timelines — entrance animations, wave transitions, death sequences
- Post-processing — bloom, chromatic aberration, scanlines for cyberpunk feel
Target: 60fps on integrated graphics. Object pooling for projectiles and particles. Spatial partitioning for collision detection. Render batching where possible. Profiled with PixiJS built-in stats.
05 Technical stack
| Layer | Implementation |
|---|---|
| Engine | Custom PixiJS 8 wrapper |
| UI Overlay | React 19 + TypeScript |
| Transitions | GSAP 3.12 |
| Language | TypeScript strict mode |
| Build | Vite |
| State | Zustand for UI state |
UI Overlay
HUD / Menus
Game Loop
Entity System
Transitions + VFX
Zustand State
Insectiles engine: React UI → PixiJS engine → GSAP transitions
06 What's next
The engine is functional but early-stage. Roadmap items:
- Procedural wave generation — dynamic difficulty scaling based on player performance
- Power-up system — temporary abilities that drop from enemies
- Leaderboard — local storage for now, cloud sync later
- Sound design — WebAudio synthesized SFX with adaptive music
- Mobile controls — touch-based movement and shooting
This is a private repo in active development. The engine architecture is solid, but gameplay depth, balance, and content are early-stage. Not ready for public release yet.
07 What I learned
Building a custom game engine teaches systems thinking that no tutorial can replicate:
- Interface boundaries matter — clean seams between engine and UI made iteration fast
- Entity composition over inheritance — behavior components beat deep class hierarchies
- Profiling early — PixiJS stats caught bottlenecks before they became refactors
- TypeScript pays off — catching engine/UI contract mismatches at compile time saved hours of debugging
- Transitions are gameplay — GSAP timelines turned state changes into moments players anticipate