web-games
Scannednpx machina-cli add skill vudovn/antigravity-kit/web-games --openclawFiles (1)
SKILL.md
3.0 KB
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
- 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
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.
Source
git clone https://github.com/vudovn/antigravity-kit/blob/main/.agent/skills/game-development/web-games/SKILL.mdView on GitHub Overview
Guides selecting web game frameworks (2D/3D/Hybrid), adopting WebGPU with WebGL fallback, and applying browser-focused performance and asset strategies. It also covers turning games into PWAs for offline play and efficient audio handling.
How This Skill Works
Start with a framework decision tree to match game type (2D -> Phaser or PixiJS; 3D -> Babylon.js or Three.js). Enable WebGPU with a WebGL fallback and use feature detection (navigator.gpu) for compatibility. Apply performance principles: compress assets, lazy load, pool objects, batch draw calls, and consider Web Workers for heavy work.
When to Use It
- You’re building a 2D game and deciding between Phaser 4 and PixiJS.
- You’re creating a 3D app and choosing between Three.js and Babylon.js.
- You want WebGPU now but need fallback for older browsers.
- You’re designing a game as a PWA for offline use and home screen install.
- You must optimize assets, reduce GC, and minimize draw calls for mobile.
Quick Start
- Step 1: Assess project type (2D/3D/Hybrid) and pick a framework: Phaser 4 for 2D, PixiJS 8 for rendering, Babylon.js 7 for full engine/XR, or Three.js for rendering-focused work.
- Step 2: Enable WebGPU with a WebGL fallback and implement feature detection (navigator.gpu) to ensure broad compatibility; set up an asset pipeline.
- Step 3: Apply performance and asset strategies: compress assets, implement lazy loading, use object pooling, batch draw calls, and consider Web Workers for heavy tasks.
Best Practices
- Asset compression with KTX2, Basis Universal, and WebP.
- Lazy loading of assets and streaming on demand.
- Object pooling to reduce garbage collection.
- Draw call batching to minimize state changes.
- Use Web Workers to offload heavy computation.
Example Use Cases
- A 2D game built with Phaser 4 leveraging full game features.
- A 2D rendering-focused experience using PixiJS 8 for UI and visuals.
- A 3D engine built with Babylon.js 7 for full features and XR support.
- A lightweight 3D visualization using Three.js.
- A PWA game with service worker caching, manifest, and HTTPS.
Frequently Asked Questions
Add this skill to your agents
