延伸阅读

Phaser微信小游戏开发教程三

Phaser微信小游戏开发教程二

今天带来Phaser微信小游戏开发教程一，

微信小游戏的开放，让无数游戏开发者，特别是H5游戏开发者看到了机会。依靠微信的流量和社交平台，游戏很容易获取用户和传播，做得好的话可能真的会一炮打响。那么问题来了，我们怎么把之前做好的游戏移植到微信小游戏中来呢？

首先，我们要明白，微信小游戏的运行环境不是浏览器环境，官方叫它javascriptCore，你可以理解为一个被阉割得比较厉害的js环境，据说连window，canvas这些对象都没有，官方也禁止了eval，setTimeout等函数。并且，微信小游戏的基本框架里只有game.json一个配置文件和game.js的入口文件，并不像小程序那样有什么wxml，wcss等页面。好在官方比较人性化，提供了一个adapter，把window，canvas等小游戏需要的对象暴露出来，供我们使用。

那么有了canvas对象，我们就可以移植phaser过去了，因为phaser只需要一个canvas对象就能全活。先上移植成果：

我把我自己经典的打飞机游戏先移植了过来，下面详细说一下移植思路。

首先，遇到的第一个问题就是微信小游戏没有页面，没法用script引入phaser，在官方案例中，js文件都是通过import引入，所以这里我们也不例外，需要通过import引入phaser，而通过import直接引入phaser.min.js的话，很显然会报PIXI找不到。我们要编译自己的phaser。

所以第一步，先编译一个自己的phaser，由于用不到p2，而且加入p2后移植更复杂，所以编译一个arcade-physics版本，编译的过程就是使用grunt去编译，不会的可以参考这篇文章，http://club.phaser-china.com/topic/58ec77a98f72c70932dad578。

编译完成之后，我们使用未压缩过的phaser版本，因为需要改一些代码。引入之后还是报PIXI找不到，原因很简单。

官方暴露PIXI的方式是放在exports中，并在是在一个闭包中完成，而Phaser也是在一个闭包中，这样的话，Phaser是用不到这里的PIXI的。所以我们把这段闭包去掉，然后直接把PIXI的定义放出来，Phaser就能找到了。

同理，Phaser也是在闭包中，但是我们只需要将它export出来，在外部就能通过import去引入。

解决了PIXI的问题之后，会报一些其他问题，比如window.scroll未定义，哈哈，果然是被阉割得比较厉害，没办法，把报错的代码注释掉好了，毕竟基本也用不到。还有一个错是在reset的地方，应该是作者用之前忘记了判空，我们给加上。

其他错误不太记得了，都是很简单的问题，比如资源路径问题等，大家看下日志自己处理下就好，到这里基本上Phaser就不报错了，但是界面上出不来图像，为啥呢？原因很简单，因为Phaser是给指定的div去create一个canvas，而微信小游戏限定了只能用它导出的canvas来进行绘制，所以这一块需要将canvas进行替换。

大家可以看下Phaser的源码，官方好像可以在config里面直接配置canvas的DOM进去，但是我比较懒，就直接替换源码了，把设置canvas的地方改成adapter里面的canvas。改完之后，就有图像了。

试玩了一下，大部分功能都能使用，包括scaleManager适配，碰撞检测，tween，animation等等核心功能，当然，也有些功能还有问题，比如播放声音的时候，微信adapter会打印HTMLAudioElement.load() is not implemented.，官方还没实现。拖动的时候坐标有偏差，其实就是touch事件的问题。也有网友反映atlas图集的json加载不了。

当然，这些问题官方的打飞机游戏都用原生js进行了解决，我们完全可以用原生js来替代这些实现。不过，程序员总是有洁癖的，我还是希望phaser移植过来之后，能够完美的使用，所以后续如果有进展，我还会在这里同步更新。

以上就是自学php网提供今天带来Phaser微信小游戏开发教程一，请大家多多支持自学php网。