phaser3 微信游戏_如何使用Phaser 3和TypeScript在浏览器中构建简单的游戏

phaser3 微信游戏

I’m a developer advocate and a backend developer, and my frontend development expertise is relatively weak. A while ago I wanted to have some fun and make a game in a browser; I chose Phaser 3 as a framework (it looks quite popular these days) and TypeScript as a language (because I prefer static typing over dynamic). It turned out that you need to do some boring stuff to make it all work, so I wrote this tutorial to help the other people like me get started faster.

我是开发人员拥护者和后端开发人员，而我的前端开发专业知识相对较弱。 不久前，我想找点乐子，用浏览器玩游戏。 我选择了Phaser 3作为框架(目前看来很流行)，而选择TypeScript作为一种语言(因为我更喜欢静态类型而不是动态类型)。 原来，您需要做一些无聊的工作才能使其全部正常工作，因此我编写了本教程来帮助像我这样的其他人更快地入门。

准备环境 (Preparing the environment)

集成开发环境 (IDE)

Choose your development environment. You can always use plain old Notepad if you wish, but I would suggest using something more helpful. As for me, I prefer developing pet projects in Emacs, therefore I have installed tide and followed the instructions to set it up.

选择您的开发环境。 如果愿意，您可以始终使用普通的旧记事本，但我建议您使用更有用的东西。 对于我来说，我更喜欢在Emacs中开发宠物项目，因此我已经安装了tide并按照说明进行了设置。

节点 (Node)

If we were developing on JavaScript, we would be perfectly fine to start coding without all these preparation steps. However, as we want to use TypeScript, we have to set up the infrastructure to make the future development as fast as possible. Thus we need to install node and npm.

如果我们使用JavaScript进行开发，那么无需所有这些准备步骤就可以开始编码。 但是，由于要使用TypeScript，我们必须设置基础结构以使将来的开发尽可能快。 因此，我们需要安装node和npm。

As I write this tutorial, I use node 10.13.0 and npm 6.4.1. Please note that the versions in the frontend world update extremely fast, so you simply take the latest stable versions. I strongly recommend using nvm instead of installing node and npm manually; it will save you a lot of time and nerves.

在编写本教程时，我使用的是节点10.13.0和npm 6.4.1 。 请注意，前端世界中的版本更新速度非常快，因此您只需使用最新的稳定版本。 我强烈建议您使用nvm而不是手动安装node和npm； 它将为您节省大量时间和精力。

设置项目 (Setting up the project)

项目结构 (Project structure)

We will use npm for building the project, so to start the project go to an empty folder and run npm init. npm will ask you several questions about your project properties and then create a package.json file. It will look something like this:

我们将使用npm来构建项目，因此要启动项目，请转到一个空文件夹并运行npm init 。 npm将询问您有关项目属性的几个问题，然后创建一个package.json文件。 它看起来像这样：

{
  "name": "Starfall",
  "version": "0.1.0",
  "description": "Starfall game (Phaser 3 + TypeScript)",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Mariya Davydova",
  "license": "MIT"
}

配套 (Packages)

Install the packages we need with the following command:

使用以下命令安装我们需要的软件包：

npm install -D typescript webpack webpack-cli ts-loader phaser live-server

npm install -D typescript webpack webpack-cli ts-loader phaser live-server

-D option (a.k.a. --save-dev) makes npm add these packages to the list of dependencies in package.json automatically:

-D选项(aka --save-dev )使npm自动将这些软件包添加到package.json中的依赖项列表中：

"devDependencies": {
   "live-server": "^1.2.1",
   "phaser": "^3.15.1",
   "ts-loader": "^5.3.0",
   "typescript": "^3.1.6",
   "webpack": "^4.26.0",
   "webpack-cli": "^3.1.2"
 }

Webpack (Webpack)

Webpack will run the TypeScript compiler and collect the bunch of resulting JS files as well as libraries into one minified JS so that we can include it in our page.

Webpack将运行TypeScript编译器并将一堆生成的JS文件和库收集到一个缩小的JS中，以便我们可以将其包含在页面中。

Add webpack.config.js near your project.json:

在您的