微信「跳一跳」带火小游戏，开发者如何快速上手？
jopen 7年前
<p><a href="/misc/goto?guid=4958190462259388048" title="程序员"><img alt="微信「跳一跳」带火小游戏，开发者如何快速上手？" src="https://simg.open-open.com/show/a08e318ff2ebc4ad30d5e6ff0cd93701.jpg" /></a></p> <p>在微信 6.6.1 版本中，给用户推送了“玩一个小游戏才是正经事”的首屏小游戏入口，一时间整个朋友圈都在跳一跳。相信很多游戏开发者心痒难耐，想一探究竟。今天就由我和王哲从技术角度给大家科普一下微信小游戏的开发知识，这一系列文章源自我们 Cocos Creator 引擎团队和微信团队合作过程的总结，目前，Cocos Creator v1.8 编辑器已第一时间支持一键发布微信小游戏版本。</p> <p>今天这篇文章是介绍微信小游戏开发系列文章的第一篇。</p> <p><strong>一、小游戏生态特点</strong></p> <p>目前微信小游戏已发布 17 款首发游戏，包括六款棋牌类游戏，以及欢乐消消消、爱消除、坦克大战、保卫萝卜等休闲游戏。</p> <p style="text-align:center"><img alt="微信「跳一跳」带火小游戏，开发者如何快速上手？" src="https://simg.open-open.com/show/0651d1639e76fb28187e6307b279a947.jpg" /></p> <p>从入口方面来说，微信小游戏目前的主要入口有下面几个：</p> <ul> <li>群或好友分享</li> <li>识别小游戏二维码</li> <li>微信聊天列表页面下拉后出现最近玩过的小游戏</li> <li>发现 – 小程序</li> <li>发现 – 游戏 – 我的小游戏</li> </ul> <p style="text-align:center"><img alt="微信「跳一跳」带火小游戏，开发者如何快速上手？" src="https://simg.open-open.com/show/7d3b7175d447ba5c29159f7859373969.jpg" /></p> <p>从技术角度来说，微信小游戏是微信小程序的基础上添加了游戏库 API。小游戏只能运行在小程序环境中，所以小游戏既不是原生游戏，也不完全等同于 HTML5 游戏。但实际上小游戏面向的就是 HTML5 游戏开发者，为了能够让 HTML5 游戏可以尽可能低成本得移植，小游戏尽可能复用了 WebGL、JavaScript 等源自浏览器的 HTML5 技术。可以说小游戏是使用 HTML5 技术搭建，具有原生体验的微信内游戏产品。</p> <p style="text-align:center"><img alt="微信「跳一跳」带火小游戏，开发者如何快速上手？" src="https://simg.open-open.com/show/dce89fd3083e303d8fe2150e733e0c89.jpg" /></p> <p>小游戏采用这样的模式有很多优点，最大的优点在于稳定和可控。相比于原生，微信可以将游戏闭环在微信内部；相比于纯 HTML5，则不用担心被游戏切广告切支付。</p> <p>微信小游戏的运行时环境与曾出现过的其他 Runtime 形态相比有一个很大的好处是「兼容 HTML5 生态」。也就是说不论你用哪个游戏引擎开发的 HTML5 游戏，都可以很容易地移植到小游戏上面。这使得微信小游戏可以直接从巨大的 HTML5 生态中借力。</p> <p>而在技术之外，微信给小游戏最强的加持就是社交传播了。利用好微信的社交生态来获取新用户，将在小游戏的设计中占据非常重要的地位。我们可以看到，第一批 16 款游戏中，除了跳一跳有闪屏入口之外，其他的小游戏入口都藏得比较深，所以流量来源并不是主要靠推荐榜来的，而是通过社交传播来的。这点和市面上多数导用户、洗用户、滚服合服的游戏设计思路是不同的。</p> <p>微信开放的优质入口，庞大的用户基数，以及即点即玩、利于分享的特性将赋予小游戏极大的潜能。一切都看各位开发者如何把握机会，找到适合微信用户的游戏品类和形态。</p> <p><strong>二、API 之上：开发小游戏的必备知识点</strong></p> <p>之前提到，小游戏的开发主要复用了 HTML5 技术栈，所以开发过 HTML5 游戏的开发者上手会快很多，甚至很多 HTML5 游戏都可以很快移植到小游戏平台。具体来说，微信小游戏的开发技术分为三个部分。</p> <p style="text-align:center"><img alt="微信「跳一跳」带火小游戏，开发者如何快速上手？" src="https://simg.open-open.com/show/7a85fd0d408e86260897e8b4df1f64d3.jpg" /></p> <p><strong>1. 底层技术</strong></p> <p>首先是开发语言，微信小游戏只支持 JavaScript，当然可以编译为 JS 的 TypeScript 以及 CoffeeScript 都可以作为开发语言使用。</p> <p>其次是小游戏所支持的游戏库 API，主要包含 HTML5 的 Canvas 2D API 和 WebGL 1.0 API，使用任何一种 API 都可以完成游戏最重要的渲染功能，不过不能够混用，除此之外，只有 WebGL 渲染模式可以支持 3D 渲染。</p> <p><strong>2. 中间件：游戏引擎</strong></p> <p>当然，直接使用 Canvas 2D 或 WebGL 来制作游戏是门槛很高，也非常费时费力的一件事，你肯定不希望一个小游戏项目拖上一年半载吧？所以使用 HTML5 游戏引擎其实是非常明智的选择，引擎封装出的高层接口可以大大降低开发者的开发门槛，缩短项目周期。目前国内的三家主流引擎 Cocos Creator、Egret、Laya 均已支持小游戏发布，Phaser.js、Three.js 等国外 HTML5 引擎虽然并没有支持直接发布，经过一些定制也是可以成功运行在小游戏环境中。</p> <p><strong>3. 微信 SDK</strong></p> <p>除此之外，微信小游戏还提供了丰富的微信内部 SDK 供开发者调用，使用这些接口可以完成用户登陆、转发、排行榜等常规的社交功能。</p> <p style="text-align:center"><img alt="微信「跳一跳」带火小游戏，开发者如何快速上手？" src="https://simg.open-open.com/show/99d3b40391ea88f25e286f526b31be01.jpg" /></p> <p>不过除了这些常规玩法以外，最让人欣喜的是通过转发小游戏，可以完成玩家在游戏中的组队或对战，加上小游戏即点即玩的特点，这种邀战的游戏体验可以说是天衣无缝。</p> <p style="text-align:center"><img alt="微信「跳一跳」带火小游戏，开发者如何快速上手？" src="https://simg.open-open.com/show/d3aaa0e79051b1ddab5a7bf73f75e595.jpg" /></p> <p style="text-align:center">欢乐坦克大战中邀请好友组队</p> <p style="text-align:center"><img alt="微信「跳一跳」带火小游戏，开发者如何快速上手？" src="https://simg.open-open.com/show/da42018230b7b87dcee91898f9e4593d.jpg" /></p> <p style="text-align:center">好友通过点击转发链接直接进入游戏完成组队</p> <p>这种群转发 + 即点即玩的机制可能带来非常有趣的社交玩法。</p> <p><strong>三、API 之下：理解小游戏的底层技术架构</strong></p> <p>开篇提到，小游戏既不是原生游戏，也不能等同于 HTML5 游戏，它的开发环境实际上跟两者都有非常密切的关系。与 HTML5 的关系就是它复用了 HTML5 的渲染接口，但与原生游戏又有什么关系呢？我们用一张图来解释：</p> <p style="text-align:center"><img alt="微信「跳一跳」带火小游戏，开发者如何快速上手？" src="https://simg.open-open.com/show/071bdfeb8ed0a7446629c89c5b2cec5e.jpg" /></p> <p>小游戏的运行环境其实是微信的原生环境，游戏的 JavaScript 代码并不是通过浏览器来执行的，而是通过图中 JS VM 层独立的 JavaScript 引擎来执行的。 在 Android 平台使用 Google 的 v8 引擎，而在 iOS 上则使用苹果的 JavaScript Core 引擎。</p> <p>当然 JS 引擎只负责解释执行 JS 逻辑，并没有支持渲染接口，那么渲染接口和诸多的微信功能接口又是怎么实现的呢？这就不得不提到脚本绑定技术，这种技术可以将某种原生语言的接口桥接到脚本接口上，当在脚本层调用接口时，会自动转发到原生层，调用原生接口。微信小游戏环境用的就是这样的技术，将 iOS / Android 原生平台实现的渲染、用户、网络、音视频等接口绑定为 JavaScript 接口。这也就是图中的微信原生层模块到小游戏层模块的原理。脚本绑定技术无法在这篇文章中深入探讨，如果大家有兴趣，可以去了解 Cocos Creator 的 JSB 绑定实现，这也是游戏引擎中唯一一家完全开源的绑定技术实现。</p> <p>小游戏在有了这样一套框架之后，HTML5 游戏在移植过程中仍然是会遇到无数 API 兼容性问题，最简单的比如 document 对象不存在，Image 对象不存在。为了降低移植成本，微信团队提供了一个 Adapter 脚本，适配了一部分浏览器接口。</p> <p style="text-align:center"><img alt="微信「跳一跳」带火小游戏，开发者如何快速上手？" src="https://simg.open-open.com/show/6a0b977d0dc60b275d01e2ceb34b8f17.jpg" /></p> <p>如上图所示，Adapter 部分提供了大部分 HTML5 游戏所依赖的浏览器接口，这张图也比较完整得描绘了微信小游戏中开发者可以使用的接口模块：</p> <ul> <li>浏览器渲染接口</li> <li>浏览器 Adapter</li> <li>微信服务 SDK</li> </ul> <p>值得一提的是，Adapter 脚本已经不再继续维护了，所以额外的接口适配都需要开发者自己完成，而依赖于 DOM 接口的大多数功能都是无法适配到小游戏环境中的。</p> <p>刚刚也提到推荐大家使用游戏引擎去开发小游戏，小游戏环境的基础之上，游戏引擎不仅封装了高层接口，还尽力抹平了浏览器与小游戏环境之间的差异。</p> <p style="text-align:center"><img alt="微信「跳一跳」带火小游戏，开发者如何快速上手？" src="https://simg.open-open.com/show/fa9fb12a3eb30755354270ceb18f24ca.jpg" /></p> <p>从图中可以看到，如果不使用游戏引擎，开发者面对的是小游戏的底层 API，在使用了游戏引擎后，面对的是引擎的 API。</p> <p>总结游戏引擎为开发者所做的工作，包含下面几个方面：</p> <ul> <li><strong>Framework：</strong></li> </ul> <p>高层 API 封装对于游戏开发更便利；</p> <p>资源加载适配；</p> <p>事件处理适配；</p> <p>音频播放适配；</p> <p>窗口适配；</p> <p>输入框适配；</p> <p>添加其他缺失的接口，比如增加 DOM Parser 用于解析 TileMap。</p> <ul> <li><strong>EDITOR：</strong></li> </ul> <p>优化程序-美术-策划的协同效率；</p> <p>优秀的游戏编辑器可以大幅缩短开发周期。</p> <ul> <li><strong>GENERAL：</strong></li> </ul> <p>优秀的游戏引擎提供高设备兼容性，稳定的运行性能；</p> <p>跨平台游戏引擎提供无缝发布 HTML5、小游戏、原生平台的强大能力。</p> <p>高效率的编辑器带来开发成本的降低；低入门门槛降低了人力成本；高兼容性和稳定的性能降低维护成本；跨平台/渠道带来强大的流量获取能力。对于开发者来说，这些就是生存和盈利的保障！</p> <p><strong>四、上手调试小游戏</strong></p> <p>需要注意的是，在撰文的今天，微信公众平台目前尚没有开放开发者申请游戏类目的权限，所以还只能通过小游戏开发工具的 “体验小游戏” 功能来做技术层面的尝试。不过不用着急，微信团队应该很快就会开放游戏类目的申请。</p> <p><strong>1. 微信开发者工具介绍</strong></p> <p>下面这张图就是微信开发者工具在做小游戏开发时的基本布局：</p> <p style="text-align:center"><img alt="微信「跳一跳」带火小游戏，开发者如何快速上手？" src="https://simg.open-open.com/show/3f9c845a9921014800be17086e12fd3b.jpg" /></p> <p style="text-align:center">微信开发者工具基本布局</p> <p>其中上方是工具栏，包含最重要的编译、预览和配置详情；左侧是模拟器窗口用来展示游戏运行效果；右上方是代码编辑器，可以查看项目中的文件列表，编辑文本文件；右下是调试器窗口，使用方法和 Chrome Devtools 完全一致。</p> <p><strong>2. 微信小游戏配置和入口文件</strong></p> <p>在微信小游戏项目中，project.config.json 和 game.json 配置文件是大家首先需要添加的，其中 project.config.json 可以定义你的小游戏 appid、游戏名、配置等。而 game.json 主要用于指定游戏朝向和网络超时时间。</p> <p>另外，小游戏不支持任何 html 文件，入口文件是 game.js，你需要启动的引擎和游戏脚本都应当在 game.js 中用 require 函数引入，require 函数的用法遵循 node.js 的 require 规范。</p> <p><strong>3. 编译和预览</strong></p> <p>微信开发者工具会自动监听脚本和配置的变动，发生变动时会自动更新，你也可以通过顶部的编译按钮触发重新编译。当你需要在手机上预览小游戏的效果时，需要点击预览按钮来生成二维码，扫码即可进入小游戏。生成二维码的过程实际上是在压缩和上传小游戏包到微信 CDN 上，所以会花费一些时间。</p> <p><strong>4. 详情配置</strong></p> <p>详情配置中包含一些重要的配置选项，包括：</p> <ul> <li>调试基础库：小游戏应该选择 game；</li> <li>ES6 转 ES5：是否将 ES6 脚本转换为 ES5；</li> <li>代码上传时自动压缩：是否压缩脚本；</li> <li>不校验安全域名、TLS 版本以及 HTTPS 证书：当你在本地测试，或通过非正式域名测试时，需要开启这个选项才能够正常访问你的服务器。</li> </ul> <p><strong>五、市场展望</strong></p> <p>最后我们从市场上来看，其实小游戏青睐的 HTML5 技术栈蕴含着巨大的机遇，目前使用 JavaScript 支持跨平台的游戏引擎已经不少。以 Cocos Creator 为例，编写一套游戏代码，可以在编辑器中无缝发布 HTML5 手机页游、PC 页游、手机原生游戏、小游戏。我们可以简单计算一下，根据 12 月初伽马数据的行业报告，国内 2017 年手机原生游戏 1162 亿，PC 端游 648 亿，PC 页游 156 亿，所以按比例简单计算的话，手机页游的市场空间 = 1162 ÷ 648 x 156 = <strong>每年 280 亿人民币</strong>。</p> <p>如果进一步考虑 Flash 宣布 2020 年停更，市面大量 PC 页游都开始转用 HTML5 技术制作，而手机原生上也出现了大量的微端产品，那么如果不考虑此消彼长的制约， HTML5 技术可以支撑的游戏市场规模应该 = 280 亿手机页游 + 156 亿 PC 页游 + 部分手机原生游戏 ≈ <strong>每年 500 亿人民币</strong>。</p> <p>500 亿人民币还只是计算国内的规模。根据国外 Newzoo 在年中的数据，中国游戏产业规模占全球 25%，那么 HTML5 技术理论上可以支撑的全球手机页游、手机原生、PC 页游市场容量上限可达<strong>每年 2000 亿人民币</strong>。</p> <p>所以，掌握 HTML5 技术栈，掌握微信小游戏、QQ 厘米秀、非死book Instant Games 等「手机页游」新平台上的社交游戏开发技术，洞悉这些社交平台上的用户特点、和提出针对性的游戏设计，对于想进入这个领域的游戏开发商而言，是近期迫在眉睫的事。</p> <p>而且目前普遍的观点是，在资本的推动下，手机页游的时间窗口应该只有 1~1.5 年，这里面会有原生游戏大厂布局成功的，也会有新晋的研发商和发行商。而在游戏行业产生这样的风口，平均 5 年左右才能有一次。</p> <p>来自: <a href="/misc/goto?guid=4959012215119055576" id="link_source2">游戏大观</a></p>