Phaser 简介 #

什么是 HTML5 游戏？ #

HTML5 游戏是使用 Web 技术开发的游戏，可以在浏览器中直接运行，无需安装任何插件。随着 HTML5、CSS3 和 JavaScript 的发展，Web 游戏已经可以达到接近原生游戏的性能和体验。

text 
┌─────────────────┐
│   HTML5 游戏     │
│   技术栈         │
├─────────────────┤
│  HTML5 - 结构   │
│  CSS3  - 样式   │
│  JavaScript - 逻辑│
│  Canvas/WebGL - 渲染│
└─────────────────┘

什么是 Phaser？ #

Phaser 是一个快速、免费、开源的 HTML5 游戏框架，专为创建跨平台的 2D 游戏而设计。它由 Richard Davey（Photon Storm）开发，于 2013 年首次发布，是目前最流行的 HTML5 游戏框架之一。

核心定位 #

text 
┌─────────────────────────────────────────────────────────────┐
│                         Phaser                               │
├─────────────────────────────────────────────────────────────┤
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐         │
│  │  Canvas     │  │  WebGL      │  │  自动渲染    │         │
│  └─────────────┘  └─────────────┘  └─────────────┘         │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐         │
│  │  物理引擎    │  │  输入处理    │  │  音频系统    │         │
│  └─────────────┘  └─────────────┘  └─────────────┘         │
└─────────────────────────────────────────────────────────────┘

Phaser 的历史 #

发展历程 #

text 
2013年 ─── Phaser 1.0 发布
    │
    │      Richard Davey 创建
    │      基于 Pixi.js 渲染
    │      支持 Canvas 渲染
    │
2014年 ─── Phaser 2.0
    │
    │      大量新功能
    │      性能优化
    │      社区快速增长
    │
2016年 ─── Phaser CE (Community Edition)
    │
    │      社区维护版本
    │      持续更新
    │
2018年 ─── Phaser 3.0
    │
    │      完全重写
    │      全新渲染架构
    │      支持 WebGL
    │
2020年 ─── Phaser 3.50
    │
    │      新的粒子系统
    │      改进的物理引擎
    │
2023年 ─── Phaser 3.60+
    │
    │      持续优化
    │      更多功能
    │
至今   ─── 行业标准
    │
    │      最流行的 HTML5 游戏框架
    │      活跃的社区

里程碑版本 #

版本 时间 重要特性
1.0 2013 初始发布，Canvas 渲染
2.0 2014 完整的游戏功能集
2.x 2016 CE 社区版本
3.0 2018 完全重写，WebGL 支持
3.50 2020 新粒子系统
3.60 2023 性能优化，新功能

为什么选择 Phaser？ #

传统游戏开发的问题 #

在使用 Phaser 之前，HTML5 游戏开发面临以下问题：

javascript 
// 原生 Canvas：需要手动处理一切
const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');

function gameLoop() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  // 手动绘制所有内容
  ctx.drawImage(playerImg, playerX, playerY);
  
  // 手动处理碰撞检测
  if (playerX < enemyX + 50 &&
      playerX + 50 > enemyX &&
      playerY < enemyY + 50 &&
      playerY + 50 > enemyY) {
    // 碰撞处理
  }
  
  requestAnimationFrame(gameLoop);
}

Phaser 的解决方案 #

javascript 
// Phaser：简洁高效的游戏开发
class GameScene extends Phaser.Scene {
  create() {
    this.player = this.physics.add.sprite(100, 100, 'player');
    this.enemy = this.physics.add.sprite(300, 100, 'enemy');
    
    // 自动碰撞检测
    this.physics.add.collider(this.player, this.enemy, hitEnemy);
  }
}

Phaser 的核心特点 #

1. 自动渲染 #

Phaser 自动选择最佳渲染方式：

