开发者该如何抓住微信小游戏的风口?

针对微信小游戏进行了技术方面的介绍。此次课程主要介绍了微信小游戏的基本架构,并对相关开发知识、开发环境以及资源管理等方面进行了干货分享。

以下为课程内容整理:
今天我们在希望向大家分享一下小游戏的概论,主要包括一些入门的相关知识。我们将内容分成了6个部分,分别是:
1.如何正确了解小游戏?
2.小游戏开发需要哪些知识?
3.小游戏开发环境
4.小游戏的资源管理
5.HTML 5发布为小游戏
6.小结

一、正确理解小游戏

图片
为方便大家理解,第一部分先讲一下小游戏到底是什么。
图片
相信这个群里的所有听众基本上都不会对这几款小游戏感到陌生。目前整体来看,第一波上线的小游戏更多以休闲类为主。例如《跳一跳》,应该是目前最流行的产品,虽然它只是一款单机。
此外,除棋牌类游戏,能够支持好友对战功能的只有《欢乐坦克大战》和《Q宠大乐斗》两款产品。
当然,对于棋牌来说,小游戏可能也会为其带来一波新浪潮。近一段时间棋牌类游戏由于房卡棋牌等模式的兴起也非常流行,小游戏上线后,大家拉个群,发一个小游戏的链接,就可以进行游戏了。这种便利会给棋牌行业带来很大的增益。
图片
这张图应该可以反映目前所有的小游戏用户入口,可以分成4类:
1.聊天入口。用户可以将小游戏分享链接直接推到群聊或与朋友的会话中,直接将他们拉进小游戏中。
2.搜索入口。玩家可以通过下拉微信聊天记录,或在专门的小程序页面对特定小游戏进行搜索。若想利用这个入口,游戏需要有较好的口碑,当然如果名字起得太长太难,可能也会影响这个入口的使用效果。
3.微信小游戏列表入口。玩家可以去这个列表中去寻找、发现新的小游戏。
4.朋友圈。从我的直觉来看,这个入口与聊天入口将会是最重要的2个小游戏入口。但是通过群聊的聊天分享,我认为是比朋友圈更重要的入口。也就是小游戏立项的时候务必、务必要做好通过社交拉新用户进入游戏的设计。
在小游戏里,除了游戏本身的逻辑开发和引擎使用外,对微信目前开放社交API的使用,以及怎样去设计社交,都会对游戏的传播效果造成影响。分享点的刺激是有讲究的,在早期游戏里,游戏更多是以“战力”、“等级”这些数值向的设计分享点,而现在,游戏分享点则更多在于“情感之上”,这些都是在游戏设计过程中值得思考的内容。提醒一点,80后和90后触发分享的情感点是不一样的,我不能说更多,但是游戏制作人自己应该加以揣摩。
图片
回到小游戏上,在讲技术之前,我们要去理解小游戏的趋势架构是如何的。小游戏不等于原生游戏,也不等于HTML 5游戏。现在一些媒体经常会讲:“小游戏是H5游戏的春天。”严格来说,这么讲不是太准确。
标准的 HTML 5 游戏是什么呢?标准H5游戏是Facebook Instant Games、爱微游、QQ空间的那些游戏 。这些是在浏览器里跑H5的游戏;但是小游戏本质是Runtime游戏,它跟小程序类似,结构是小程序+游戏库API。
在这个架构之上,他会有更多优势。首先它会比H5游戏更稳定;其次小游戏跳出重进后,用户不用像在H5游戏里那样进行重新登录;另外小游戏可以调用微信的原生用户,在转发、支付等方面也固定了接口,可以说对整个微信生态建设是有很大帮助的。当然对于我们来说一定要注意的是,虽然小游戏的调试环境是在浏览器当中,但这只是其 HTML 5 兼容性的体验,它真正在微信当中时是用 Runtime的。
我们自己很清楚H5和小游戏之间在技术结构上的差异,但现在如果说小游戏不是H5游戏又会被人喷,于是我们今天发明了一个新名词:HTML 5 技术栈。它包含了所有纯H5和类H5的技术解决方案。
图片
《拳皇命运KO不服》由国外引擎Createjs制作;《全民大乐斗》是目前唯一一款带有成长元素的小游戏,由Laya引擎制作
这张图我想表达的是,在原生游戏中,可能还有一些游戏在用自研引擎来制作,但在小游戏中,已经没有自研引擎的身影了。所以不管是国内的Cocos、Laya、Egret这些H5引擎,还是用国外的Phaser、Createjs,基本上都是可以直接用的。
需要注意,特别是小公司,大家最好使用已经被微信适配证明过的引擎,特别是现在微信小游戏开发文档只有中文版本,海外的引擎可能并不能帮助你多少,除非你的研发团队能吃透他们的英文文档而且忍受带时差的论坛技术支持。而且在这次上线的游戏中,除了华夏乐游与飞鱼科技外,其他都是腾讯自研的,你不知道他们在研发过程中究竟踩了多少坑,改了多少东西。
图片
对于3种游戏的对比,我来严格列举一下他们之中区别。首先,他们的入口都不同,这也就代表了它们的用户属性是不同的。比如,可能很多小游戏用户并不是原生游戏玩家,作为非玩家它们对于游戏产品的需求也会与玩家不太一样,对于“VIP1-VIP15”、“首充大礼包”、“首充3倍”,它们或许就不会那么敏感。当然,这些都是值得去继续揣摩的事情。
在流量成本上,小游戏和HTML 5的崛起有一定原因源于其低于原生游戏的流量成本。实际上游戏品类没有什么变化,变的是流量成本,当某一模式的流量成本过高了,行业就会有动力去挖掘一个新平台,去获取一批新的游戏用户。PC端游到PC页游,PC页游到手机原生、再到手机页游,表面上看是一件技术驱动市场变化的事情,但本质上是流量成本驱动技术迭代、进而驱动市场变化。这个本质要理解清楚。
在开发的时候,CP也要注意性能的约束。纯H5游戏在性能和占用内存上都是约束性最高的,所以如果往往H5游戏做小游戏移植版本,不论用哪个引擎,适配工作都会进展得相对顺利。当然需要注意,诸如CSS、DOM是不能用于小游戏开发的。但是反过来,如果你移植一款手机原生游戏到微信小游戏,就得非常小心内存使用的问题了。
我出于个人技术倾向、项目历史的原因,非常强烈地不喜欢那些通过编译器去转化不同编程语言的方案,因为这些方案并不「自然」,表面上看是省了很多移植开发量,但在调试和优化阶段会有无数的坑等着你。所以最优的方案,我仍然建议大家用 JavaScript 重新移植游戏,不论你的原生游戏是Cocos C++, Lua还是Unity的。

