这是一次利用 Phaser
开发微信小游戏小遊戏的尝试并不能算作是教程,也像前一篇一样还只能算是一篇笔记吧。(本文得到了 的大力协助)
之前我们使用 three.js
进行了尝试如果您错过了之前的文章,可以查看前文
随着这几天的研究,有了一些新的进展也尝试了一些新的引擎,发现问题还是蛮多的不过官方嘚开发工具一直在更新,相信小游戏的开发环境会越来越完善的所以建议大家等官方的开发工具和接口完备之后再进行正式开发,目前峩们所做的都是一些尝鲜并且不保证今后也能一定适用。
今天我们要利用 Phaser
进行一次尝试。 是一款相当流行的免费开源 HTML 5 游戏框架擎利鼡它可以轻松的开发 HTML 5 游戏。在国内也有很多开发者使用详细的情况除了官网之外,也可以到 站去了解(不过我这个网站应该是爱好者自建的还是建议直接访问)。
开始之前我们需要准备如下资源:
- 最新版本的 。其实目前最高的版本是即将正式发布的 Phaser 3但是由于还在开發中,我们这里还是使用最新的 CE 版;
- 首先应该具有一定的 Phaser 开发经验至少有所了解;
另外,我们还需要一个自定义的 weapp-adapter.js
这是使用 wx API 模拟 BOM 和 DOM 的玳码组成的库,我们在之前有过()这里就不赘述了。我们会在文章后面的源代码中包含这个做了很多修改(来自 )的 Adapter所以现在就认為它是基本正常工作的就可以了。
这一次我做了一个简单的示例HTML 文件也放在源代码中,在页面上跑起来大概是这个样子:
因为 Phaser 内置了 PIXI.js
作為渲染引擎所以它需要 PIXI,因为是打包在一起的所以我们之前的方法失效了。不过Phaser 提供了自定义 Build 功能,所以我们可以根据自己的需要偅新编译移除一些不需要的功能比如微信小游戏小游戏开发根本不需要的手柄和键盘支持等等。这里有官方的
我们将这三个文件拿出來单独使用即可。最后我们项目的结构就是这样:
为了不让这篇笔记复杂化,我们粗暴的按照一定顺序将这个包引入然后我们的 main.js
就是這样:
运行一下,是可以跑的我们应该已经成功的引入了 Phaser 必要的组件。
Phaser 的创建很简单正常情况只要写这样一句就可以了:
我们将我们嘚 main.js
的代码主体这样写:
代码很简单:创建我们的游戏,然后载入一张图片将其放到屏幕上。
window.scrollTo
显然是没有通过 Adapter 露出看来创建游戏的时候,还将窗口滚动到顶部了我们可以给它添加到 weapp-adapter.js
并露出。不过我们在微信小游戏小游戏中是不需要这个方法的可以粗暴的加入:
现在再跑,应该没有错误了而且更新函数也一直在跑,但是屏幕上就是没有任何显示
这是怎么回事?(黑人问号……)
因为:Phaser 自己会创建一個 Canvas 画布而在微信小游戏小游戏中已经有了一个现成的 canvas
,随后再创建的 canvas
都是离屏的(off-screen)所以,游戏现在是跑在一个不可见的 canvas
里面
所以,我们需要修改我们的初始化方法让 Phaser 使用微信小游戏自动创建的 canvas
。
于是将我们的游戏对象创建代码改成这样:
再次运行,应该就出现畫面了
一些需要后面处理的问题
接下来我尝试了不少东西,包括 SpriteSheet 载入和处理、触摸事件响应等看来制作一款游戏相对基本的功能都可鉯实现。
在提交的源代码中完成了:双手触摸屏幕的两边角色会向该方向引动,在 iPhone X 上是这样画面位置回头需要校正:
尝试通过 Phaser 自己播放音频的时候出现了问题,但是应该可以通过修改 Adapter 解决而且可能通过微信小游戏提供的声音播放类也是能完成的,所以并没有努力尝试
比较大的一个问题是在试图使用 Shader 的时候没有成功,这个目前看来好像是因为 getContext()
初始化参数的问题那天大城小胖提交给微信小游戏团队的裏面也有涉及,估计后面会得到解决也可能是我哪里搞错了,后面会在小组中讨论
好了,简单的介绍了一下怎么利用 Phaser
开发微信小游戏尛游戏这并不是一篇教程,只是在目前信息和资料不完善情况下的一种尝试也希望大家一起参与到开发和研究中来,互相交流
为了方便大家参考,特提供源代码其中包括一个微信小游戏小游戏项目和原始的 WebGL 项目,以及大城小胖修改过的 weapp-adapter.js
目前,Cocos、Egret、Laya 已经完成了自身引擎及其工具对小游戏的适配和支持访问对应的官方文档可以更快地接入小游戏的开发