OceaBase开发者大会落地上海!4月20日共同探索数据库前沿趋势!报名戳 了解详情
写点什么

借助云能力,小游戏开发过程是如何升级的?

  • 2019-10-31
  • 本文字数:5300 字

    阅读完需:约 17 分钟

借助云能力,小游戏开发过程是如何升级的?

9 月 21 日,云+社区技术沙龙“小程序·云开发”北京站圆满落幕。本期沙龙腾讯云联合猫眼、即速应用、白鹭引擎等企业,将从小程序·云开发后台技术、云开发实时数据推送实践、云开发 AI 智能客服实践等方面揭秘云开发应用实践,带来更多技术实战分享。本文是张宇老师关于如何使用白鹭引擎开发和实时数据推送能力更好的为小程序服务的内容分享。


本文分三个部分:


第一部分认识白鹭引擎


第二部分实时数据推送能力实战项目


第三部分是小游戏+云能力

认识白鹭引擎


白鹭引擎是最早的游戏引擎,如果做 H5 游戏或者微信小游戏的朋友都认识我们,我们不光可以做 H5 游戏还可以一键发布到 iOS、安卓上的云上应用,所以是跨平台的游戏引擎。我们有非常完整的开发工作流,比如说龙骨动画编辑器还有 3D 游戏编辑器,这些都可以对开发效率有很大的提升。



这些是用引擎做的比较出名的小游戏,比如说早期的 2014 年的“围住神经猫”,当时微信刚刚推出了转发分享的功能。南京两个开发者用一天半的时间做出这个游戏,通过分享功能一下就火了。大家多使用腾讯和微信推出的新功能,可能对大家的开发有很大的帮助。现在引擎里已经集成了云开发能力,在新建项目的时候已经默认开启了这个功能,就不需要手动配置了,就更方便了。


实时数据推送能力实战项目


做游戏肯定要涉及到服务器和游戏端数据交互,传统的方式一般分为短连接和长连接。


左边轮询方式是短连接里常见的方式,游戏端向服务器发送一个消息,服务器返回一个消息。游戏端再发一个消息,服务器再返回一个消息,这样一问一答。这种模式下,服务端是不能主动地给游戏端推送消息的,必须游戏先发请求服务端才能返回消息。一般对数据实时性要求不高的游戏一般都用短连接的方式,因为对服务器的压力比较小。比如之前常玩的网页游戏“开心农场”都是短连接,你点一块田地,游戏端会向服务器发送一个收粮食的请求,服务端计算以后告诉前端收 100 个粮食,然后播放一段收粮食的动画,最后把这个粮食给加上,这就是一个短连接的方式。


还有一种是长连接的方式,比如说 Websockets,这是 H5 里面比较常用的长连接方式。长连接的方式是游戏端和服务端一直保持着同时状态,游戏随时可以给服务器发消息,服务器也可以随时给游戏发消息,这个对数据实时性得到保障。比如说对战游戏“王者荣耀”对实时性要求比较高都用长连接,两人互相攻击如果不是用长连接就产生延迟,我先打你反而我先死了就出现了问题,这种实时性比较高的都使用长连接的方式。


这是数据实时推送能力,在使用的时候可以把它理解成新的方式。我们使用手机的时候每天都会收到各种各样推送的消息,微信、钉钉等等。



实时推送的消息跟手机里的消息推送是很类似的,它的工作流程是在服务器和数据库里面我们会存着各种各样的数据,比如说金币、生命值、各种道具。在进入游戏的时候,游戏端先向服务器发一个消息说我要先监听哪些数据,然后这个数据只要一发生改变,在游戏端就会通过推送接收到改变后的数据。举个例子,比如说游戏里面有一个排行榜,里面储存的是前 10 名玩家的分数,第一名 1000 分,第十名 100 分。现在有 100 人玩这个游戏,他们进游戏的时候都会主动告诉服务端说要监听游戏排行榜。然后有一个玩家玩这个游戏,他得了 100 分,游戏会通过调用云函数把玩家的分数发送给服务端。服务端收到分数以后一计算,他比原来第十名分高了,这个人就成为了新的第十名。这时候后端服务就会把数据库里的排行榜改变掉,改变之后就可以通过数据推送把新的排行榜推送给玩家,这就是整个数据推送的流程。


排行榜怎么做呢?



右边是游戏常见的排行榜,包含几个信息:一个是玩家的名字,一个是来自哪个区,哪个家族,最后是战斗力分数,通过战斗力分数实现排行榜。


