web-games
Master browser game development by matching your project to the right framework—Phaser for full 2D features, PixiJS for rendering, Three.js or Babylon.js for 3D. Covers WebGPU browser support, asset compression strategies, performance optimization, and PWA implementation for offline play.
Web-games helps you select the right framework for browser game development, from 2D engines like Phaser to 3D options like Babylon.js.
AI-generated summary based on this skill's SKILL.md
Install
vudovn/ag-kit/web-games · repository language: TypeScript
git clone https://github.com/vudovn/ag-kit
cp -r ag-kit/.agents/skills/game-development/web-games ~/.claude/skills/web-gamesnpx skillfed install vudovn/ag-kit/web-gamesFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
What are the best frameworks for 2D web games?
web-games covers multiple 2D options. Phaser provides a complete framework with physics, input, and animations built-in—ideal for full-featured 2D games. PixiJS excels at rendering performance when you need a lightweight, GPU-accelerated 2D renderer. Choose Phaser for rapid development with batteries included; choose PixiJS if you're building custom game logic and want minimal overhead.
How do I choose between Three.js and Babylon.js for 3D browser games?
web-games addresses both 3D powerhouses. Three.js has broader community support and more third-party assets; Babylon.js offers tighter WebGL integration and stronger documentation for game-specific features. Both run well in modern browsers. Your choice depends on team familiarity and project scope—Three.js for ecosystem breadth, Babylon.js for integrated game tooling.
What does web-games say about WebGPU adoption and browser support?
web-games covers WebGPU as an emerging standard for 2024 and beyond. WebGPU offers lower-level GPU access and better performance than WebGL, but browser support is still limited to recent versions of Chrome, Firefox, and Safari. For production games, web-games recommends WebGL as the stable choice today, with WebGPU as a future-proofing consideration for new projects.
How can I optimize web game performance and asset loading?
web-games emphasizes progressive asset loading, compression strategies, and rendering optimization. Use texture atlasing and compression formats (WebP, KTX2) to reduce file sizes. Implement lazy loading for non-critical assets and consider streaming geometry. On mobile, web-games recommends lower resolution textures and reduced draw calls. Profile with browser DevTools to identify bottlenecks.
Can I build offline-capable games using web-games techniques?
web-games covers PWA (Progressive Web App) patterns and service workers for offline play. Register a service worker to cache game assets, code, and data locally. Use IndexedDB or LocalStorage for game state. This approach works best for games with modest asset sizes. web-games notes that large 3D games may hit storage limits, so prioritize critical assets and implement intelligent cache strategies.
What audio and compression strategies does web-games recommend?
web-games addresses Web Audio API for dynamic sound mixing and spatial audio in games. For compression, use MP3 or AAC for music and OGG Vorbis for effects to balance quality and file size. Implement audio sprite sheets to reduce HTTP requests. On mobile, web-games emphasizes testing audio playback policies—many browsers require user interaction before sound plays.
SKILL.md
rendered from the published skill — quoted content, verbatim
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
| 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
| 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
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 1 file
.agents/skills/game-development/web-games/SKILL.md