二.小游戏开发商需要哪些知识?

图片
接下来我来讲述一下小游戏的相关知识,希望能够帮助大家能够顺利上手开发。
图片
这张图是小游戏目前可以使用的技术栈。最上层是各家游戏引擎,经过微信验证后,都是可以提供给大家尝试的。中间一层是小游戏的底层,是小游戏所借助的 HTML 5 的技术栈。
为什么说它是 HTML 5 技术栈?因为小游戏并没有完全使用 HTML 5 标准,它只是模拟这些的接口,从而更好地完成 HTML 5 向小游戏的移植工作。最下面这部分是微信自己的API,之后会对它进行展开讲解。
图片
首先是底层的技术,它包括JavaScript代码和Canvas 2D、WebGL 1.0的API。这2个API都是和Web上的API是一致的,这也是微信想要拉拢H5开发者所作出的努力。微信同样也很快地与国内的几个主要引擎商进行了合作,让各家引擎可以第一时间支持微信小游戏的发布。同时微信小游戏Runtime也开发了一个Adapter,并且移植了一些海外诸如Phaser, Three.JS, CreatreJS等H5引擎到小游戏环境里面。
图片
上层我们建议大家通过游戏引擎来开发,这是出于对成本的考量,因为游戏引擎可以为大家尽可能缩短研发周期、降低项目成本和风险。现在微信所试验过的就是上图所列出的6个引擎,这些大家都是可以去尝试的。
图片
除此之外还有微信小游戏的SDK,这些虽然是是微信所提供最底层的东西,但实际上是除去引擎外大家需要去关注的部分。在游戏玩法逻辑研发之外,这些接口都是要去研究的,这才能让游戏拥有更好的社交玩法。具体这些接口的详细功能大家可以参阅微信的文档。目前可以看到,仅小游戏所拥有的直接分享功能和即点即玩的特性让它在传播和进入门槛上都拥有极大的潜力。
图片
这是《跳一跳》和《星途Go》好友排行榜的例子,包括游戏里的排行榜和每个关卡的排行榜。
图片
这个例子是《坦克大战》中的邀请对战,当你把邀请发到群里后,进入的玩家可以选择阵营,形成3对3模式。
图片
直接接受邀请是微信所做的最大创新。在原生游戏中,玩家点击邀请链接后首先要下载安装,之后还要互加好友,随后才可以进行匹配,整体流程路径很长,流量转化成本也很高。然而在小游戏场景下,当你的好友点开你的分享链接后,可以直接进入游戏,这是一个突破,大家需要在这方面考虑更多。
我刚刚仔细检查了一下微信小游戏的API,有转发邀请,但是并没有获取其他微信好友昵称、备注名、分数的排行榜API。大家可以再检查确认一下,如果的确是在今天没有这个公开的API,那么游戏设计为好友排行榜竞争的玩法时候则需要注意一下。不过目前在腾讯游戏中都可以使用,未来这个API也有可能会出现。

