手把手教你,如何快速开发一款火爆的微信小游戏?

云加社区

分享技术干货,专注打造技术影响力

其实小程序和小游戏还是有一些共通的地方,特别是在后端的一些服务上,比如在登录部分小程序和小游戏是类似的,而Wafer2也是支持小游戏的。

如何快速开发一款火爆的小游戏?“火爆”是一个偏运营的词,在小游戏上线120天《微信开发者》公众号有一篇推文,其中有几个数字或许可以用来描述“火爆”这个词。截止微信小游戏正式允许第三方开发者发布已有22天,对外发布的小游戏达300多款,注册用户总规模过亿的游戏有数款,安卓月流水过千万的也有数款。

该文还提到与火爆相关的两个姿势。一是社交匹配度,在小游戏这样一个去中心化的大背景下,让游戏内容和微信社交相结合是一个很重要的点,同时开发者也需要在利用社交互动提升用户体验和群聊分享造成用户骚扰之间选择一个平衡点,过犹不及。第二是操作简便度,说的是游戏易上手操作简单。这是我们根据游戏成为爆款后观察得出的结论,并不是说具备这两个特性就一定能开发出一款火爆的游戏,并且新的爆款游戏也不一定符合这些特点,仅供参考。

今天介绍的内容更倾向于技术方面,所以“火爆”就从标题里面去掉了,并且也不会介绍具体的游戏逻辑如何开发,而是更偏向于如何利用好微信的开放能力开发一款小游戏。

什么是“小游戏”?小游戏是什么?

首先为大家介绍一下小游戏是什么。从普通用户的视角看,小游戏是小程序的一个子类目,可在微信内被便捷的获取和传播,即点即玩,具备出色的用户体验。小游戏是小程序,普通用户分不清也无需分清。

小游戏Runtime

如果放大小游戏的Runtime可以看到很多的细节,这是一个典型的分层架构:

最上层蓝色部分,是游戏代码,分为游戏逻辑,游戏引擎、weapp-adapter三部分。大部分游戏开发会用到一些引擎的工具、工作流,以及利用引擎封装的高层API去实现游戏逻辑。其次是weapp-adapter,因为小游戏的底层一方面不是webview,可以简单看成是webview经过精简、优化过后的平台;另一方面核心能力的实现上却参考了webview。所以这里如果有一个适配器,把小游戏的底层API——wx API适配到一个接近webview的接口,对上层引擎、已存在的游戏接入微信小游戏平台则会更加容易,这个就是weapp-adapter的作用。其中只有游戏逻辑是必要的。

可以看到,在架构上小游戏和小程序是有差别的,小游戏没有页面概念的,wxss/wxml不再存在。其次,底层实现也不是webview,小游戏和webview的关系只能说是渲染相关的核心能力可以通过weapp-adapter的简单适配保持接口一致,但同时很多webview上存在的功能并没有对等的实现,比如小游戏就没有DOM/BOM的概念,也没有全局的document/window对象。

小游戏的入口为game js文件,语言为Javascript,但有一些限制,比如禁止执行动态代码,因此eval、new Function等能力是不支持的。配置为game.json,可以配置横竖屏、接口超时等参数。js里面可以组合wx API的能力来实现游戏逻辑, 非代码类的资源应该尽量放到cdn,减少整个代码包打包后的大小,以加快用户首次进入时的速度,微信对首包的大小目前限制为4MB。

Webview Adapter

下面来说一下Webview Adapter,它的初衷是为了让游戏开发者更好地熟悉我们的平台,所以我们的平台在能力上会尽可能地与webview做一些适配,其实这个适配也是很简单的一层。比如说我们在浏览器里面使用image对象创建一个图片,而在小游戏里是通过wx.createimage来创建的,在代码中需要做一个简单的适配。

以此类推,常见的Canvas、document对象都是在Adapter中通过一个简单的适配实现的,大家可以研究链接中的代码。之后官方不会继续维护这个Adapter,我们会更专注于底层能力的建设。

小游戏能力概览

下图是小游戏能力的概览,小游戏能力的迭代比较快,部分能力还没有来得及罗列出来。比如最近刚发布的游戏圈、健康系统防沉迷相关的一些接口。

我们先看一下基础能力,在渲染这部分WebGL1.0和Canvas 2D都是支持的,这里的Canvas更接近于浏览器里面的标准。同时,这里提到的可控帧率的概念,如果小游戏在后台运行的话,可以尽量将帧率降低。

在多媒体部分,小游戏还不能像小程序一样实现实时的音频视频流,这是我们在后续要进一步支持的。网络IO的部分与小程序也是类似的,我们也提供了一些UI的组件,比如说拉起键盘,模态对话框等。

小游戏的社交开放能力现在已经对外了。其中最重要的一个能力是在开放域将微信的好友关系开放出去,给开发者使用,考虑到对用户隐私的保护会有一些设计上的限制。

