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

废话不多说，依次列举下上一篇移植过来后的一些bug。

Canvas的替换

上一篇中讲到，微信小程序中只能使用adapter里面的canvas进行绘制。我们修改了源码，把adapter里面的canvas挂在global上面，然后再写死到phaser里面。但是这样的话，在工具中是可以使用的，但是发布之后，会报global问题。

我想原因应该是发布之后的真实运行环境和工具里的模拟环境还是有区别。而且这样改相当于改了两处源码，后面的升级维护都不方便。所以我再次dive the source。

最后发现一个比较好的解决方案。不需要改adapter，也不需要改phaser，只需要在new Game的时候这样用：

var game = new Phaser.Game({  
width: 240,  height: 400,  renderer: Phaser.CANVAS,  canvas: canvas
});

这样的话，我们其实可以设置更多的配置项，而canvas就可以通过这种方式传递进去。你问我是怎么知道这种方式？文档里好像没写？我之前也不知道，我只是一只会看源码的咸鱼，666。

对了，config里面远不止这四个参数可以配置，而且很多配置项甚至可以挂在window上，不得不说Phaser这方面的处理还是很强大，有兴趣的同学去看看源码吧。

Touch事件的问题

不少群友发现，Phaser移植过来之后，touch事件是有问题的，比如enableDrag之后，再去拖动精灵会有问题，或者点击button的时候，无论点击哪里都能让button按下。这里感谢群友aloha提供的解决方案，原因还是DOM的问题，微信小游戏阉割得厉害，连scrollX，scrollY都阉割掉了。我们找到Phaser.DOM.getOffset这个函数，相应位置改成下面几行，就可以了。

var scrollTop = Phaser.DOM.scrollY || 0;
var scrollLeft = Phaser.DOM.scrollX || 0;
var clientTop = document.documentElement.clientTop || 0;
var clientLeft = document.documentElement.clientLeft || 0;

那么为什么Phaser.DOM.getOffset这个函数会影响着么深远呢？简单翻了一下源码，这个函数影响到stage的启动，input的bound计算等等，可能也就影响到了touch事件的坐标计算吧。而且原来得到的是undefined，很多计算后得到的数值就是NaN，会导致意想不到的问题。

音频

音频文件的加载和播放也是被阉割得比较厉害。我们都知道音频有两种方式，WebAudio和Audio Tag，一般的浏览器都支持WebAudio，但是微信小游戏不支持，它只能使用Audio Tag，并且更加坑爹的是，它不支持Audio的load方法，官方的adapter里面给出了console.warn('HTMLAudioElement.load() is not implemented.')这样的实现。

很明显官方实现不了，并且把难题抛给了开发者，呵呵。而使用Phaser来播放声音，如果用Audio Tag的话，受到的限制本身就比较多，但音频又是游戏中非常重要的元素，所以还是非常有必要进行一番研究的。

首先，我们肯定要绕过load方法，官方都没实现，还用毛。所以我们把源码中的reload给注释掉。

第二个问题是音频没有声音，这是因为touchLocked的问题，在浏览器中，我们的touchLocked是为true的，而微信小游戏里面，touchLocked被判断为false，那么touchLocked到底是什么意思呢？从官网文档中我们了解到，touchLocked如果是true的话，Phaser会等待一个touch事件然后才解锁整个音频系统。所以这里我们需要把game.sound.touchLocked = false;加到游戏初始的地方。

第三个问题是声音的大小没法调整，官方的adapter中没有导出volume，需要加一下

key: 'volume',get: function get() {  
return _innerAudioContext.get(this).volume},set: function set(value) {  
_innerAudioContext.get(this).volume = value
}

这样，我们就可以用volume去设置音频播放的声音大小。

第四个问题是totalDuration无法获取，因为Audio标签的duration属性竟然被阉割掉了，即使在adapter中加上duration，得到的也是0。这样会导致没办法使用循环播放的音乐，因为Phaser中循环播放是通过duration来实现的。

这个问题我没想到很好的办法，现在的做法是通过loop这个字段，将duration传进去，这样基本无损Phaser的现有功能，能够使用onLoop等事件。

一点说明：之前我们已经说了，adapter是为开发者工具而做出来的一个东西，在真实的手机上并没有这么一个东西，所以即使我们在adapter中加了volume，在开发者工具中能够使用，但是在真机上测试时，还是不能改变音量大小，这点只能等待微信方法去实现了。

其实官方给出的原生用法：

this.bgmAudio = new Audio()
this.bgmAudio.loop = truethis.bgmAudio.src  = 'audio/fashe.mp3'
this.bgmAudio.play();
this.bgmAudio.pause();

是很简单的，而且也基本能够满足大部分需求，如果不是要使用回调函数的话，官方的方式也可以一试。

TODO：现在的音频，loop必须传一个object才可以，直接传boolean会出现一些奇怪的bug。但是我的设计是兼容原来的用法，我希望只是为小程序扩展一种用法，这个问题还要解决一下。

文件加载

有群友反馈atlas文件加载的时候，json加载报错，最终在WAGame里面报了一个错，很明显，微信不允许加载json。但是解决办法也很简单，我们把json导出成一个变量，用变量来做atlas就行了。

DEMO

最后，我们还提供了编译好的Phaser版本，以及如何使用Phaser-WX的整个Demo示意，代码可以看github，https://github.com/channingbreeze/phaser-wxdemo。

以上就是Phaser微信小游戏开发教程二教程全部教程，请大家多多支持自学php网。