# Phaser — Fast & Fun HTML5 Game Framework

> Phaser is a fun, free and fast 2D game framework for making HTML5 games for desktop and mobile web browsers. Canvas and WebGL rendering, physics systems (Arcade, Matter.js), sprite atlases, tilemaps, and animation built in.

## Install

Save the content below to `.claude/skills/` or append to your `CLAUDE.md`:

## Quick Use

```bash
npm i phaser
```

```ts
import Phaser from "phaser";

class MainScene extends Phaser.Scene {
  preload() {
    this.load.image("sky", "assets/sky.png");
    this.load.image("ball", "assets/ball.png");
  }

  create() {
    this.add.image(400, 300, "sky");
    const ball = this.physics.add.image(400, 100, "ball");
    ball.setBounce(0.8).setCollideWorldBounds(true);
    ball.setVelocity(Phaser.Math.Between(-200, 200), 20);
  }
}

new Phaser.Game({
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  physics: { default: "arcade", arcade: { gravity: { y: 300 } } },
  scene: MainScene,
});
```

## Intro

Phaser is a fast, free, and fun open-source framework for HTML5 game development. Created by Richard Davey in 2013, used to ship thousands of games on Poki, CrazyGames, itch.io, and commercial titles. v3 is the current stable; v4 brings a new rendering pipeline.

- **Repo**: https://github.com/phaserjs/phaser
- **Stars**: 39K+
- **Language**: JavaScript
- **License**: MIT

## What Phaser Does

- **Scene management** — Preloader, MainMenu, Game, GameOver
- **Physics** — Arcade (simple AABB), Matter.js (advanced rigid body)
- **Sprites & animations** — atlas, frame-by-frame, skeletal (Spine)
- **Tilemaps** — Tiled JSON loader with collision
- **Input** — keyboard, mouse, touch, gamepad
- **Audio** — Web Audio with spatial positioning
- **Cameras** — multi-camera, follow, zoom, shake
- **Particles** — emitters with physics
- **Plugins** — extend with custom systems

## Architecture

Game → Scene(s) → GameObjects → Display list. Each frame runs scene update(). Renderer is Canvas 2D or WebGL (auto-detect). Physics systems are optional plugins. Loader preloads assets before scene creates.

## Self-Hosting

Phaser ships with your game bundle. Deploy as static HTML to any CDN. Can also package with Cordova/Capacitor for mobile app stores.

## Key Features

- Canvas + WebGL renderer
- Arcade + Matter.js physics
- Tilemap support (Tiled)
- Animation system
- Audio with Web Audio API
- Input handling (keyboard/mouse/touch/gamepad)
- Plugin architecture
- Scene manager
- Camera system with effects
- Particle emitters

## Comparison

| Engine | Paradigm | Language | 3D | Best For |
|---|---|---|---|---|
| Phaser | 2D framework | JS | No | Web 2D games |
| PixiJS | 2D renderer only | JS | No | Custom engines |
| Babylon.js | 3D engine | TS | Yes | Full 3D games |
| Three.js | 3D library | JS | Yes | 3D scenes |
| PlayCanvas | 3D editor | JS | Yes | Collaborative dev |
| Unity WebGL | Full engine | C# | Yes | Cross-platform |

## FAQ

**Q: What size of games is it suitable for?**
A: Well-suited to small-to-medium 2D games — casual, puzzle, platformer, side-scrolling shooter, and farm-sim all work great. For large RPGs or 3D, consider Unity.

**Q: How do I deploy to mobile?**
A: Wrap it in a native shell via Capacitor/Cordova, or ship it as a pure-web PWA that installs to the home screen.

**Q: What's new in Phaser 4?**
A: A new render pipeline (higher performance), improved TypeScript support, and WebGPU exploration. v3 is still the primary maintained version.

## Sources & Credits

- Docs: https://docs.phaser.io
- GitHub: https://github.com/phaserjs/phaser
- License: MIT

---
Source: https://tokrepo.com/en/workflows/phaser-fast-fun-html5-game-framework-b3e55673
Author: Script Depot