web-games

# Web Browser Game Development > Framework selection and browser-specific principles. --- ## 1. 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 | --- ## 2. 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` --- ## 3. 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 1. **Asset compression** - KTX2, Draco, WebP 2. **Lazy loading** - Load on demand 3. **Object pooling** - Avoid GC 4. **Draw call batching** - Reduce state changes 5. **Web Workers** - Offload heavy computation --- ## 4. 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 | --- ## 5. PWA for Games ### Benefits - Offline play - Install to home screen - Full screen mode - Push notifications ### Requirements - Service worker for caching - Web app manifest - HTTPS --- ## 6. 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 --- ## 7. 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. ## Limitations - Use this skill only when the task clearly matches the scope described above. - Do not treat the output as a substitute for environment-specific validation, testing, or expert review. - Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.