game-development_skill

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.