javascript 
const config = {
  type: Phaser.AUTO,  // 自动选择 WebGL 或 Canvas
  width: 800,
  height: 600
};
text 
┌─────────────────────────────────────────────────────────────┐
│                    渲染器选择                                │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│   Phaser.AUTO                                               │
│        │                                                    │
│        ▼                                                    │
│   ┌─────────────┐                                           │
│   │ WebGL 可用？ │                                           │
│   └──────┬──────┘                                           │
│          │                                                  │
│     ┌────┴────┐                                             │
│     │         │                                             │
│    Yes       No                                             │
│     │         │                                             │
│     ▼         ▼                                             │
│  WebGL     Canvas                                           │
│                                                             │
└─────────────────────────────────────────────────────────────┘

2. 内置物理引擎 #

javascript 
// Arcade Physics - 轻量级
physics: {
  default: 'arcade',
  arcade: {
    gravity: { y: 300 }
  }
}

// Matter.js - 真实物理
physics: {
  default: 'matter',
  matter: {
    gravity: { y: 1 }
  }
}

3. 强大的场景系统 #

javascript 
class BootScene extends Phaser.Scene {
  constructor() {
    super({ key: 'BootScene' });
  }
  
  preload() {
    this.load.image('logo', 'logo.png');
  }
  
  create() {
    this.scene.start('MenuScene');
  }
}

4. 丰富的输入处理 #

javascript 
// 键盘输入
this.cursors = this.input.keyboard.createCursorKeys();

// 鼠标/触摸
this.input.on('pointerdown', (pointer) => {
  console.log(pointer.x, pointer.y);
});

// 游戏手柄
this.input.gamepad.once('down', (pad) => {
  this.gamepad = pad;
});

5. 完整的动画系统 #

javascript 
// 帧动画
this.anims.create({
  key: 'walk',
  frames: this.anims.generateFrameNumbers('player', { start: 0, end: 7 }),
  frameRate: 10,
  repeat: -1
});

// 补间动画
this.tweens.add({
  targets: this.player,
  x: 400,
  duration: 2000,
  ease: 'Power2'
});

6. 粒子系统 #

javascript 
const particles = this.add.particles(0, 0, 'particle', {
  speed: { min: -100, max: 100 },
  scale: { start: 1, end: 0 },
  lifespan: 2000
});

Phaser 与其他框架对比 #

Phaser vs PixiJS #

特性 Phaser PixiJS
类型 游戏框架 渲染引擎
物理引擎 内置 需要额外集成
输入处理 完整 基础
音频系统 完整 无
学习曲线 中等 中等
适用场景 完整游戏 渲染需求

Phaser vs Unity #

特性 Phaser Unity
语言 JavaScript C#
平台 Web 优先 多平台
学习曲线 较低 较高
开发速度 快 中等
3D 支持 有限 完整
适用场景 2D Web 游戏 专业游戏

Phaser vs Cocos Creator #

特性 Phaser Cocos Creator
语言 JavaScript/TS JavaScript/TS
编辑器 无官方编辑器 可视化编辑器
原生导出 需要封装 内置支持
中文文档 社区翻译 官方中文
学习曲线 中等 中等

Phaser 的应用场景 #

1. 休闲游戏 #

javascript 
// 消除类游戏
class MatchGame extends Phaser.Scene {
  create() {
    this.grid = [];
    for (let y = 0; y < 8; y++) {
      this.grid[y] = [];
      for (let x = 0; x < 8; x++) {
        const gem = this.add.sprite(
          x * 64 + 32,
          y * 64 + 32,
          'gems',
          Phaser.Math.Between(0, 5)
        );
        gem.setInteractive();
        this.grid[y][x] = gem;
      }
    }
  }
}

2. 教育游戏 #

javascript 
// 数学学习游戏
class MathGame extends Phaser.Scene {
  create() {
    this.question = this.add.text(400, 100, '5 + 3 = ?', {
      fontSize: '32px'
    });
    
    this.answers = [6, 7, 8, 9];
    this.answers.forEach((answer, i) => {
      const btn = this.add.text(200 + i * 100, 300, answer.toString(), {
        fontSize: '24px'
      }).setInteractive();
      
      btn.on('pointerdown', () => this.checkAnswer(answer));
    });
  }
}

