周桂华：我的小游戏开发之路（上）

8 月 17 日，“小程序·云开发”系列沙龙（小游戏专场）圆满落幕。本期沙龙云+社区携手微信 & 云开发官方团队为大家揭秘爆款微信小游戏背后的技术，全面讲解小程序·云开发、实时数据库库及小游戏联机对战引擎，助力小游戏开发。下面是周桂华老师从个人学习路径构建出发，阐述一个非游戏开发者是如何快速学习微信小游戏开发并同时驱动团队对接小游戏业务的。

分享中，花叔用 2W1H 来解释要讲的内容，介绍了小游戏是什么，团队为什么要做小游戏以及自己是怎么学习开发小游戏的。此外，还讲了一下自己的感悟。

演讲开始前，花叔用手机给大家表演了一个猜数字的魔术游戏，现场请到一位女听众，由她说出数字 3，花叔把预先盖在桌面的手机翻起来，屏幕显示的正是 3，大家惊讶不已，花叔说当年他就是用这个魔术追到现在的老婆的，接着他开始以 2w1h 的方式开始演讲。

第一个 W：小游戏是什么？

我觉得有必要说说小游戏是什么？在微信做第三方开发的时候有两类：

• 基于行业通用网页技术框架的 H5，比如朋友圈中传播的有意思的页面，以及公众号文章，比如我的公众号里的文章。

• 基于微信私有技术框架的普通小程序以及小游戏。

小程序是 2017 年 1 月份公布的，同一年的年底微信公布了小游戏。其实这两个都基于微信的技术框架，有微信私有的一些技术特性。那么我们理解的 H5 和小程序有什么区别呢：

区别很多，今天重点提一下其中三个：

• 首先，普通小程序、小游戏不像普通 h5 那样能很好的跨平台；

• 其次，小游戏不像小程序以及内嵌 h5 那样支持普通的微信支付，但却支持虚拟支付（基于米大师）；

• 最重要的一个区别在于，在微信里的技术载体中，目前小游戏是唯一一个真正做到关系链相关功能的载体。

而恰好最近官方发布了一个关系链升级的特性，今天我稍微介绍一下关系链数据在小游戏中的调用逻辑，也顺带讲一次这次升级所带来的的影响。

旧版关系链数据调用逻辑

此前，官方为了保护用户关系链数据，在提供主域的情况下，会在前端额外提供一个封闭式的子域（也称开放数据域），主域通过 postMessage 的方式把信息丢给子域，而子域需要暴露关系链的数据时，比如好友的排行榜，它是通过一个封闭式的 sharecanvas 供主域绘制。子域不可能发出第三方请求，你的游戏中的游戏数据以及关系链数据都是存在微信给你定义好的托管服务器里。这是以前的那一套，有点绕。现在这套升级了，会怎样呢？新的那一套更绕了。

新版关系链数据调用逻辑

新的逻辑里会额外再提供了两个服务器，一个是 JSserver 服务器；另一个，用于存储玩家间交互数据的互动型的托管数据服务器，通过这两个可以实现什么效果呢？我做了一个 demo，这是我的好友排行榜，我给我老婆点一个赞，我老婆手机的排行榜就拿到一个赞了，玩过小程序子域开发的同学知道以前是不能做到的。

现场演示了一个关于花叔排行榜以及花叔老婆排行榜点赞 demo

接下来，我简单说说这里面的技术逻辑。首先是 JSserver 服务器，它干的事情是校验用户的数据，同时他能把数据存到普通的托管数据里，即老的那一套托管数据。在存的过程中，他又可以把数据又存到新的互动型数据库里了。

关系链数据的调用是小游戏里比较特别的一些能力，就先讲到这里。

第二个 W：为什么要做小游戏？

我们为什么要做小游戏呢？大家做小游戏的目的是什么？很多创业团队做小游戏可能是为了赚钱，有或者为了构造自己的流量矩阵。而对于我们来说，其实做小游戏不是为了赚钱。我们是一个很奇怪的团队，跟普通的游戏开发团队不一样，以往我们做的最特别的事情是开发一些在朋友圈或好友群传播的 H5 页面，里面会做一些有意思互动。比如说吴亦凡的案例，其实就是在你觉得自己在看某个新闻的时候，他突然动了，同时说要给你打电话解释。这会让你觉得有意思，就会主动传播事件，而 H5 的最后的导向一款叫 CF 的游戏，目的是推广这款游戏。这是我们团队以往大多时候做的事情。

从技术来看的话，团队做的是互动营销技术，我们的技术载体是视频以及 H5。技术栈是网页开发技术，赛道是双平台 H5，接着小游戏来了。我们认为游戏也是一种互动形式。

我们在小游戏发布之前已经开始接触这个领域，这时候团队的技术栈从原来的一个变成三个了。我们做小游戏的目的不是为了广告，不是为了内购，不是为了 ARPU，我们目的是为游戏创造游戏。对我们来讲，我们的指标更重要的是客户端游戏品牌曝光，预约转化，新增转化。