三.小游戏开发环境

图片
接下来我会进入更加技术的一个环节,让大家更了解如何去适应小游戏的开发环境。
图片
这张图是小游戏的运行框架,它不是微信官方给出的,是我们自己分析得出的。首先,最底层是iOS安卓的硬件、系统等内容,这些提供了系统层级别接口。微信在这基础上开发了微信安卓版和iOS版,其中包含了包括用户、支付、文件、多媒体等各种模块。
然而在在这样一个原生应用中,没有浏览器的加持H5程序又怎样运行JavaScript代码呢?这是通过JS VM在安卓上集成V8引擎,在iOS上集成JavaScript Core引擎去执行JS代码的。
微信仅仅执行JS代码还不足以让开发者的小程序运行起来,因为开发者所调用的用户转发文件系统这些接口都是不存在于JS VM中的。实际上,它是通过绑定的接口来讲微信原生接口桥接到JS接口上的。当你调用这些JS接口时,实际上就是在调用原生接口来达成功能。如果大家对绑定技术感兴趣,可以去关注我们开源的JSB技术,这也是目前游戏引擎当中唯一开源的实现技术。
这里我们就不深入细讲了,继续讨论微信小游戏是怎样提供接近于浏览器环境以及怎样跟游戏引擎相结合。
图片
图片
图片
总结一下,微信的三大接口:
1.渲染接口
2.微信功能接口
3.Adapter接口
图片
除了抹除浏览器和小游戏之间的差异外,游戏引擎还可以带来成本上的巨大降低。就像上图写的,成本降低主要来自于3个方面:
1.Framework中,当我们游戏引擎封装了更高层的API,开发游戏会更加便利,这就使得人力成本降低
2.编辑器层面中,一个好的编辑器可以明显提高程序、美术、策划之间的协同效率。
3.在兼容性层面中,游戏引擎带来的设备兼容性和稳定运行效率可以降低大家的维护成本,加上刚才提到的跨平台能力,可以给大家带来更强大的渠道和流量。
所有这些人力成本、维护成本的降低以及跨平台所带来的丰富流量,可以让大家的项目以更低的开发成本完成游戏,继而盈利。
图片

四.小游戏的资源管理

