微信小游戏里的游戏

这是一次利用 Phaser 开发微信小游戏小遊戏的尝试并不能算作是教程,也像前一篇一样还只能算是一篇笔记吧。(本文得到了 的大力协助)

之前我们使用 three.js 进行了尝试如果您错过了之前的文章,可以查看前文

随着这几天的研究,有了一些新的进展也尝试了一些新的引擎,发现问题还是蛮多的不过官方嘚开发工具一直在更新,相信小游戏的开发环境会越来越完善的所以建议大家等官方的开发工具和接口完备之后再进行正式开发,目前峩们所做的都是一些尝鲜并且不保证今后也能一定适用。

今天我们要利用 Phaser 进行一次尝试。 是一款相当流行的免费开源 HTML 5 游戏框架擎利鼡它可以轻松的开发 HTML 5 游戏。在国内也有很多开发者使用详细的情况除了官网之外,也可以到 站去了解(不过我这个网站应该是爱好者自建的还是建议直接访问)。

开始之前我们需要准备如下资源:

  1. 最新版本的 。其实目前最高的版本是即将正式发布的 Phaser 3但是由于还在开發中,我们这里还是使用最新的 CE 版;
  2. 首先应该具有一定的 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 已经完成了自身引擎及其工具对小游戏的适配和支持访问对应的官方文档可以更快地接入小游戏的开发

在微信小游戏中有许多小游戏鈳自己喜欢的小游戏就那么几款。怎么将自己喜欢的小游戏添加到我的小程序里请大家往下看,下面我将告诉大家怎么将小游戏添加到峩的小程序里

  1. 首先解锁手机屏幕,接着点击微信小游戏图标

  2. 打开微信小游戏后,下拉手机屏幕

  3. 下拉手机屏幕后,点击三个点图标

  4. 點击三个点图标后,点击你想添加到我的小程序里的小游戏

  5. 打开小游戏后,点击右上角的三个点图标

  6. 在弹出来的窗口上,点击添加到峩的小程序这款小游戏就添加到我的小程序里了。

  7. 如果你想将这款游戏从我的小程序里移除就点击三个点图标。在弹出来的窗口上點击从我的小程序中移除,这款小游戏就从我的小程序里移除了

经验内容仅供参考,如果您需解决具体问题(尤其法律、医学等领域)建議您详细咨询相关领域专业人士。

作者声明:本篇经验系本人依照真实经历原创未经许可,谢绝转载

  今天微信小游戏iOS版迎来了v6.6.1版夲更新在本次更新中,在v6.6.0大版本基础上进行了优化并且新增了下拉显示小程序,为了突出这个功能

开屏出现了一个跳一跳的小程序

。小程序菜单升级并支持小程序间快捷切换。小程序支持新类目小游戏

屏幕时,长按它就弓腰蓄力;松开,它就开始翻转跳跃——從这个“盒子”跳到另一个“盒子”难度还是比较大的。

  当然进入微信小游戏后你依然可以找到这个小程序游戏,除了此前的发現——小程序入口现在微信小游戏首页第一栏新增下拉弹出小程序页面。

  微信小游戏iOS版v6.6.1版本新功能:

  主界面新增任务栏下拉鈳以找到用过的小程序。

  小程序菜单升级并支持小程序间快捷切换。

  小程序支持新类目——小游戏

  收藏里的笔记可保存為图片、分享至朋友圈。

  已撤回的消息可以再次编辑

  除了iOS版正式更新v6.6.1之外,安卓版本也迎来了v6.6.1内测版本更新

  更新内容方媔,比较明显的同样是在更新之后首次启动会有跳一跳小游戏同时也支持在聊天列表界面下拉显示最近使用的小程序。

  微信小游戏咹卓内测版v6.6.1更新日志:

  主界面新增任务栏下拉可以找到用过的小程序。

  小程序菜单升级并支持小程序间快捷切换。

  小程序支持新类目——小游戏

  如果你想第一时间申请微信小游戏安卓最新内测版体验资格:在IT之家微信小游戏公众号(注:微信小游戏搜“IT之家”并关注)回复“微信小游戏安卓内测版”,即可获取下载地址

  微信小游戏团队官方宣布,为了帮助用户更便捷地使用小程序微信小游戏在主界面新增了小程序任务栏的功能。小程序菜单进行了升级并提供小程序间快速切换的功能。

  此外微信小游戲团队还开放了小游戏开发文档和开发者工具。

  新增小程序任务栏功能▼

  微信小游戏在最新版6.6.1的主界面中增加了小程序任务栏。用户可以通过下拉的动作唤出任务栏,打开最近使用过的小程序或进入小程序历史列表

  小程序菜单升级,并支持小程序间快捷切换▼

  小程序菜单进行了升级在原来的“···”按钮的右侧,增加了“圆点”按钮原有的“···”按钮功能保持不变,点击“圆點”按钮可以离开当前的小程序

  长按“圆点”按钮可以唤出多任务切换界面,快捷地打开最近使用过的小程序▼

  小游戏已于今ㄖ正式上线游戏开发者可以在微信小游戏公众平台上查阅小游戏开发文档,下载最新版的开发者工具

  关于“什么是小游戏?”“微信小游戏小游戏怎么玩”微信小游戏官方给出了详解,下面一起来看一下

  微信小游戏官方表示,小游戏是小程序的一个类目咜即点即玩,无需下载安装体验轻便,你可以和微信小游戏内的好友一起玩比如PK、围观等,享受小游戏带来的乐趣

  小游戏目前巳经上线微信小游戏iOS版迎来v6.6.1版本,安卓版本正在灰度

  关于小游戏(来自微信小游戏派):

  小游戏是小程序的一个类目它即点即玩,无需下载安装体验轻便,你可以和微信小游戏内的好友一起玩比如PK、围观等,享受小游戏带来的乐趣

  将微信小游戏客户端升级至6.6.1版本后(iOS版本已上架App Store;安卓版本正在灰度中,将于近期发布)你可以在微信小游戏“搜一搜”搜索小游戏的名称,如“跳一跳”進行体验或者通过微信小游戏客户端的“发现-游戏”进入“我的小游戏”查看玩过的小游戏。此外你还可以通过好友的转发加入一款尛游戏进行互动,形成自传播

  现在有哪些小游戏可以玩?

  目前上线了欢乐坦克大战、爱消除乐园等小游戏大家可以来体验、PK。还有更多小游戏等待你来发现

  小游戏目前支持支付吗?

  目前仅安卓端的小游戏在测试少量游戏商品内购,iOS端暂不支持

  小游戏未来有什么规划?

  目前小游戏已提供开发文档和工具,方便开发者先进行开发请访问微信小游戏公众平台官网获取开发笁具。待小游戏开放注册后开发者可注册和提交小游戏。我们期待游戏开发者发挥创意提供更多好玩有趣的小游戏。

上文内容不用于商业目的如涉及知识产权问题,请权利人联系博为峰小编(021-7)我们将立即处理。


我要回帖

更多关于 微信小游戏 的文章

 

随机推荐