因为小游戏去中心化的特点,分享这一部分也是非常重要的,开发者要考虑如何将这个能力利用起来。在代码方面,因为首包限制是4MB,但部分小游戏的代码量可能比较大。我们最近也在规划一个分包的能力,允许异步加载代码并执行,但这个代码是一定要经过我们审核的。

如何开发一款小游戏?

那么如何开发一款小游戏?因为我本人也只是开发过一些简单的游戏,并不是专业进行游戏开发,所以接下来我会更多地介绍一下如何利用微信的能力来开发小游戏。

选择小游戏引擎

微信跟引擎商也有比较密切的合作,一般现在的游戏引擎都会支持发布到多个平台,对微信小游戏这个新平台而言,已经有一部分引擎做了适配,比如Cocos Creator、Egret Engine以及LayAir Engine。适配的主要工作,类似之前提到的weapp-adapter,把wx API的能力,和引擎衔接起来。

比如引擎一般会把小游戏平台和webview平台对标,适配过程就是把wx API对应到webview的能力,同时把只存在于webview能力的依赖去除,比如不再依赖BOM、DOM。已适配的引擎都有相应的文章介绍如何把游戏发布到微信小游戏平台。

设备/环境适配

小游戏会有API提供获取屏幕的宽高、设备像素比等能力。小游戏开发完成后,在开发者工具也可以发起真机测试的请求,微信提供了不同设备的测试集群,帮助开发者提前去发现问题。基础库提供的wx API本身是一个不断迭代更新的过程,对于使用了新能力的小游戏,需要做低版本兼容。

微信登录

小游戏的登录过程,跟小程序是类似的。需要用户自己去定义登录状态。appsecret/session_key代表的是小游戏开发者和微信平台之间的一种信任约定,比如支付、上报托管数据,平台方需要验证access_token(只有appsecret才能换得到),和用户相关的还要验证session_key的签名,才能保证请求来自于小游戏开发者/用户,而不是恶意的第三方和随意捏造的用户。

access_token是一种应用态的access_token,和用户无关,需要保证全局维护一份,应该有一个中控的模块去保证access_token有效,同时在有效期内直接使用本地cache的access_token,而不是每次使用都去生成新的access_token,否则可能遇到调用频率限制的错误而影响服务。切记appsecret/session_key不要放到前端代码中去,否则可能会被坏人利用损坏小游戏开发者/用户的权益。

缓存

缓存类型包括数据缓存和文件缓存两类。数据缓存即key-value存储,适合结构化类型的小数据存储,上限为10MB。文件缓存提供了一个完整的文件系统API,包括目录/文件的增删改读,适合针对经常使用的网络资源做本地缓存,上限是50MB。

和浏览器不同的是,微信只提供了基本的存储管理能力,并不对存储什么,和存储满时删除什么做一些操作。开发者自行灵活定义缓存以及淘汰策略,比如对经常访问的资源存储到文件系统以及在文件存储满时,清理一些最近不常访问的文件。

开放数据域

开放数据域是一个封闭、独立的 JavaScript 作用域,和执行游戏逻辑的环境——称为“主域”隔离。其目的是在保证用户隐私的前提下开放用户数据给第三方,提升小游戏的整体用户体验。以下为物理视图,主域的入口为game.js,开放数据域则是一个独立的目录,其入口文件为index.js。

主域和开放数据域的通信受到严格的管制,基本原则是只进不“出”。

只进:允许外部的数据进入开放数据域,即主域可以随时postMessage到开放域,以及开放域引用主域准备好的本地资源

不“出”:不允许开放数据域的数据被上传到第三方服务器去。因为开放数据域里面,index.js是可以直接访问到用户敏感数据的,比如同玩好友数据。当然最终开放数据域需要index.js在综合各种数据后把数据以图形图像的方式渲染到sharedCanvas上,在主语sharedCanvas允许draw到主域的上屏Canvas上,最终用户会在显示屏上看到game.js画出来的好友排行榜、群排行榜或好友超越等社交互动信息。

在开发数据域中的数据,开发者没法把数据拿出去和游戏数据做关联,所以如果需要在开放域下展示的游戏数据,比如分数,开发者需要将该数据通过上报接口把游戏数据托管到平台。这样就可以在开发数据域里面就取到相关数据,其应用场景有好友排行、群排行榜、超越好友提示等。

分享

包括自定义分享和系统菜单分享,可以分享到群聊、单聊。也可以把分享上下文与特定的群关联,实现一些群PK、群排行榜的场景。分享是一把双刃剑,需要谨慎使用,一方面避免过度骚扰用户/群聊,另一方面增强社交互动提供好的游戏体验,需要找到一个合适的平衡点。

支付

小游戏在安卓下支持虚拟支付,它的方式目前只有一种:即货币托管的方式。主要分为2个流程:

1.充值:RMB -> 游戏币,这里开发者只需要拉起支付的流程,平台负责把用户RMB兑换成对应的游戏币,存储到用户对应的游戏帐号上

