Phaser.js 场景管理与生命周期详解

在基于 Phaser 3 构建 Web 2D 游戏时，场景（Scene）是承载实体渲染、物理计算、UI 交互与状态控制的独立单元。掌握场景系统不仅能解决多界面切换问题，更能通过多场景并行管理（Parallel Scenes）实现 HUD 解耦、模态暂停遮罩与平滑的资源按需调度。本文剖析 Phaser 场景管理器的双循环调度内核、生命周期各阶段钩子的触发规则、核心操控指令的选型边界以及防止内存泄漏的最佳实践。

一、Phaser 3 场景认知与多场景并行架构

许多初学者容易将游戏中的“场景”误解为电影切换镜头式的单一直线画布。而在 Phaser 3 中，场景具有更高的自主性与模块化特征：每一个 Phaser.Scene 实例都拥有独立的摄像机管理器（CameraManager）、显示列表（DisplayList）、更新列表（UpdateList）以及事件发射器（EventEmitter）。这意味着游戏可以同时存在多个并发运行的场景，彼此独立运作又协同呈现。

在单引擎实例中，所有的场景均由 SceneManager 统一管控。理解这种并发分层机制是设计复杂游戏界面的关键：

• 主世界场景（World Scene）：负责渲染瓦片地图（Tilemap）、运行物理世界模拟（Arcade 或 Matter.js）、处理玩家角色与怪物的碰撞互动。主摄像机随玩家移动缩放。
• 仪表盘场景（HUD / UI Scene）：以固定视口坐标悬浮于世界场景之上，显示血条、魔力值、小地图、计时器或移动端虚拟摇杆。无论世界场景如何移动缩放，HUD 保持屏幕不动。
• 模态窗口场景（Modal / Pause Scene）：当玩家触发暂停、结算或打开背包时动态挂载，位于最顶层，吞噬交互事件并绘制半透明遮罩。

从图 2 可以清晰看出引擎的调度逻辑：每当浏览器触发 requestAnimationFrame 驱动游戏步进时，SceneManager 会遍历内部的场景队列。对于处于活跃状态（Active）的场景，调用其 update() 驱动内部逻辑计算；随后按照场景栈的层叠顺序（从底层到顶层），由渲染器依次遍历各场景的 DisplayList，将游戏对象按层次绘制到同一个 Canvas 画布上。

二、场景规范化创建、注册与挂载流程

在现代 JavaScript 或 TypeScript 项目中，官方推荐采用 ES6 Class 继承方式定义场景。通过模块化封装，每个场景的职责更加清晰单一。

标准的场景工程化落地上分为四个连续步骤，下面以一套完整的关卡与 HUD 并行联动代码展示各环节具体编写：

1. 场景类定义与生命周期钩子编写

import Phaser from 'phaser';

// 场景 1：资源预加载场景
export class PreloadScene extends Phaser.Scene {
  constructor() {
    super({ key: 'PreloadScene' });
  }

  preload() {
    // 加载精灵图片与音效，此时 Phaser 的 LoaderPlugin 负责网络分发
    this.load.image('hero', 'assets/sprites/hero.png');
    this.load.image('tiles', 'assets/maps/dungeon_tiles.png');
  }

  create() {
    // 资源就绪后，启动主战斗场景，并附带关卡初始数据
    this.scene.start('BattleScene', { level: 1, difficulty: 'normal' });
  }
}

// 场景 2：主战斗世界场景
export class BattleScene extends Phaser.Scene {
  constructor() {
    super({ key: 'BattleScene' });
  }

  // 1. 接收上一个场景传入的启动数据
  init(data) {
    this.currentLevel = data.level || 1;
    this.playerScore = 0;
    this.isGameOver = false;
  }

  // 2. 构建实体与物理逻辑
  create() {
    this.player = this.physics.add.sprite(200, 300, 'hero');
    this.player.setCollideWorldBounds(true);

    // 并行启动 HUD 界面层，不影响当前战斗场景
    this.scene.launch('UIScene', { initialScore: this.playerScore });

    // 注册退出时的销毁监听，防止事件泄露
    this.events.once(Phaser.Scenes.Events.SHUTDOWN, this.cleanUp, this);
  }

  // 3. 主循环步进计算
  update(time, delta) {
    if (this.isGameOver) return;
    // 状态更新与移动判定...
  }

  cleanUp() {
    // 释放本场景注册的全局事件，杜绝重启时的重复监听
    this.game.events.off('PLAYER_ATTACK');
  }
}

2. 静态注册进 Game 配置清单

定义好的场景类必须在游戏启动配置中注册给 Phaser.Game。配置数组中首个被排列的场景，将作为整个游戏的初始入口自启执行：

const gameConfig = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  parent: 'game-container',
  physics: {
    default: 'arcade',
    arcade: { gravity: { y: 400 }, debug: false }
  },
  // 场景注册数组：引擎就绪后将自动实例化首个场景 (PreloadScene)
  scene: [PreloadScene, BattleScene, UIScene]
};

const game = new Phaser.Game(gameConfig);

三、四大核心生命周期钩子执行深度剖析

当一个场景被唤起时，Phaser 按照严格的状态机拓扑依次调度其内部的方法。每一个钩子都有不可违背的职责范围：

