欢迎来到[自学php网] ①群 287460651

主页 > 游戏引擎 > Phaser游戏引擎 >

Phaser微信小游戏开发教程一

来源:未知    时间:2019-08-20 11:45 作者:小飞侠

[导读] 今天带来Phaser微信小游戏开发教程一, 微信小游戏的开放,让无数游戏开发者,特别是H5游戏开发者看到了机会。依靠微信的流量和社交平台,游戏很容易获取用户和传播,做得好的话...

延伸阅读

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网。


最新文章

点击排行

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com