Banner

Phaser 入门部署手册

2026-10-10

1. 环境要求

  • Node.js 18+，用于本地开发和构建
  • npm / pnpm / yarn 任一包管理器
  • 现代浏览器，推荐 Chrome、Firefox、Edge
  • 代码编辑器，推荐 VS Code
  • Git

如果只是快速体验，也可以不用 Node.js，直接通过 CDN 引入 Phaser。

2. 初始化项目

推荐使用官方 CLI 快速创建项目：

npm create @phaserjs/game@latest
cd your-game
npm install
npm run dev

如果已有项目，也可以手动安装：

npm install phaser

3. 项目结构

your-game/
├── public/           # 静态资源
├── src/              # 游戏源码
│   ├── scenes/       # 场景文件
│   ├── main.js       # 游戏入口
│   └── game.js       # Phaser 配置
├── index.html        # HTML 入口
├── package.json
└── vite.config.js

更复杂的项目可以继续拆分：

src/
├── scenes/           # BootScene、MenuScene、GameScene
├── entities/         # 玩家、敌人、子弹等实体
├── ui/               # HUD、按钮、面板
├── utils/            # 工具函数
├── config/           # 游戏配置
└── assets/           # 资源路径声明

Phaser 3 以 Scene 为组织单元，每个场景有自己的 init、preload、create、update 生命周期。

4. 常用命令

# 安装依赖
npm install

# 本地开发
npm run dev

# 生产构建
npm run build

# 预览构建产物
npm run preview

如果使用 Vite 模板，开发服务器通常支持热更新，修改代码后浏览器会自动刷新。

5. 最小程序示例

src/main.js：

import { Game, AUTO, Scale } from 'phaser';

const config = {
  type: AUTO,
  width: 800,
  height: 600,
  parent: 'game-container',
  backgroundColor: '#222',
  scene: {
    preload() {
      this.load.image('logo', 'assets/logo.png');
    },
    create() {
      const logo = this.add.image(400, 300, 'logo');
      this.tweens.add({
        targets: logo,
        y: 450,
        duration: 1500,
        ease: 'Sine.inOut',
        yoyo: true,
        loop: -1
      });
    }
  }
};

new Game(config);

index.html：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Phaser Game</title>
</head>
<body>
  <div id="game-container"></div>
  <script type="module" src="/src/main.js"></script>
</body>
</html>

6. 场景管理

Phaser 3 中常用多场景组织游戏：

import { Scene } from 'phaser';

class BootScene extends Scene {
  constructor() {
    super('BootScene');
  }

  preload() {
    this.load.image('logo', 'assets/logo.png');
  }

  create() {
    this.scene.start('MenuScene');
  }
}

class MenuScene extends Scene {
  constructor() {
    super('MenuScene');
  }

  create() {
    this.add.text(100, 100, 'Press SPACE to Start', {
      fontSize: '32px',
      fill: '#fff'
    });

    this.input.keyboard.once('keydown-SPACE', () => {
      this.scene.start('GameScene');
    });
  }
}

场景之间可以通过 this.scene.start()、this.scene.launch()、this.scene.stop() 切换或叠加。

7. 资源加载

Phaser 的资源加载通常放在 preload() 中：

preload() {
  this.load.image('player', 'assets/player.png');
  this.load.spritesheet('enemy', 'assets/enemy.png', {
    frameWidth: 32,
    frameHeight: 32
  });
  this.load.audio('bgm', 'assets/bgm.mp3');
  this.load.tilemapTiledJSON('level', 'assets/level.json');
}

如果资源较多，建议单独抽一个 PreloadScene，避免每个场景重复加载。

8. 打包发布

npm run build

构建产物通常输出到 dist/ 目录。可以直接部署到：

  • Nginx / Apache
  • Cloudflare Pages
  • Vercel
  • GitHub Pages
  • Netlify

部署时注意配置 SPA 路由回退，避免刷新页面时出现 404。

9. 打包成移动端应用

Phaser 游戏可以通过 Capacitor 或 Cordova 打包成 iOS / Android 应用。

示例流程：

npm install @capacitor/core @capacitor/cli @capacitor/android @capacitor/ios
npx cap init
npm run build
npx cap add android
npx cap sync
npx cap open android

这种方式适合把 H5 游戏发布到应用商店，但要注意触屏适配、音频自动播放限制和性能优化。

10. 常见问题

资源加载失败

确认资源路径正确，并且通过本地服务器访问，而不是直接打开 index.html。现代浏览器对本地文件访问有安全限制。

黑屏或画面不显示

检查 parent 配置是否指向真实 DOM 节点，资源是否加载完成，以及浏览器控制台是否有报错。

热更新不生效

如果修改了 Phaser 配置或资源路径，可能需要手动刷新页面。纯逻辑修改通常可以热更新。

移动端性能差

可以关闭不必要的物理引擎，使用对象池复用对象，减少每帧创建和销毁。

打包后白屏

检查 vite.config.js 中的 base 配置是否与部署路径一致，静态资源路径是否正确。


6
Phaser
Phaser是一个有趣、免费且高效的2D游戏开发框架，可用于为桌面和移动端网页浏览器创建HTML5游戏，同时支持Canvas和WebGL渲染技术。
2026-10-10
13
目录