4e8e5069fa
- Added: api-patterns, app-builder, architecture, bash-linux, behavioral-modes, clean-code, code-review-checklist, database-design, deployment-procedures, docker-expert, documentation-templates, game-development, geo-fundamentals, i18n-localization, lint-and-validate, mobile-design, nestjs-expert, nextjs-best-practices, nodejs-best-practices, parallel-agents, performance-profiling, plan-writing, powershell-windows, prisma-expert, python-patterns, react-patterns, red-team-tactics, seo-fundamentals, server-management, tailwind-patterns, tdd-workflow, typescript-expert, vulnerability-scanner - Updated README: skill count 179 → 223 - Added credit for vudovn/antigravity-kit (MIT License) Source: https://github.com/vudovn/antigravity-kit
151 lines
3.0 KiB
Markdown
151 lines
3.0 KiB
Markdown
---
|
|
name: web-games
|
|
description: Web browser game development principles. Framework selection, WebGPU, optimization, PWA.
|
|
allowed-tools: Read, Write, Edit, Glob, Grep
|
|
---
|
|
|
|
# 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.
|