Phaser 3 和 TypeScript 项目教程

1. 项目的目录结构及介绍

在 phaser3-typescript 项目中，目录结构如下：

phaser3-typescript/
├── assets/
├── node_modules/
├── src/
│   ├── games/
│   ├── scenes/
│   ├── index.ts
├── types/
├── .gitignore
├── package.json
├── tsconfig.json
├── webpack.config.js

目录介绍

• assets/: 存放游戏资源文件，如图片、音频等。
• node_modules/: 存放项目依赖的 Node.js 模块。
• src/: 存放源代码文件。
  • games/: 存放具体游戏项目的代码。
  • scenes/: 存放游戏场景的代码。
  • index.ts: 项目的入口文件。
• types/: 存放 TypeScript 类型定义文件。
• .gitignore: Git 忽略文件配置。
• package.json: 项目依赖和脚本配置文件。
• tsconfig.json: TypeScript 编译配置文件。
• webpack.config.js: Webpack 打包配置文件。

2. 项目的启动文件介绍

项目的启动文件是 src/index.ts。这个文件负责初始化 Phaser 游戏实例并加载第一个场景。

import 'phaser';
import { GameConfig } from './config';

export class Game extends Phaser.Game {
  constructor(config: Phaser.Types.Core.GameConfig) {
    super(config);
  }
}

window.addEventListener('load', () => {
  const game = new Game(GameConfig);
});

启动文件功能

• 导入 Phaser 库。
• 导入游戏配置文件 GameConfig。
• 定义 Game 类继承自 Phaser.Game。
• 在窗口加载完成后，创建 Game 实例并传入配置。

3. 项目的配置文件介绍

项目的配置文件主要包括 tsconfig.json 和 webpack.config.js。

tsconfig.json

tsconfig.json 文件用于配置 TypeScript 编译选项。

{
  "compilerOptions": {
    "target": "ES5",
    "module": "commonjs",
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true
  },
  "include": [
    "src/**/*"
  ]
}

webpack.config.js

webpack.config.js 文件用于配置 Webpack 打包选项。

const path = require('path');

module.exports = {
  entry: './src/index.ts',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js']
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

配置文件功能

• tsconfig.json: 指定 TypeScript 编译目标、模块系统、输出目录等。
• webpack.config.js: 指定入口文件、模块加载规则、文件解析扩展名和输出文件路径。

以上是 phaser3-typescript 项目的基本教程，涵盖了项目的目录结构、启动文件和配置文件的介绍。希望对你有所帮助！