Phaser 3 Development Guide

Phaser 3 is a fast, free, and open-source HTML5 game framework. This skill provides guidance for architecting complex 2D games, specifically integrated with modern React/TypeScript stacks.

Core Concepts

1. The Game Instance

Always manage the game instance lifecycle. In React, use useRef for the container and useEffect to initialize/destroy.

const gameRef = useRef<HTMLDivElement>(null);
useEffect(() => {
  const config = { ... };
  const game = new Phaser.Game(config);
  return () => game.destroy(true);
}, []);

2. Scenes

Scenes are the building blocks. Use multiple scenes for overlays (UI, Hud).