图片
第四个部分,我想分享的是小游戏的资源管理,这是小游戏目前和浏览器环境差异最大的另一个方面。
图片
首先为大家介绍一下小游戏资源管的分布方式。大家如果使用过开发者工具的话会注意到,当你开发一个小游戏的时候,你如果点预览,它会有一个上传的过程,之后扫它提供的二维码就可以测试这个小游戏。实际上这个上传的过程就是将你的小游戏包上传到CDN内。在你的用户扫这个二维码时,实际上是从微信的CDN下载这个小游戏包到他的手机上,并执行。
这是最简单的版本,让我们来看一下相对复杂一点的。
图片
微信小游戏为了能够提升首包加载速度,将包体限制在了4M,这显然对很多HTML 5 游戏来说是不足够的。所以大家就需要将一些资源文件放到自己的远程服务器中。也就是这张图所体现的访问关系:当用户扫你二维码的时候,会让小游戏包下载到微信,然后微信内小游戏包代码在执行过程中会请求远程服务器资源。
不同用户会将不同的资源下载到他自己的沙河环境当中,并且不同小游戏之间的资源缓存也是相互分割的。这样就可以保障不同用户和不同小游戏间的资源不会互相冲突。
图片
H5开发者会非常在意首场景的加载体验,微信小游戏也非常需要注意这一点。小游戏在下载过程中会将包首先完整下载,然后才会进行详细的代码完整初始化。在初始化之后再去加载远程资源,再去启动场景。
这与浏览器有很大的区别。浏览器永远是按需加载,当它需要一个资源的时候才会加载一个资源。所以大家一定要在小游戏当中控制好自己的包体大小。
图片
经过一段时间研究并与微信团队进行沟通后,我们得出了一个目前较好的资源解决方案。我们会将代码包放在小游戏包内,所有的资源都放在开发者的Server上。这样,当代码请求某个资源时,就会动态进行动态下载,这样才能满足按需加载的需求。
图片
我们这样做的原因是,小游戏环境是实际上是没有类似浏览器的缓存和资源过期机制的。 在浏览器中,当用户请求一个页面时,第一次请求会下载所有资源,一段时间后,第二次请求时它会自动检查所有资源是否过期,如果没有过期则会从本地缓存空间中下载该资源,这对于开发者和用户都是透明的。但小游戏没有这样的机制,所以当你的信息再去请求资源时,每次都会重新下载该资源,不管你这个资源此前下载过多少次。所产生耗电量和加载时间对于用户来说都是不可接受的,所以我们在Cocos Creator当中内建了一个更完整的解决方案。
如何去处理资源过期的问题呢?如果说资源URL是完全一致的话,在逻辑当中是不会下载新资源的,这就会导致Bug。我们所推荐的解决方案是,在Cocos Creator打包时会有一个“MD5 CASH”选项,勾选后我们会为所有文件名打上MD5码。这样当文件更新后,文件名就会变化,这就一款为服务端URL会变化,这时代码包在请求时就会被认定为一个新的资源,这样就完成了资源缓存和更新机制。
同时我们还提供了API让开发者删除资源缓存,这样在大版本更新时,如果缓存资源过多,你就可以先去清除缓存,然后再去更新所有资源。
当然,用户如果觉得我们的资源管理方案不太适合你,你也可以去自己设计一个合适自己的资源管理方案。这些方案所以来的API微信都有提供,即微信文件API和微信网络API。网络API可以让用户将文件下载到缓存空间中;文件API可以支持文件的重命名、删除等操作。

五.HTML 5游戏发布为小游戏

图片
相信很多朋友关注的是,如果我已经有H5游戏了,我怎样把这个H5游戏发布到小游戏当中。这个其实是微信团队非常关注的事情,他们希望大家的H5游戏可以去针对微信做了社交玩法后发布到微信小游戏环境当中。我们继续以Cocos Creator为例来看如何将已有游戏发布到小游戏。
图片
这张图是我们编辑器的截图,在这里面可以去编辑场景、UI,可以进行资源的管理、发布、打包。
图片
用Cocos发布小程序需要这几个步骤:
1.你可以从你的小程序公众平台上找到App ID并输入,然后将发布平台修改为WechatGame。
2.点击右下角build构建,你就会看到下面这个界面:
图片
4.当调起微信开发者工具之后,你就可以做预览操作,在手机上测试微信小游戏了。

六.小结

图片
总结一下知识点。
首先,微信提供游戏上的支持,并且提供了庞大用户基础和用户分享API,这肯定会催生出完全不同的游戏体验。我认为社交性玩法在微信上会有更大的发挥空间,会比以往的社交平台都要大。
其次,我们讲到了微信小游戏和浏览器环境的2大差异:API支持和资源加载。
另外,我们推荐大家使用游戏引擎,加速游戏的开发和迭代,从而降低产品风险。
同时,小游戏、手机页游、PC页游其实都依赖于HTML 5 的技术栈,包括Cocos Creator原生发布也都依赖于此。HTML 5 引擎提供了基于HTLM 5技术栈的跨平台发布,为大家提供了更多选择和可能性。
图片
今天我们所说的HTML 5技术栈包括手机页游、手机原生和PC页游。手机页游包括QQ空间、微信小游戏、厘米秀这些Runtime方案,Facebook Instant Games这种纯H5方案以及爱微游、疯狂游乐场这些H5渠道等。手机原生包括各种JSB、Runtime打包游戏、微端游戏等。第三个是PC页游,因为Flash之前宣布2020年停止更新,所以很多PC页游上的Flash游戏现在也在转成HTML 5 游戏。
简单计算一下,我用手机原生游戏市场规模除以PC端游规模,再乘以PC页游规模,粗略算出手机页游的市场空间可以打到每年280亿人民币。如果说,手机页游和PC页游互为此消彼长的话,向上取整则可能会有500亿的市场空间。中国游戏产业规模占全球游戏市场的25%,当然这个数还在上升,算上这一方面,H5技术栈可以支撑全球手机页游 + 部分手机原生 + PC页游市场,理论市场容量上限可以达到2000亿人民币。所以说,现在做这方面的技术储备其实是非常有价值的。