1. init(data) —— 参数初始化

当通过 this.scene.start('Target', payload) 启动目标场景时，init(data) 是最先执行的回调。它的唯一职责是接收透传参数、重置本场景的基本成员变量（如计分、血量参数、关卡标识）。此时，显示对象和渲染管线尚未准备完毕，绝对不能在此阶段调用 this.add.sprite。

2. preload() —— 资源入库与全局缓存

preload() 负责声明需要从网络或本地下载的外部资产。Phaser 内置的 LoaderPlugin 在此启动下载队列。

• 全局缓存机制：Phaser 的 TextureManager 和 CacheManager 是全局单例的。如果某张纹理在启动场景（Boot/Preload）中已经被加载进缓存，后续的战斗场景无需重复 preload，直接在 create 中根据 key 取用即可。
• 自驱动阻塞特性：如果 preload() 中声明了资源加载，Phaser 会阻塞流程，等待所有网络资源全部下载解码完毕，才会触发下一步的 create()。如果没有需要加载的资源，可完全省略该方法。

3. create(data) —— 实体装配与上下文构建

在所有静态资源解码就绪后，create() 被同步调用。这是场景构建的核心工厂，用于：

• 实例化游戏精灵、瓦片地图、粒子发射器并加入场景的 DisplayList；
• 创建刚体并配置物理碰撞组（Colliders / Overlaps）；
• 注册输入监听（键盘 cursors、鼠标或触控点击）；
• 配置场景级动画状态机与音效播放器。

4. update(time, delta) —— 帧循环主控

每当场景进入运行态（RUNNING）后，只要其处于活跃状态，宿主主循环便会在每一帧调用 update()。参数 time 为从引擎启动以来的总毫秒数，delta 为距离上一帧过去的时间间隔（通常在 60fps 下约为 16.6ms）。

四、ScenePlugin 核心控制指令与选型决策

开发者通过场景实例挂载的 this.scene（即 ScenePlugin 代理）对场景进行流转控制。由于 Phaser 提供了多种不同的场景状态转换方法，选型不当会导致画面卡死或内存溢出。

1. start() 与 launch() 的本质分野

• scene.start(key, data) —— 单向流转与清场重置：执行后会立即停止当前场景（触发当前场景的 shutdown 钩子，清理其 DisplayList 中的所有实体），然后全新启动目标场景。适用于从“开始菜单”进入“关卡”，或者从“第一关”结算到“第二关”。
• scene.launch(key, data) —— 并行唤起与分层叠加：当前场景继续正常运行，并在当前场景的上方唤起目标场景。两个场景各自拥有独立的渲染与更新循环。最经典的用法是在主关卡中唤起 HUD 仪表盘、提示弹幕或聊天窗。

2. pause() 与 sleep() 的应用场景

3. 跨场景解耦通信三方案

当多个场景并发运行时，场景之间的数据交换与通知存在以下三种推荐方案：

1. 启动传参：通过 start(key, data) 或 launch(key, data) 传参，由目标场景的 init(data) 接收。适合一次性上下文传递。
2. 直接实例访问：通过 const ui = this.scene.get('UIScene'); ui.updateScore(100); 直接获取场景类实例进行方法调用。适合父子场景强关联操作。
3. 事件总线解耦（推荐）：利用场景内置事件发射器或全局总线广播解耦：

   // 在 GameScene 中派发击杀事件
   this.events.emit('ENEMY_KILLED', { score: 100, enemyType: 'goblin' });
   
   // 在 UIScene 中监听并刷新 UI
   const gameScene = this.scene.get('GameScene');
   gameScene.events.on('ENEMY_KILLED', this.onScoreGained, this);

五、高频踩坑点排查与防御守则

1. 重复注册监听导致的内存泄漏与翻倍触发

现象：玩家重新开始游戏（this.scene.start('GameScene')）后，每次攻击操作发现 UI 分数被成倍累加，或者控制台报错 Cannot read property of destroyed。

根因：当场景被重新启动时，create() 会再次执行。如果使用全局总线（如 this.game.events.on()）或者监听了外部 DOM 窗口事件，而没有在场景关闭时手动解绑，旧的闭包函数会持续驻留，导致每次重启都追加一份监听。

排查防御：必须严格在场景的 shutdown 钩子中卸载监听：

create() {
  this.onBossDefeatedBound = this.onBossDefeated.bind(this);
  this.game.events.on('BOSS_DEFEATED', this.onBossDefeatedBound);

  // 场景停机时自动解绑，防止重入泄漏
  this.events.once(Phaser.Scenes.Events.SHUTDOWN, () => {
    this.game.events.off('BOSS_DEFEATED', this.onBossDefeatedBound);
  });
}

2. 场景 pause 状态下物理世界刚体的异常表现

当对主关卡调用 this.scene.pause('BattleScene') 时，Phaser 会默认挂起该场景的 UpdateList。然而对于某些使用了全局物理步进或独立 TimerEvent 的系统，若开发者使用了全局 setTimeout 或原生 setInterval，计时器仍会继续运行并操作处于暂停场景中的精灵坐标，从而破坏场景状态。因此，所有定时调度必须使用场景自带的 this.time.addEvent()，它会在场景暂停时自动挂起，恢复时同步继续。