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

Phaser 3 ES6 入门模板

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

主要特性 • 预览 • 如何使用 • 启用3D • PWA • 原生应用 • 自定义配置 • TypeScript • 有用链接 • 多人游戏 • 示例 • 制作人员 • 许可证

想改用 TypeScript 吗？切换到 phaser-project-template

* * * * * *

⚠️ 重要

请使用 phaser-project-template 代替！

虽然它在内部使用 TypeScript，但默认情况下所有 TypeScript 功能都是禁用的。这意味着你可以像平常一样直接编写 JavaScript（ES2015）。试试吧！👍

* * * * * *

主要特点

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

预览

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

使用方法

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

# Clone this repository
$ git clone --depth 1 https://github.com/yandeu/phaser-project-template-es6.git phaser3-game

# Go into the repository
$ cd phaser3-game

# 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 的信息

原生应用

构建原生应用的最简单方法是使用 Capacitor 并遵循其 文档。

在安装 Capacitor 之后，你唯一需要修改的是 capacitor.config.json 文件中的 webDir。将其设置为 dist，如下所示：

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

自定义配置

Babel 编译器

在 .babelrc 文件中更改 Babel 编译器的设置。

你可以在 这里找到关于 babel 的更多信息。

Webpack

所有 webpack 配置都在 webpack 文件夹中。

混淆

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

TypeScript

想使用 TypeScript 代替 ES6 吗？请切换到 phaser-project-template

多人游戏

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

有用链接

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

示例

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

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

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

鸣谢

非常感谢 Rich @photonstorm 创作 Phaser

许可证

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