社区/文章分享/仅有两名前端开发,联机小游戏一周内上线,如何做到?

仅有两名前端开发,联机小游戏一周内上线,如何做到?

这是一款在一周之内完成立项到上线的防疫知识对战小游戏,你玩过吗?

它在上线四小时内用户数激增 60 倍,获得新华社力荐,开发过程中仅投入 2 个前端开发+1 个美术+1 个策划,这款小游戏里,单机玩法、邀请好友对战、在线匹配对战、排行榜、背景音乐音效等功能一应俱全。

一起来战疫

它为什么会诞生?

年初疫情袭来,团队作为游戏从业者,看到周边的人急需解疫情方方面面的信息,比如正确防控措施、医学科普、相关法律法规……然而,大家只能从电视节目、朋友圈分享文章、社区宣传栏等海量的渠道里汲取信息,这样不仅内容分散,再分享给亲友时也比较生硬。有没有一种方法,快速地帮助大家抗疫知识“划重点”,又生动有趣呢?

思前想后,团队决定通过游戏丰富的表现形式、微信小游戏分享和传播能力,来做一款寓教于乐的小游戏,帮助大家提升对防疫知识的了解,为全面防疫战贡献一份力量。

困难和挑战

这款小游戏需要同时兼具科普价值、易玩性和传播性,经过多次讨论,决定在游戏中策划“好友对战”+“个人测评考场”两种玩法,根据构想,这款游戏既有联机玩法,又有单机玩法。这样的游戏形态固然丰富,互动传播效果固然好,但是在实际开发中,联机玩法对于开发者的技术要求较高,且有很大的工作量。

主要难点如下:
  • 以疫情防控为主题的项目,越早上线对防疫的帮助越大,时间不允许开发周期过长。
  • 联机游戏对于后端能力要求很高,而一般小游戏开发团队,很难有足够的后端开发人力和后端开发经验。
  • 游戏想要丰富的表现形式,音效和背景音乐是必不可少的,需要确保使用的音乐素材没有版权问题。

以上困难,不只是开发这款疫情防控小游戏的困难,也是小游戏开发团队经常面临的共性困难。怎么办呢?

工欲善其事必先利其器。选择好的技术方案,事半功倍。首先,给大家介绍这个小游戏的主要技术方案:

云开发(CloudBase) 是云端一体化的后端云服务产品 ,采用 serverless 架构,免去了移动应用/小游戏构建中繁琐的服务器搭建和运维。同时云开发提供的静态托管、命令行工具 (CLI) 、Flutter SDK 等能力极大的降低了应用开发的门槛。使用云开发可以快速构建完整的小程序/小游戏、H5、Web、移动 App 等应用。

小游戏联机对战引擎(MGOBE) 提供客户端 SDK 和服务端框架,通过接口级接入,使游戏快速拥有高性能联机能力。MGOBE 是一款为各平台小游戏、h5 小游戏提供房间管理、匹配、帧同步、状态同步等后端服务的产品,适用于 MOBA、FPS、休闲对战、回合制等各类联机游戏,让开发者专注于游戏逻辑,免去了对于服务端底层架构和网络通信等问题的顾虑。

正版曲库直通车(AME) 它是基于腾讯音乐娱乐集团(TME)线上背景音乐专用曲库,结合腾讯云存储、内容加速分发等基础能力,为解决内容创作过程中的正版背景音乐素材应用问题设计的 PaaS 产品。在控制台使用域名接入,三步完成了 API 调用,便捷地实现背景音乐素材在小游戏内的流畅播放。

开发实践

用云开发在小游戏中实现世界排行榜云开发 CloudBase,提供云函数、云数据库、云存储、云调用、CDN、日志等一站式基础能力。我们基于云开发的云数据库和云函数,实现小游戏的世界排行榜。

首先,分析排行榜需要展示的信息。在这款答题小游戏中,排行榜按玩家总分展示上榜玩家的昵称、头像、得分、正确率,同时展示当前玩家的排名(若排名在 1000 以内,现实玩家具体名次;若排名在 1000 以外,显示“1000+”)。

具体实现:
  • 定义云开发的云数据库数据结构

在云数据库内,定义一张 User 表,存储玩家信息

定义一张长度为 1000 的 Ranking 表,保持积分从高至低排序

  • 每局游戏结束后,通过云函数进行数据回档。

定义一个云开发的云函数:updateUsers 用于更新用户数据

(1)更新 User 表信息,维持 User 表最新状态

(2)检查玩家当前积分,若积分高于排行榜表内最后一名,则将当前玩家插入排行榜表

  • 查看、刷新排行榜时,通过云函数获取排行榜信息

定义一个云函数:requestRanking 用于获取排行榜数据

为了优化加载速度,在请求参数传入排行榜起始位和查询长度,在客户端刷新排行榜时分批请求排行榜数据

(1)获取 Ranking 表内,通过起始位和查询长度进行切片的玩家 id 列表

(2)通过玩家 id 索引 User 表内玩家信息