制作这样一个排行榜使用数据推送能力的话,分为四步就可以实现。


第一步骤是在数据库里创建排行榜数据,存一些信息。游戏端监听这个数据的变化;


第二步在游戏端通过调用云函数,把玩家的战斗力分数、玩家信息发送给服务端;


第三步是服务端接收到发送的数据以后再重新计算排行榜,储存到数据库里;


第四步游戏端通过监听排行榜,收到服务端推送来的新的榜单,改变游戏里面的内容就 OK 了。


具体来说一下这四步怎么来做。


1.数据库里创建排行榜数据。

现在云能力已经跟微信深度绑定,打开微信开发者工具在左上方有一个云开发按钮,点击以后就可以看到云开发控制台。点击数据库,进入数据库面板,看到左、中、右三个区域。最左边有集合名称,点绿色加号创建一个叫 rank 的名称,可以集合各种的排行榜;中间有一个添加记录,添加一个 top10 的 id 记录,就可以存放前 10 名玩家的数据。在游戏里监听的就是这个 rank 和 top10;最右边有一个 list 的字段,这是一个数组,里面是前 10 名玩家具体的数据。我们可以看到每条数据里包含着 family、name、score(分数),数据就在数据库里创建好了。


2.游戏端通过调用云函数,把玩家分数发送给服务端。

通过调用云函数实现的就是 WX.cloud.callfunction。其中 name 字段就是调用云函数的名字,这个是调用的是 addScore 的云函数,addScore 后面会说到它具体功能。下面是 data 字段,发送的是玩家数据,包括在数据库里看到 family,来自哪个区、哪个家族,一个是 name,玩家名字,然后 score 就是分数,这样通过函数把玩家数据发送给服务端了,是很简单的。


3.云函数 addScore 的具体功能。

这里简单地说一下,它实际上是在服务端运行的 js 脚本,可以理解为是 node 服务器运行的小功能,每个云函数就是小的 node js 的项目。在游戏端通过调用 addScore 以后,在服务端会运行这段代码。这段代码实现的几个功能,第一个是把 top10 的数据先拿出来。通过


"await db.collection(rank).doc(top10).get"的方法,其中 rank 和 top10 就是在数据目录里创建的数据。然后调用数据以后取出 list(数组),里面放的前 10 名玩家具体数据。然后再通过 push 方法把 newData 放到数组里。newData 就是刚才在游戏端调用云函数发送过来的数据,就是 family、name、score 这三个数据。然后再通过 sort 的方法,按照 score(分数)从大到小的方式把 11 条数据进行排序。原来有 10 条又放了一条现在有 11 条。然后通过 splice 的方法取出前 10,最后通过 await 方法更新 list,这样数据就更新掉了。这就是云函数 addScore 的具体功能。


addScore 主要实现了三个功能:


(1)接收到游戏端发的 newData 数据


(2)对排行榜重新进行排序


(3)分析把 list 重新更新到服务端


4.游戏端监听排行榜数据变化。

通过 watch 方法监听 rank 里面的 top10。这时候服务排行榜的数据已改变,就通过 onChang 的方法接收到服务端推送过来的新的榜单,然后在游戏里面更新榜单就 OK 了。这是制作排行榜的具体流程。



在做微信小程序比较多,微信小程序里有一个单向数据流的概念,在前端框架里都会有这个概念,比如说 Actions、View,State 都会有这个概念,这是一个简单地框架示意图,前端 View 通过一个行为 Actions,然后改变数据的状态 State,根据改变后的数再据刷新页面,这是单向数据流的概念。



我们在做游戏的时候如果使用的是数据推送的话,这跟单向数据流的概念非常类似,可以把游戏端当做 View,云函数当做 Actions,数据库当成 State。在游戏端通过调用云函数改变数据库的数据,然后再通过推送把数据发送给游戏端,游戏端来改变数据内容。这样就形成了循环,我们在游戏的时候可以使用数据驱动的思想来制作游戏。


比如要做一个卡牌游戏,一般都有游客观看的功能,可以做一个出牌记录。传统的的方式做记录都是“轮询”方式,每隔一两秒钟向服务端发一个请求,问一下服务端有没有人出牌。比如服务端告诉第三个人出一张小王,你收到消息以后就把牌给第三人加上,这种方式一般是基于逻辑的制作方式,就是服务器告诉什么事情就做什么事情。


