Phaser 游戏框架教程

2026-01-17 08:39:30作者：昌雅子Ethen

1. 项目目录结构及介绍

Phaser 游戏框架的目录结构可能会因个人或团队的定制而略有不同，但基本的组织方式是：

project_root/
├── index.html       # 主入口HTML文件
├── src/              # 源代码目录
│   ├── Boot.js      # 启动场景
│   ├── Preload.js   # 预加载场景
│   ├── MainGame.js  # 主游戏场景
│   └── ...
├── dist/             # 打包后的输出目录
└── package.json     # 项目依赖和配置

index.html: 应用的主页面，通常用于引入构建后生成的游戏脚本。
src: 存放源代码的目录，每个.js文件代表一个游戏场景或者功能模块。
- Boot.js: 游戏启动时执行的初始化代码，如设置画布大小、加载预加载场景等。
- Preload.js: 负责加载所有资源（如图像、音频）的场景。
- MainGame.js: 游戏的主要运行逻辑，通常在此处创建游戏对象和处理游戏循环。
dist: 构建工具打包后的产出文件夹，包含压缩后的JS文件和其他资源。
package.json: 项目依赖和配置文件，列出项目的npm模块以及相关版本。

2. 项目的启动文件介绍

在Phaser游戏中，通常从index.html开始。这个文件引入了必要的库，例如Phaser的构建结果，并创建了一个游戏实例。示例代码可能如下：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>我的Phaser游戏</title>
    <style>
        body { margin: 0; }
    </style>
</head>
<body>
    <script src="build/phaser.min.js"></script>
    <script src="dist/game.min.js"></script>
    <script>
        var game = new Phaser.Game({
            width: 800,
            height: 600,
            type: Phaser.AUTO, // 使用Canvas或WebGL渲染
            scene: [Boot, Preload, MainGame]
        });
    </script>
</body>
</html>

这里，game.min.js是通过打包工具将src目录中的所有场景合并并压缩得到的单个文件。new Phaser.Game() 创建了一个新的游戏实例，传入参数定义了游戏窗口尺寸、渲染类型和场景数组。

3. 项目的配置文件介绍

Phaser项目通常没有固定格式的全局配置文件，但可以在Boot.js或MainGame.js中初始化Phaser.Game对象时传入配置对象。这个配置对象可以指定各种设置，例如分辨率、渲染器、场景等。以下是一个简单的配置例子：

var config = {
    type: Phaser.AUTO, // 自动选择最佳渲染器
    width: 800, // 游戏宽度
    height: 600, // 游戏高度
    physics: {
        default: 'arcade', // 默认物理引擎为Arcade
        arcade: { 
            gravity: { y: 300 } // 设置重力
        }
    },
    scene: [
        BootScene,
        PreloadScene,
        MainGameScene
    ]
};

var game = new Phaser.Game(config);