playbooks

home / skills / vudovn / antigravity-kit / game-development

game-development skill

/.agent/skills/game-development

This skill helps you choose web game frameworks, optimize WebGPU/WebGL usage, and apply browser-friendly performance and asset strategies.

npx playbooks add skill vudovn/antigravity-kit --skill game-development

Review the files below or copy the command above to add this skill to your agents.

Files (11)
SKILL.md
4.6 KB
---
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.

Overview

This skill covers practical principles for building high-performance web browser games using TypeScript and modern web APIs. It guides framework selection, WebGPU adoption, asset strategies, performance optimization, audio handling, and PWA setup. The guidance is focused on trade-offs and actionable decisions for 2025-era browsers.

How this skill works

The skill inspects project requirements (2D vs 3D, engine features, rendering needs) and recommends frameworks like Phaser, PixiJS, Three.js, or Babylon.js. It evaluates runtime capabilities such as WebGPU support via navigator.gpu and proposes a WebGPU-first approach with WebGL fallbacks. It also outlines concrete techniques for asset compression, lazy loading, pooling, and service-worker-driven caching for PWAs.

When to use it

  • Choosing a framework based on game type (2D full engine vs rendering-focused 2D/3D).
  • Starting a new project where WebGPU is viable but fallback is required for older browsers.
  • Optimizing runtime performance for low-memory or throttled-tab environments.
  • Designing offline-capable or installable browser games using PWA features.
  • Implementing efficient audio and asset pipelines for mobile and limited bandwidth.

Best practices

  • Select Phaser for 2D full-featured games, PixiJS for high-performance 2D rendering, Three.js for lightweight 3D, and Babylon.js for full-engine 3D/XR needs.
  • Prefer WebGPU for new projects and feature-detect navigator.gpu; provide a WebGL fallback for broader compatibility.
  • Compress textures (KTX2/Basis), models (glTF + Draco/Meshopt), and audio (WebM/Opus) and lazy-load nonessential assets.
  • Implement object pooling, draw-call batching, and offload heavy logic to Web Workers to reduce GC and main-thread stalls.
  • Build a service worker and web app manifest to enable offline play, caching strategies, and installability while serving over HTTPS.

Example use cases

  • A 2D platformer using Phaser with progressive asset streaming and audio pooling for mobile.
  • A 3D visualization that uses Three.js and WebGPU where supported, falling back to WebGL.
  • An installable PWA game that prefetches next-level assets in the background and resumes audio on user interaction.
  • A multiplayer lobby UI built with PixiJS for responsive rendering and minimal draw calls.

FAQ

Should I start with WebGPU or WebGL?

Prefer WebGPU for new projects but implement a WebGL fallback to maintain broader browser coverage and graceful degradation.

How do I ensure audio plays reliably on mobile?

Create or resume the AudioContext on the first user interaction, pool audio sources, and compress sounds with WebM/Opus.