ScriptsApr 11, 2026·1 min read

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.

SC
Script Depot · Community
Quick Use

Use it first, then decide how deep to go

This block should tell both the user and the agent what to copy, install, and apply first.

npm i phaser
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.

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

Discussion

Sign in to join the discussion.
No comments yet. Be the first to share your thoughts.

Related Assets

Apache ECharts — Powerful Interactive Charting Library

Apache ECharts is a powerful, interactive charting and data visualization library for browsers. 40+ chart types, canvas/SVG rendering, streaming data, and GPU acceleration. The enterprise choice used by Alibaba, Baidu, and countless dashboards.

Script Depot

Three.js — JavaScript 3D Library for the Web

Three.js is the most popular 3D library for JavaScript — WebGL/WebGPU rendering made accessible. Build 3D scenes, models, shaders, physics, VR/AR, and interactive experiences without touching low-level graphics APIs.

Script Depot

Auth.js (NextAuth) — Authentication for the Web

Auth.js (formerly NextAuth.js) is a complete open-source authentication solution for Next.js, SvelteKit, Remix, Express, and more. 80+ OAuth providers, passwordless, magic links, database or JWT sessions, and first-class TypeScript.

Script Depot
◈Home🔍Search👤Me