所以，2017 年 12 月小游戏首次发布的时候，前 17 款里的游戏，我们提供了 2 个，一个是拳王，那是打地鼠的，另一个是《纪念碑谷 2》试玩版小游戏。这两个游戏是偏程序开发思维的引擎做的。

刚接触到游戏领域时，我们觉得还蛮好玩的，越是接下来做了类似《红警》小游戏、权力的游戏小游戏等策略型的游戏，以及休闲类型的叠塔的游戏。

接下来玩的越来越大了，我们为很多其他游戏业务做了小游戏：

而这些小游戏最终都会引导用户去预约或下载客户端游戏，大部分的目的都是这样。

反观这一路，很多案例以前从来没做过，这一路我带着一群小伙伴，对一个新的领域进行尝试，与此同时，自身要先学会，所以接下来会说说我自己是怎么学的。

最后一个 H：如何学习开发小游戏？

今天分享的另一个主要内容是关于我怎么去学小游戏开发的，可能也不算太深入，所以大家有疑问的话，可以随时打断我。

我是怎么学的？实不相瞒，我是重构工程师，以前在腾讯比较容易被知晓，但在别的公司不容易被知晓，到目前为止还是属于设计，我本身是个设计师，所以我学习的方式很粗暴。

2017 年，我建了公众号，当时小程序出来，一开始只是为了学小程序，所以我做了一个小程序，这个小程序是关于思维导图的工具，初衷是我上班的时候经常要理思维导图，如果要在手机上做这个事情，会很麻烦，而其他移动端的思维导图工具大多是收费的，我就想自己做一个，我就把它做出来了，所以积累了不少的微信开发经验。

突然，小游戏来了，我就想切过去研究一下。但这时候会面临一个问题：我怎么开始呢？

我这人很直接，会先定一个很死的目标。这时候我定的目标就是“一定要单独做一个游戏出来”，至于具体是什么方式、什么方法，我去查。然后我就开始了，先自己画交互，把元素之类的都画好。我自己是个设计师，但我的设计能力是不行的，所以我选的是一种手绘风，灵魂画师的那种风格。

由于个人是个重构工程师，所以对 JS 有一定的了解，但以前的思维都是从上往下的编程思维，还没有对 mvvm 或面向对象的设计模式研究太多。于是我就选一个没有那么多约束的框架去做就行了，我选了 Createjs 当引擎，因为它也没有太多的套件，它像用一个 JS 库一样。

当时也没细究它跟别的引擎有多大区别，定了就定了，就基于这个去学。而后台呢？当时腾讯云为小程序做了一套封装好的后端方案（一台业务服务器一台会话服务器那套），当时这套方案其实是兼容小游戏的，我就直接用了。

接下来拼命学，拼命试，拼命做 demo，最后做出了我这辈子的第一个游戏。其实它是早期吃鸡类小游戏中的一块，每消灭一个玩家就会有一个另一个进来，我当时虽然不是太懂游戏开发，但还是给他做了一些特效，比如说激光炮，以及带 AOE 效果的技能效果。

你们猜一下实时对战方案是什么？讲一个故事，很搞笑。前段时间有一个网友，像你们一样，我们都在一个开发群里，他突然有一天看到我了，他就加了，他机动的说：“原来你是花叔，我看你的游戏做实时对战，好厉害，这两年我一直在研究实时对战的技术，我做了很多 demo，都觉得没你这个做的好”他给我看一下，我说还不错，他接着追问我当时是怎么做得这么流畅。我说：AI。他懵了，他不知道怎么接下去。

所以，我是一个入门者，但我要实现类似吃鸡的游戏，可以从不同的方式切入。我以前做了个机器人漏记，简单的对战模式，让它自己跑。这是个让我有点感触的小故事。

其实做这个游戏的另一个最大的感触是：做游戏像在创造一个世界。像《坦克大战》的时候，里面有剧情，对技能有故事描述，我当时像写小说一样去构思故事。比如说我结合五行中的风火雷给游戏的技能创作了一些故事，小游戏自己有一个内置的社区，我就把这些故事放在那里。

可以说，我很享受这个过程，非常的开心。至于代码，不说特别多，我用的是 Createjs 的框架。根据官方的文档，只要稍微改一下，Createjs 就能用在小游戏上了。具体就是把官方把三个 JS 都暴露一下，做一个聚合 js，分别引用就搞定了。

不过当我做完这个游戏之后，我问我们组里面比较有游戏开发经验的同事，我问他你觉得我这样做行不行？他说：“你好傻，为什么我们做游戏要这样做呢？你这样做很累，每一句代码，每一个按钮，每一个效果，你都是用代码写的，你这样不行吧”。

他这么一说，我也觉得有道理，因为你单纯用 createjs 去做的话，很多 UI 层面的事情都需要一句句代码去实现。所以它虽然适合初学者去玩的，但也面临一个问题：偏程序开发的形式来开发游戏太累了，怎么办？