3. 广告游戏 #

javascript 
// 品牌互动游戏
class BrandGame extends Phaser.Scene {
  create() {
    this.logo = this.add.image(400, 300, 'brand-logo');
    
    this.tweens.add({
      targets: this.logo,
      scale: 1.2,
      duration: 1000,
      yoyo: true,
      repeat: -1
    });
  }
}

4. 多人游戏 #

javascript 
// 实时多人游戏
class MultiplayerGame extends Phaser.Scene {
  create() {
    this.socket = io();
    
    this.socket.on('playerMoved', (data) => {
      this.otherPlayers[data.id].setPosition(data.x, data.y);
    });
  }
  
  update() {
    if (this.player) {
      this.socket.emit('playerMovement', {
        x: this.player.x,
        y: this.player.y
      });
    }
  }
}

Phaser 的核心概念 #

游戏配置 #

javascript 
const config = {
  type: Phaser.AUTO,        // 渲染器类型
  width: 800,               // 游戏宽度
  height: 600,              // 游戏高度
  parent: 'game-container', // 父容器
  backgroundColor: '#000',  // 背景色
  physics: { },             // 物理配置
  scene: [ ]                // 场景列表
};

场景生命周期 #

text 
┌─────────────────────────────────────────────────────────────┐
│                    场景生命周期                              │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│   init() ─── 初始化数据                                     │
│      │                                                      │
│      ▼                                                      │
│   preload() ─── 加载资源                                    │
│      │                                                      │
│      ▼                                                      │
│   create() ─── 创建游戏对象                                 │
│      │                                                      │
│      ▼                                                      │
│   update() ─── 游戏循环（每帧调用）                         │
│      │                                                      │
│      ▼                                                      │
│   shutdown() ─── 清理场景                                   │
│                                                             │
└─────────────────────────────────────────────────────────────┘

游戏对象 #

javascript 
// 常见游戏对象
this.add.image(x, y, 'key');           // 图像
this.add.sprite(x, y, 'key');          // 精灵
this.add.text(x, y, 'text', style);    // 文本
this.add.rectangle(x, y, w, h);        // 矩形
this.add.circle(x, y, radius);         // 圆形
this.add.container(x, y);              // 容器

Phaser 的设计哲学 #

1. 约定优于配置 #

javascript 
// 简单的默认配置
const config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  scene: GameScene
};

// 完整的自定义配置
const config = {
  type: Phaser.WEBGL,
  width: 800,
  height: 600,
  parent: 'game',
  backgroundColor: '#2d2d2d',
  physics: {
    default: 'arcade',
    arcade: {
      gravity: { y: 300 },
      debug: true
    }
  },
  render: {
    pixelArt: true,
    antialias: false
  },
  scene: [BootScene, MenuScene, GameScene]
};

2. 模块化设计 #

text 
Phaser 模块结构
├── Phaser.Game          - 游戏实例
├── Phaser.Scene         - 场景管理
├── Phaser.GameObjects   - 游戏对象
├── Phaser.Physics       - 物理引擎
├── Phaser.Input         - 输入处理
├── Phaser.Loader        - 资源加载
├── Phaser.Tweens        - 补间动画
├── Phaser.Time          - 时间管理
├── Phaser.Sound         - 音频系统
└── Phaser.Renderer      - 渲染器

3. 事件驱动 #

javascript 
// 使用事件系统
this.events.on('customEvent', (data) => {
  console.log('Event received:', data);
});

this.events.emit('customEvent', { value: 42 });

学习建议 #

  1. 掌握 JavaScript 基础：ES6 语法、类、异步编程
  2. 理解游戏循环：update 函数是游戏的心脏
  3. 从简单开始：先创建简单的游戏，逐步增加复杂度
  4. 多看示例：官方示例库有大量可学习的代码
  5. 动手实践：通过实际项目学习最快

下一步 #

现在你已经了解了 Phaser 是什么，接下来学习 安装与配置，开始你的游戏开发之旅！

最后更新：2026-03-29