开发者该如何抓住微信小游戏的风口?听Cocos创始人王哲详解 | 课堂笔记

棉花糖

从正月初五起至正月初九，我们每天将推送一个主题的“旧文回顾”，涉及运营、策划、美术、技术、营销等领域，今天为技术篇。
微信小游戏在2017年12月28日正式上线。相对于传统的H5游戏，小游戏的优势十分明显，拥有微信庞大的用户量以及更好的兼容性，在天生适合微信社交生态的同时还不用担心被屏蔽。无疑，这或许是一个巨大的风口。不过在现阶段若想抓住这波红利，开发者所面临的挑战也是明显的，产品品质定位该如何定位?H5游戏和小游戏的匹配度究竟是怎样的?开发过程中会开发者可能会遇到哪些坑?这些都是目前急需解决的问题。
在1月4日的葡萄学院中，我们请来了Cocos 引擎创始人王哲和Cocos核心技术凌华彬(Panda)，针对微信小游戏进行了技术方面的介绍。此次课程主要介绍了微信小游戏的基本架构，并对相关开发知识、开发环境以及资源管理等方面进行了干货分享。
以下为课程内容整理:
今天我们在希望向大家分享一下小游戏的概论，主要包括一些入门的相关知识。我们将内容分成了6个部分，分别是:
1.如何正确了解小游戏?
2.小游戏开发需要哪些知识?
3.小游戏开发环境
4.小游戏的资源管理
5.HTML 5发布为小游戏
6.小结一、正确理解小游戏

为方便大家理解，第一部分先讲一下小游戏到底是什么。

相信这个群里的所有听众基本上都不会对这几款小游戏感到陌生。目前整体来看，第一波上线的小游戏更多以休闲类为主。例如《跳一跳》，应该是目前最流行的产品，虽然它只是一款单机。
此外，除棋牌类游戏，能够支持好友对战功能的只有《欢乐坦克大战》和《Q宠大乐斗》两款产品。
当然，对于棋牌来说，小游戏可能也会为其带来一波新浪潮。近一段时间棋牌类游戏由于房卡棋牌等模式的兴起也非常流行，小游戏上线后，大家拉个群，发一个小游戏的链接，就可以进行游戏了。这种便利会给棋牌行业带来很大的增益。

这张图应该可以反映目前所有的小游戏用户入口，可以分成4类:
1.聊天入口。用户可以将小游戏分享链接直接推到群聊或与朋友的会话中，直接将他们拉进小游戏中。
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是不能用于小游戏开发的。但是反过来，如果你移植一款手机原生游戏到微信小游戏，就得非常小心内存使用的问题了。
其实原生游戏移植到小游戏也有一些案例，比如《保卫萝卜》，但一定要注意，在移植原生游戏过程中一定要注意性能和内存上的问题，如果控制不好很可能程序就会崩溃。其实有不少曾经的客户过来问我，如果原生游戏是用C++这些语言写的，能不能直接移植到小游戏上。很遗憾，不行，目前必须通过手工去翻译，因为今天微信提供的标准接口只有JavaScript。
我出于个人技术倾向、项目历史的原因，非常强烈地不喜欢那些通过编译器去转化不同编程语言的方案，因为这些方案并不「自然」，表面上看是省了很多移植开发量，但在调试和优化阶段会有无数的坑等着你。所以最优的方案，我仍然建议大家用 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代码的。