用联机对战引擎使小游戏具备联机交互能力小游戏联机对战引擎(MGOBE)提供了客户端 SDK,支持直接通过接口调用的方式为游戏实现联机功能。

  • 房间管理

首先,通过以下步骤将玩家加入同一个房间,玩家进入同一个房间后,即可开始相互通信。

(1)玩家通过客户端 createRoom 接口创建房间,通过转发链接将房间号发送给好友

(2)好友通过客户端游戏链接进入,通过 joinRoom 接口加入房间

  • 在线匹配

玩家客户端进入匹配界面后,通过客户端 matchPlayers 接口发起匹配

调用成功后,Room.onMatch、Room.onCancelMatch 将回调匹配结果。

该接口需要与匹配规则配合使用,因此,匹配超时时间由开发者在匹配规则中定义。开发者需要在控制台上创建匹配,得到匹配 Code 作为该方法的参数 matchCode。

MGOBE 控制台支持灵活的规则配置,可通过脚本语言实现 1v1、1vN、NvM、KvKvK…、等多种匹配玩法。在这款游戏中,我们使用了如下匹配规则:

  • 网络通信

玩家进入房间后,可通过帧同步或状态同步方式开始通信。MGOBE 支持直接通过客户端 SDK 接口,实现帧同步、发送消息到客户端、发送消息到实时服务器。这款答题小游戏中,我们通过调用客户端 SDK 的 sendToGameSvr 接口,实现客户端之间的通信

  • 实时服务器

MGOBE 提供了 node.js 框架,开发者可在框架内编写自定义服务逻辑,实时服务器可通过控制台一键发布部署,自动进行有状态的弹性扩缩:

房间的系列操作会自动触发到自定义服务逻辑。

前端请求到自定义服务逻辑。当玩家加房成功后,可以使用客户端 SDK 中的 sendToGameSvr 方法直接与游戏服务器通信,实现游戏服务端拓展逻辑,如保存玩家数据,游戏状态同步等。

在这款答题小游戏中,客户端和实时服务器框架交互时序如下:

客户端请求列表:

(1) 准备

说明:开始游戏后,每个玩家发送一条 READY 命令给服务端,只有当前玩家会收到服务端广播。服务端收到第一条 READY 命令 1s 后开始游戏,全部玩家会收到服务端广播。

(2) 提交答案

说明:客户端针对一道题目提交答案,需要发送 SUBMIT 命令,并带上作答结果 ans。全部玩家会收到服务端广播。

(3) 查询当前游戏状态

说明:如果客户端需要主动查询游戏状态,可以发送一条 CURRENT 命令给服务端,只有当前玩家会收到服务端广播。

用云开发+正版曲库直通车为小游戏接入带版权的背景音乐

“正版曲库直通车”将整个技术实现链路上的诸多环节简化为一个域名,三个接口。

一个域名:在控制台「域名管理」页面开发者可添加一个或多个经过备案的域名,启动后,系统将会自动配置 CDN 服务,将选购的音乐资源分发至与添加域名关联的资源集群,并在整个链路上进行传输加密。

三个接口:对应曲库三级信息存储架构,分类-歌单-歌曲。

(1)调用“获取分类内容”接口,此接口会返回曲库中的歌单分类信息;

(2)调用“获取分类内容下歌曲列表”接口,获取歌单中的歌曲列表信息,每个歌单分类下提供多首音乐;

(3)调用“获取歌曲播放信息”接口或“获取歌词信息”接口,获取指定歌曲的播放链接或歌词信息

在这款答题小游戏中,我们选择了曲库中的三首合适的背景音乐,通过一个云函数调用上述的“获取歌曲播放信息”接口。当小游戏客户端打开指定的游戏页面时,发起云函数请求,传入当前页面需要播放的音乐 ID,获取歌曲的播放链接,再通过播放链接拉取到版权曲库中的音乐资源。

总结

对于小游戏而言,抓住市场的热点动向,快速研发上线,是小游戏成败的关键之一。借助腾讯云提供的云开发(CloudBase)后端云服务、小游戏联机对战引擎(MGOBE),以及正版曲库直通车,“一起来战疫”这款疫情防护相关小游戏,最终实现了:2 个前端开发+1 个美术+1 个策划,在仅 1 周时间内,完成项目从立项到上线。

“一起来战疫”借助新华社和腾讯健康,官方、专业、及时的信息与题库,提供了优异的游戏交互体验、丰富有趣的游戏玩法,更及时地为大家普及最新的防疫相关知识,承载了高并发的压力,实现了高质量的玩法和性能交付。

产品介绍

云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为开发者提供高可用、自动弹性扩缩的后端云服务,包含计算、存储、托管等 serverless 化能力,可用于云端一体化开发多种端应用(小程序,公众号,Web 应用,Flutter 客户端等),帮助开发者统一构建和管理后端服务和云资源,避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
开通云开发:https://console.cloud.tencent.com/tcb?tdl_anchor=techsite
产品文档:https://cloud.tencent.com/product/tcb?from=12763
技术文档:https://cloudbase.net?from=10004
技术交流加 Q 群:601134960
最新资讯关注微信公众号【腾讯云云开发】