机器翻译正文由机器翻译自项目原始文档（英文），排版经程序统一处理，可能存在偏差，请以原项目仓库为准。

Phaser 3 TypeScript 入门模板

一个用于 Phaser 3 的入门模板，配合 TypeScript 和 webpack，用于构建在浏览器和移动设备上运行良好的出色 HTML5 游戏。

主要特性 • 预览 • 如何使用 • enable3d • PWA • 原生应用 • 自定义配置 • ES6 • 有用链接 • 多人游戏 • 示例 • 署名 • 许可证

想使用 ES6 而不是 TypeScript？看看 phaser-project-template-es6

主要特点

• ESNext 特性已准备好（async/await，Rest/Spread 操作符）
• 代码分割
• 代码混淆
• 带有 SourceMap 和实时重载的开发服务器
• PWA 支持离线功能及“添加到主屏幕”安装提示
• 使用 Capacitor 轻松构建原生应用
• 包含 Phaser 3 TypeScript 类型定义
• 用于开发和生产构建
• 为 JavaScript 文件添加 webpack 内容哈希（生产环境）

预览

这是你安装此模板后得到的内容。一个用 TypeScript 编写的简单且干净的入门模板。试试吧！

使用方法

要克隆并运行此模板，您需要在计算机上安装 Git 和 Node.js（其中包括 npm）。在命令行中：

# Clone this repository (yes, npx not npm)
$ npx gitget yandeu/phaser-project-template phaser-template

# Go into the repository
$ cd phaser-template

# Install dependencies
$ npm install

# Start the local development server (on port 8080)
$ npm start

# Ready for production?
# Build the production ready code to the /dist folder
$ npm run build

# Play your production ready game in the browser
$ npm run serve

在 /webpack/webpack.common.js 中更改 gameName。

你的所有游戏代码都在 /src/scripts 文件夹中。所有资源需要放在 /src/assets 文件夹中，以便在创建生产构建时复制到 /dist。不要更改 index.html 和 game.ts 文件的名称。

启用3D

想在你的 Phaser 游戏中添加 3D 对象和物理效果吗？查看 enable3d！

渐进式网页应用 (PWA)

这个模板 100% 支持 PWA。

ServiceWorker 默认是禁用的，并且配置为仅在 生产模式 下工作。 在 /src/index.html 中取消注释下面的那一行以启用它。

<script>
  if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
      navigator.serviceWorker.register('./sw.js')
    })
  }
</script>

您可以通过以下步骤轻松个性化其设置：

• 将 /pwa/icons 中的两个图标替换为您自己的图标。
  • 一个是 512x512，另一个是 192x192
• 将您自己的 favicon.ico 添加到 /src
• 在 /pwa 的 manifest.json 文件中调整这些参数
  • short_name：最多 12 个字符
  • name：完整的游戏名称
  • 方向：“横向”或“纵向”
  • background_color：启动画面的颜色
  • theme_color：导航栏的颜色——必须与 index.html 文件中的 theme-color 匹配
• 您可以保持 /pwa 中的 sw.js（serviceWorker）原样。
• 更改 /webpack/webpack.common.js 中的 gameName

在 developers.google.com 上了解更多关于 PWA 的信息

原生应用

构建原生应用程序最简单的方法是使用 https://html2app.dev/

或者手动使用 Capacitor 并遵循其 文档 进行构建。安装 Capacitor 后，唯一需要更改的是 capacitor.config.json 文件中的 webDir。将其设置为 dist，如下所示：

{
  "appId": "com.example.app",
  "appName": "YOUR_APP_NAME",
  "bundledWebRuntime": false,
  "webDir": "dist"
}

自定义配置

TypeScript 编译器

在 tsconfig.json 文件中更改 TypeScript 编译器的设置。

如果你是 TypeScript 新手，你可能希望将 "noImplicitAny" 设置为 false。

你可以在 这里 找到关于 TypeScript 编译器的更多信息。

类型定义

你可以将自定义类型定义放在 typings/custom.d.ts 中。

Webpack

所有 webpack 配置都位于 webpack 文件夹中。

混淆

默认情况下混淆是禁用的。

我们使用 webpack-obfuscator。如有需要，可在 webpack/webpack.prod.js 中更改其设置。所有可用选项列在 这里。

ES6

想使用 ES6 而不是 TypeScript？请切换到 phaser-project-template-es6

多人游戏

制作多人游戏？看看 geckos.io

有用链接

• Phaser 网站
• Phaser 3 论坛
• Phaser 3 API 文档
• 官方 Phaser 3 示例
• Phaser 3 笔记

示例

使用此入门模板构建的游戏示例

平台游戏示例 [玩这个游戏 - 访问其仓库]

Phaser 3 Matter.js：汽车示例 [试玩此游戏 - 访问其仓库]

鸣谢

非常感谢 Rich @photonstorm 创作 Phaser

许可证

麻省理工学院许可 (MIT) 2021 - Yannick Deubel。请查看 LICENSE 了解更多详情。