Web Browser Game Development
Framework selection and browser-specific principles.
- Framework Selection
Decision Tree
What type of game? │ ├── 2D Game │ ├── Full game engine features? → Phaser │ └── Raw rendering power? → PixiJS │ ├── 3D Game │ ├── Full engine (physics, XR)? → Babylon.js │ └── Rendering focused? → Three.js │ └── Hybrid / Canvas └── Custom → Raw Canvas/WebGL
Comparison (2025)
Framework Type Best For
Phaser 4 2D Full game features
PixiJS 8 2D Rendering, UI
Three.js 3D Visualizations, lightweight
Babylon.js 7 3D Full engine, XR
- WebGPU Adoption
Browser Support (2025)
Browser Support
Chrome ✅ Since v113
Edge ✅ Since v113
Firefox ✅ Since v131
Safari ✅ Since 18.0
Total ~73% global
Decision
-
New projects: Use WebGPU with WebGL fallback
-
Legacy support: Start with WebGL
-
Feature detection: Check navigator.gpu
- Performance Principles
Browser Constraints
Constraint Strategy
No local file access Asset bundling, CDN
Tab throttling Pause when hidden
Mobile data limits Compress assets
Audio autoplay Require user interaction
Optimization Priority
-
Asset compression - KTX2, Draco, WebP
-
Lazy loading - Load on demand
-
Object pooling - Avoid GC
-
Draw call batching - Reduce state changes
-
Web Workers - Offload heavy computation
- Asset Strategy
Compression Formats
Type Format
Textures KTX2 + Basis Universal
Audio WebM/Opus (fallback: MP3)
3D Models glTF + Draco/Meshopt
Loading Strategy
Phase Load
Startup Core assets, <2MB
Gameplay Stream on demand
Background Prefetch next level
- PWA for Games
Benefits
-
Offline play
-
Install to home screen
-
Full screen mode
-
Push notifications
Requirements
-
Service worker for caching
-
Web app manifest
-
HTTPS
- Audio Handling
Browser Requirements
-
Audio context requires user interaction
-
Create AudioContext on first click/tap
-
Resume context if suspended
Best Practices
-
Use Web Audio API
-
Pool audio sources
-
Preload common sounds
-
Compress with WebM/Opus
- Anti-Patterns
❌ Don't ✅ Do
Load all assets upfront Progressive loading
Ignore tab visibility Pause when hidden
Block on audio load Lazy load audio
Skip compression Compress everything
Assume fast connection Handle slow networks
Remember: Browser is the most accessible platform. Respect its constraints.
When to Use
This skill is applicable to execute the workflow or actions described in the overview.