现在使用单向数据流的概念,就是用数据驱动的概念做游戏。通过实时数据来做这个功能比较简单的,使用数据驱动的概念制作游戏,通过实时数据来做是比较简单地。


首先在数据库里创建一个 Cards 的数据,里面存放四个人的出牌记录,游戏端然后通过 Watch 监听 Cards 数据变化。只要你收到推送的消息,比如说有人出牌了改变了出牌记录,这时候不需要知道谁出牌了,只要知道有人出牌就 OK,把四个人的牌全清掉,按照出牌记录全部摆一遍就 OK 了。利用数据驱动的思想使用实时数据流推送的功能制作这种游戏还是比较简单的。

小游戏+云能力


营销类小游戏里面最常用的功能是抽奖,很多时候抽奖都是假的,只能抽小奖,然后把它记录在小游戏本地。我们跟一些开发者聊过,很多时候不是不想做抽奖,由于成本原因或者其他一些原因没有后端服务器和后端工程师配合,没有后端是肯定做不了抽奖的。我们现在有了云能力就可以做这种功能了,前端通过调用云函数就可以实现后端常见的功能,所以开发用户体验会好很多。使用实时数据推送能力给小游戏会带来很多玩法,比如说可以增加互动性的玩法。


我们一个开发者给餐厅做了一个小游戏,顾客在等餐的时候可以通过扫码玩游戏,钓鱼、挖金矿、打地鼠,他不能一个人玩必须几个人合作完成,到了多少分给一个十块钱代金券。餐厅非常欢迎这种游戏,我们使用实时数据推送就可以做这种互动性比较强的玩法。


另外还有一些实时性的玩法,比如说营销类游戏或者其他游戏都会鼓励玩家分享,转发完之后就可以继续玩这个游戏,这时候屏幕上会跳出你的好友谁谁谁在玩这个游戏,可以增加金币,这时候玩家的感觉会好,这是使用实时性推送的实时性的玩法。所以充分利用好云能力带来的帮助,可以给小游戏带来新的玩法和新的功能。


云能力对于开发过程会带来很大的改变。


1.不需要服务器

它没有服务器意味不需要域名备案,现在域名备案要实名认证,还要牌照,有时候两三个星期都走不了这个过程,现在利用云能力就变得简单了;

2.不需要后端

如果做 H5 游戏或者微信小游戏做的比较火赚了很多钱,一般都会遇到被黑客攻击,有的是竞争对手眼红导致的,包括我们网站都被攻击,花了很多钱才搞定了。现在使用云能力不需要担心,晚上可以踏踏实实睡觉不担心被老板叫醒了。因为没有服务器,黑客怎么攻击呢?黑客要攻击你的话得把腾讯云搞挂了,这个太难了。这是使用云能力潜在的特别好的好处。


另外对于开发来讲,它用的云能力没有服务器是不需要后端工程师,可以减少人员成本开支;没有服务器也不需要再配服务器,这个成本也会省下来;不需要前后端联调,做游戏都需要前后端联调的。开发初期前后端工程师坐在一块儿对接口、支付接口、反馈数据,定好以后前后端再各自开发自己的功能。前端因为后端功能没有做好,一般前端会返回一些数据,这样可以优化流程。前端功能都做好以后,两人就对接口进行联调,这时候会出现各种各样的问题,最常见的是数据格式不统一,比如说前端是一个对象,后面返回一个数组,甚至接口都可能不一致,比如说前端要 6 个数据,后端只返回来 4 个数据,另外两个在另外一个接口里。



我们使用云能力就没有麻烦了,因为没有后端工程师,没有联调阶段了,开发者在前端直接调用云函数从服务器拿到最终的数据,也没有这个过程了,所以周期也会少一些


另外在做游戏的时候都区分开发环境和生产环境,开发环境是在公司内部署一个服务器,在上面开发功能然后进行前后端联调,功能做好以后再把代码部署到线上。在上线的过程中也是各种各样的问题。在上线过程中最常见的是配置端有问题了,游戏端的代码也要改,最起码线上的生产环境和开发环境服务器地址不一致。如果用到云开发这个过程是比较简单,因为区分开发和生产环节利用小游戏的 appID 就可以区分了,这个 ID 是开发环境,那个 ID 是生产环境,改一下就 OK 了。游戏端的代码都是不需要修改,这个过程也会变得很简单。


