纯前端如何利用帧同步做一款联机游戏?

纯前端如何利用帧同步做一款联机游戏?

一、游戏帧同步

1.简介
·现代多人游戏中,多个客户端之间的通讯大多以同步多方状态为主要目标,为了实现这一目标,主要有两个技术方向:状态同步、帧同步。
·状态同步的思想中不同玩家屏幕上的一致性的表现并不是重要指标,只要每次操作的结果相同即可。所以状态同步对网络延迟的要求并不高。
·帧同步主要依赖客户端的能力,服务器仅仅是做一个转发,甚至客户端可以无需服务器,通过P2P方式来转发数据。由于只是转发游戏的行为,所以广播的数据量比状态同步要小很多。
本文将以帧同步技术为主来介绍如何实现一款联机游戏。

2.小游戏案例
·本次我们在《街霸小游戏》中利用腾讯云的游戏联机对战引擎实现了玩家之间的PVP玩法。
在这里插入图片描述
感兴趣的同学可以扫码体验:
在这里插入图片描述

二、游戏联机对战引擎:Mgobe

1.引擎简介
·Mgobe是由腾讯云提供的游戏联机对战引擎,可以为游戏提供房间管理、在线匹配、帧同步、状态同步等网络通信服务,帮助开发者快速搭建多人交互游戏。
·Mgobe可以让我们在没有后台开发人力的情况下也能实现游戏的帧同步。
Unity Editor嵌入了MGOBE,在Unity Editor 2019.1.9及以上版本,各位开发者可以通过服务面板,一键开通腾讯云服务MGOBE。
在这里插入图片描述
在这里插入图片描述
·官网:https://cloud.tencent.com/product/mgobe
2.开发语言
·Mgobe支持使用 JavaScript 或 TypeScript 来进行前端开发。
3.支持平台
·Mgobe目前支持:微信小游戏、QQ小游戏、百度小游戏、OPPO小游戏、vivo小游戏、字节小游戏;H5小游戏和手游。

三、纯前端打造帧同步实现联机对战

·接下来会从前端的角度来一步一步讲解使用Mgobe的方法,借助Mgobe我们可以不用知晓后台和运维知识,就可以构建起一套性能优越的帧同步游戏。
1.控制台配置
·首先我们需要在Mgobe的控制台中创建游戏实例,以获取游戏ID、游戏Key和域名等信息,我们会在初始化SDK时使用到游戏ID和游戏Key。
在这里插入图片描述
·出于安全考虑,微信小游戏会限制请求域名,所有的 HTTPS、WebSocket、上传、下载请求域名都需要在微信公众平台进行配置。因此,在正式接入游戏联机对战引擎 SDK 前,还需要开发者在微信公众平台配置合法域名。
·需要配置的域名包含一条 request 域名和两条 socket 域名记录,配置如下:
// request 域名
report.wxlagame.com

// socket 域名
xxx.wxlagame.com
xxx.wxlagame.com:5443
2.SDK
2.1.下载

·SDK下载地址:https://cloud.tencent.com/document/product/1038/33406
2.2.引入SDK
·SDK文件包含 MGOBE.js 和 MGOBE.d.ts,即源代码文件和定义文件。在 MGOBE.js 中,SDK接口被全局注入到 window 对象下。因此,只需要在使用SDK接口之前执行 MGOBE.js 文件即可。
·以微信为例,只需将 MGOBE.js 放到项目下任意位置,在 game.js 中 import SDK 文件后即可使用 MGOBE 的方法。当然也可

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值