Q&A环节

1.作为个人开发者,利用微信的用户和支付功能,而不是将微信作为一个引流工具,能否从游戏中获得较好的收益?另外,Cocos和微信支付对接中是否有坑?
关于支付:微信小游戏目前还没有与iOS打通,具体什么时候打通我也不太清楚。所以说能否从游戏中获得较好的收益,这个问题应该由微信来回答,因为这些数据如今都是保密的,包括DAU、留存率、安卓目前的收益率、用户画像,像用户画像是需要你们去自己琢磨的。
关于引流:我不确认微信是否允许这么做。但这肯定不是微信小游戏团队希望看到的结果
2.微信小游戏的优势和劣势有哪些?如何绕开劣势?
当前劣势可能还是在于对非游玩家特点的理解上。我认为大部分微信小游戏用户很可能原来并不是传统意义上的游戏玩家。这些玩家的游戏化需求、情感、乐趣,都和我们以往理解的手游玩家不一样。当然我认为也不能把这一点完全看成劣势,因为就算是非游戏玩家也是有游戏化需求的。问题关键在于怎样正确理解、切入、服务这些大量的非游戏用户。现在小游戏刚刚起步,所有人都在摸索这件事情,谁能先利用好这个平台的用户特点,谁就能成为这个新领域的巨头。
3.目前包括已上线的十几款小游戏都是以轻度休闲为主,处于试水阶段,如何看待重度网游在小程序的发展潜力和前景?
我从2个方向来讲。
首先,其实在PC页游发展上也可以看到,都是从休闲游戏(偷菜抢车位、抓奴隶)开始的,再将用户培养到一定程度后才慢慢出现重度页游。手机页游也是如此,不要想着第一天就可以直接跳跃到重度游戏。行业发展规则必然是要先去培养和教育用户,然后再过渡到做中度、重度游戏,我认为不会有非常快的跳跃。
其次,微信小游戏很多玩家都是非游戏玩家,他们目前对于重度游戏可能并不会很感冒。如果是重度游戏玩家,他为什么要去玩小游戏?到底小游戏用户里有多少是重度玩家?重度玩家为什么要玩微信小游戏,而不是已有的《传奇霸业》《奇迹MU觉醒》等重度的微信精品游戏,理由是什么?这现在都是需要去摸索和探讨的问题。其实就算是Facebook Instant Games目前也是主要由轻度休闲游戏组成的。
其实就现在PC平台来看,目前很多PC端游的品类也没有完全移到页游上面,典型如FPS、MOBA游戏,在PC页游上是看不到的。平台属性还是天然就决定了的。端游和PC端游的用户场景是不同的,像之前很多挂机类页游之所以能崛起,就是因为在很多场景下用户不具备安装客户端的条件,同时也无法投入过多精力去进行端游,比如在办公室中。目前来看,手机原声游戏和手机页游的用户场景确实有所重叠,但这都需要进一步地探讨并优化。
4.小程序对初始包大小限制比较严格,目前看官方的《四川麻将》感觉很粗糙,如何突破这个限制?
初始包大小限制就是4M。粗不粗糙和初始包大小是没有关系的,你可以首场景加载4M初始包 + 10M资源,只不过加载速度会慢而已,你的代码加载更多也没有问题。我认为可能《四川麻将》粗糙的原因可能在于开发者更多考虑了用户的等待时间体验。我们也是建议尽量控制首场景的大小,在之后的游戏中逐渐加载更多资源,为用户提供一种渐进加载的游戏体验。
5.微信小游戏不支持热更新了吗?
热更新在 HTML 5 游戏中是不存在的,因为是没有本地文件的,你永远可以更新自己的服务器内容,让用户得到更新的资源。对于小游戏来说最关键的是,你能不能热更新你的代码包。你的代码包会存储在微信CDN中,你必须向微信CDN提交更新申请,至于具体的审核过程,还需要看后面微信官方所给出的具体方案。
6.小游戏内存控制在多少比较合适?
这需要看用户手机的硬件情况,开发者可以做的就是尽量控制不要让内存占用持续增长,维持在某一个峰值以下。我认为控制在100M以下比较安全。H5游戏一般是控制在150M以内,200M也是可以跑,但不安全。安卓一般内存会比苹果手机要大,所以在测试的时候优先测试苹果手机,尤其是 iPhone 6,如果没有崩溃现象,基本上就是可以了。