刚才我们看到如果使用云能力的话还是需要前端写代码来实现功能的。白鹭引擎现在做的事情是把常见的组件封装起来,有聊天室组件、排行榜组件、公会组件等等。这些组件包括基本的 UI 展示、游戏端的逻辑、服务端云函数的代码逻辑,这些都写好了,开发者只需要把界面改成自己的就可以了,可以减少开发工作量,这是白鹭引擎跟云结合的发展规划。


Q:关于白鹭引擎有三个相关的问题请教一下。白鹭引擎对数据实时分送做了哪些工作?第二,数据实时推送如果失败了的话,比如说断网 3 分钟以上白鹭引擎如何重新进行监听的?第三白鹭引擎如何实现单向数据流,有什么好的方案?


A:我们刚开始做这个事情,第一步封装就是聊天室的,要实现一个周边的功能比如说给客户一些公会、服务器登录这些,我们会先做一下之后会再推出。断网的话,这个就是自己的逻辑。比如说你收到消息定时再发一遍。


单向数据流是做游戏的思路不是具体的方案,可以用数据驱动的思想来做,有两种,传统的是基于逻辑的思想,这是前端开发的比较火的思想,它是思想并不是具体的方案。封装组件的时候比如说收到消息以后,内容就刷新一下就 OK,重新定位一下。


作者介绍:


张宇,白鹭科技高级产品经理,多年页游及 HTML5 游戏开发经验。负责白鹭引擎研发,主导开发了 Egret Launcher 等 IDE 工具。


本文转载自公众号云加社区(ID:QcloudCommunity)。


原文链接:


https://mp.weixin.qq.com/s/kXUVx0Xeo-Yi_mh1nhPojQ


2019-10-31 10:51602

评论

发布
暂无评论
发现更多内容

谈谈控制感(13):为什么是旁观者清?

史方远

读书笔记 个人成长 心理学 随笔杂谈

程序员的晚餐 | 6 月 2 日 红烧鸡爪的味道

清远

美食

Java 最新的JDK14.0.1调试成功

程李文华

centos7分区命令parted的用法(大于2T)

唯爱

LeetCode | 2. Reverse Integer 整数反转

Puran

Python C# 算法 LeetCode arts

一文入门JVM虚拟机

Simon郎

深入理解JVM

分布式事务 - 理论模型

Java收录阁

分布式事务

LeetCode | 1. Two Sum 两数之和

Puran

Python C# 算法 LeetCode arts

【vue-openlayers】弹窗

德育处主任

html Vue 大前端 openlayers ol

坚持ARTS-week2

王钰淇

ARTS 打卡计划

SpringBatch系列入门之Tasklet

稻草鸟人

spring SpringBatch 批处理

工作的创新能力

punkboy

产品 重新理解创业 产品经理 创新突破 创新

什么时候去面试

escray

ARTS打卡week#1

对方正在输入…

ARTS 打卡计划

带你学够浪:Go语言基础系列 - 8分钟学控制流语句

程序员柠檬

后台开发 Go 语言

深入理解JVM内存管理 - 堆和栈

SkyeDance

堆栈 深入理解JVM VM参数

洞悉MySQL底层架构:游走在缓冲与磁盘之间

arthinking

MySQL 数据库 MVCC

【Sentry搭建之 docker-compose】

卓丁

DevOps Docker-compose CI/CD sentry

程序员都惧怕的故障域

松花皮蛋me

Java 问题处理

游戏夜读 | 如何管理公司?

game1night

【大厂面试02期】Redis过期key是怎么样清理的?

NotFound9

Java 数据库 redis 架构 后端

同一浏览器只允许登录一个账号

AR7

Vue 大前端

【译】5 个你需要知道的 JavaScript 小技巧

零和幺

Java 大前端 技巧

ARTS 01 - 技术人的理想主义

jerry.mei

算法 Vue 练习 ARTS 打卡计划 ARTS活动

Java 走过的创新25年

田晓旭

Java25周年

路漫漫其修远兮

无心水

微信小程序开发 | 如何在小程序中使用自定义 icon 图标

彭宏豪95

微信小程序 学习 编程 大前端 IT

初识 LeetCode

Puran

LeetCode arts

架构演变之路:为何要搞微服务架构?

arthinking

Kubernetes 微服务 dubbo SpringCloud

有的线程它死了,于是它变成一道面试题。

why技术

源码分析 面试 jdk源码 线程池

重学 Java 设计模式:实战适配器模式

小傅哥

设计模式 小傅哥 重构 代码质量 代码坏味道

借助云能力,小游戏开发过程是如何升级的?_服务革新_张宇_InfoQ精选文章