# 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 as a script file and run:

## 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: 适合多大游戏？**
A: 适合中小 2D 游戏。休闲、益智、平台跳跃、横版射击、农场模拟都没问题。大型 RPG 或 3D 建议 Unity。

**Q: 如何部署到手机？**
A: 用 Capacitor/Cordova 打 native 壳；或者纯 Web 做 PWA 安装到主屏。

**Q: Phaser 4 有什么变化？**
A: 新渲染管线（更高性能）、改进的 TypeScript 支持、WebGPU 探索。v3 仍然主力维护。

## 来源与致谢 Sources

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

---
Source: https://tokrepo.com/en/workflows/b3e55673-3588-11f1-9bc6-00163e2b0d79
Author: Script Depot