随着近几天的研究，取得了一些新的进展，尝试了一些新的发动机，但也发现了许多问题。但是官方的开发工具一直在更新，相信小游戏的开发环境会越来越完善。所以建议等官方开发工具和接口完成后再进行正式开发。目前我们做的只是一些早期采用者，并不能保证以后适用。

今天，我们将尝试相位器。Phaser是一款流行的免费开源HTML 5游戏框架引擎，可以轻松开发HTML 5游戏。国内也有很多开发商在用。详情除了官网，还可以去Phaser中文网站(虽然我的网站应该是粉丝自建的，或者建议直接去英文官网)。

准备工作/即将工作

在开始之前，我们需要准备以下资源：

Phaser CE的最新版本(社区版)。其实更高的版本是Phaser 3，即将正式发布，但是因为还在开发中，所以这里还是用最新的CE版本；

首先，你要有一定的Phaser开发经验，至少要有一定的了解；

最新版本的微信开发者工具。

此外，我们还需要一个用户自定义的weapp-adapter.js，它是一个由使用wx API模拟BOM和DOM的代码组成的库。之前已经介绍过了(官方介绍)，这里就不赘述了。我们将在文章后面的源代码中包含对这个适配器的大量修改(来自@大成小胖)，所以现在我们可以认为它基本上正常工作。

这次我做了一个简单的例子。HTML文件也放在源代码里。它在页面上运行如下：

项目结构

不像上次，如果直接把phaser.min.js引入main.js:

从' libs/phaser.min.js '导入*为Phaser

将出现以下错误：

参考错误：未定义PIXI

因为Phaser内置了PIXI.js作为渲染引擎，所以需要PIXI。因为是打包在一起的，我们之前的方法失败了。但是Phaser提供了自定义的Build功能，所以我们可以根据自己的需要重新编译，去掉一些不必要的功能，比如手柄和键盘支持，这些都是微信游戏开发不需要的。这里有官方详细文件。

很麻烦吧？然而，Phaser CE的包中实际上有一个构建/定制文件夹，它已经包含了单独编译的文件。我们开发的时候需要三个文件：pixi.min.js，p2.min.js和phaser-split.min.js

让我们把这三份文件拿出来单独使用。最后，我们项目的结构如下：

游戏

游戏. json

项目.配置. json

自述文件

js

| main.js

| 图书馆

|加麦利布斯

| | p2.min.js

| | 分相器

| | pixi.min.js

| 符号. js

| weapp-adapter.js

图像

bg

精神

为了不使这个注释复杂化，我们粗暴地按照一定的顺序介绍了这个包，然后我们的main.js是这样的：

窗户。PIXI=要求(' libs/gamelibs/pixi.min.js ')

window . p2=require(' libs/gamelibs/p2 . min . js ')

窗户。phaser=require(' libs/gamelibs/phaser-split . min . js ')

/**

*游戏主要功能

*/

导出默认类Main {

/**

*结构

*/

constructor() {

控制台日志('主')

}

}

运行，你可以运行，我们应该已经成功地引入了移相器的必要组件。

创建游戏对象

Phaser的创建非常简单。一般情况下，就写这句话：

var游戏=新Phaser。游戏(320，200，Phaser。AUTO，‘phaser-example’，{ preload: preload，create: create，update : update })；

我们将把main.js的代码体编写如下：

/**

*游戏主要功能

*/

导出默认类Main {

/**

*结构

*/

constructor() {

游戏=新Phaser。游戏(320，200，Phaser。自动，

相位器-示例'，

{ preload: this.preload，create: this.create，update : this . update })；

}

preload() {

Console.log('装载材料')

game.load.image('bg '，' images/bg/field_1920.png ')

}

create() {

Console.log('创建内容')

let back=game.add.image(0，0，' BG ')；

}

update () {

Console.log('更新')

}

}

代码很简单：创建我们的游戏，然后加载一张图片放在屏幕上。

运行时，出现错误：

TypeError: window.scrollTo不是函数

Window.scrollTo显然不是通过适配器公开的。好像游戏创建的时候，窗口是滚动到最上面的。我们可以把它添加到weapp-adapter.js中并公开。但是，我们在微信游戏中不需要这种方法，我们可以毫不客气地加入：

window.scrollTo=function() {}

现在再运行，应该没有错误，更新功能一直在运行，但是屏幕上什么都没有。

这是怎么回事？(黑色问号.)

因为：Phaser会自己创建一个canvas，但是微信小游戏里已经有现成的canvas了，后面创建的Canvas都是屏下的，所以游戏现在是在一个不可见的Canvas里运行。

所以我们需要修改自己的初始化方法，让Phaser使用微信自动创建的画布。

因此，将我们的游戏对象创建代码改为：

constructor() {

//配置参数

const conf={

宽度：尺寸. w，

height: size.h，

canvas:帆布，

渲染器：移相器。WEBGL，

parent: '移相器'，

透明：假，

抗锯齿：假，

state : { preload : this . preload，create: this.create，update: this.update }，

scaleMode:移相器。缩放管理器。_适合

};

//创建游戏

游戏=新Phaser。游戏

}

再运行一次，屏幕应该会出现。

一些需要以后处理的问题

然后我尝试了很多东西，包括SpriteSheet的加载和处理，触摸事件响应等。制作一个游戏的相对基础的功能好像是可以实现的。

在提交的源代码中完成：双手触摸屏幕两侧，人物会朝那个方向移动。iPhone X上就是这种情况，屏幕转回时需要修正位置：

试图通过Phaser本身播放音频时出现问题，但应该通过修改Adapter来解决。而且有可能微信提供的声音播放类也可以完成，所以没有努力过。

一个很大的问题是，当试图使用着色器时，它没有成功。目前看来这是因为getContext()初始化参数的问题。大成小胖当天提交给微信团队的问题也涉及到了，估计以后会解决。可能是我搞错了。稍后我会分组讨论。

结束语

好了，本文简单介绍一下如何使用Phaser开发微信游戏。这不是教程，是在目前信息和资料不完善的情况下的尝试。希望大家能参与开发研究，互相交流。