2.使用游戏币购买道具:开发者可以扣除对应的游戏币,给用户发放游戏内道具,扣除游戏币的过程需要有一定的事务机制,去保证在网络异常的情况下交易正常。扣除游戏币的接口支持根据订单id去重,意味着网络超时等情况下,开发者可用同样的订单id去重试扣除,直至返回明确的响应。

以下为简单时序图,部分角色针对开发者无需关心的部分做了相应简化处理:

性能

小游戏常见的性能问题,一般是内存造成的。如果内存占用太多会被微信客户端主动关闭,因此开发者在用户游戏过程中要及时释放不再使用的内存(js代码去除引用,或主动调用对应资源的释放接口,如果有的话),特别是Canvas和Image类大型对象,同时可以主动调用wx.triggerGC触发底层回收对应资源。

对于和游戏逻辑相对独立的工作,可以考虑在worker中去实现,小游戏提供了独立的worker线程执行js逻辑的能力。

版本更新机制

小游戏启动的过程分为冷启动和热启动。冷启动是指内存中无该小游戏的运行实例的情况下,启动小游戏的过程;热启动是指小游戏的运行实例在内存中还存在,只是暂时切换到了后台,这时用户再次触发小游戏回到前台的过程。

小游戏会在冷启动时检查小游戏的版本,如有新版本,在下载回本地后,下一次冷启动即可使用最新版。当然,我们也提供了API可以供开发者决策在有版本可用时,是否需要强制更新。

运维

特别提醒,小游戏有完善的后端监控,可以通过“运维中心”开启,比如脚本错误监控。脚本错误主要由运行过程中未捕获的异常触发,需要重点关注。该类异常,可能会导致用户小游戏前端的js逻辑暂停执行。

同时,平台也提供了完善的数据分析服务,可以通过“小游戏数据助手”进行数据分析。

Q/A

Q:在刚才的演讲中我听到有一个首包大小限制的问题,刚才也提到一个解决方案,是分包加载的机制,我们的小程序里面也有这个,首包限制是4兆吗?

A:是的。

Q:分包限制大小是多少?单个分包限制大小多少?整包限制大小是多少?最终有多大的限制?因为业务逻辑的复杂性,可能决定这个包的大小会不断的增加。

A:首包的限制,主要是从用户体验和小游戏本身代码实现上考虑的。包越大,从CDN下载小游戏包到小游戏框架加载游戏代码到用户看到游戏界面的时间就越长,用户流失就越多。首包4MB是基于让用户更快看到游戏界面这样一个考虑设计的,暂时是不会变化。分包不是说不允许提交多少,而是要综合考虑小游戏占用大小对用户的本地空间、用户体验和开发者的代码需求来决定,应该是一个不断调整的过程。

Q:整包的大小呢?

A:要考虑对微信本身的影响,比如一个包几百兆左右。

Q:我想问一下在前面分享过程当中都提到的session问题。

A:sessionkey比较重要,比如说分享到群需要加密钥。如果想得到这个群的ID必须要用sessionkey解密,还有支付API的交互也必须要用到sessionkey来验证用户的登录有效性。

Q:session是用于处理业务逻辑之外的?

Q:我们游戏里面的资源相对于小程序的资源会多很多,但是我们为了效率的考虑,尽量多做一些缓存,实际上提供缓存的空间比较小。为了效率的考虑如果缓存多一些,很多图片不需要重新加载很多页面不需要重新生成,想听一下有关这方面的建议。

A:数据缓存是10兆,文件类型的缓存我们这边是50兆,你们的资源要超过50兆,整体的策略要考虑一下,如果太大会导致用户的包占用用户体系比较大。也不排除后面会做一些优化,比如两个小游戏共用一整块的空间,所有小游戏共用这个缓存。用户不只是玩你这一个游戏,如果你的小游戏占得比较大,在他们玩其他游戏时,这些游戏就会把你挤掉。后期我们也会做一些优化,同时也需要开发者将这方面的需求反馈给我们。

Q:我注意到现在小游戏讲究的是去中心化,对于中小厂商的我们来说却并没有太多的应用,现在来看有什么好的方法吗?

A:其实去中心化代表为小型开发者和中等开发者,或大型开发者提供同样的舞台,大家都有同样的机会。只要游戏做得足够好用户就会分享,分享就会引发爆款。最近的小游戏就是通过去中心化完成的,分享类似于朋友圈的传播速度,只要把一些微信分享的东西做好,把游戏的品质提高,就有可能成为下一个爆款。

Q:比较火的小游戏,跟种子用户有什么矛盾?

A:如果我们有一个好友在玩,有好友在玩的话就会传播出去,后面也可能会考虑给每个游戏一些种子用户,有一定程度的曝光。

  • 发表于:
  • 原文链接:http://kuaibao.qq.com/s/20180509A1G5RV00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券