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.