# 帧同步(开发中)
# 一、介绍
该模块为 MOGS-SDK 的子模块,需要与匹配系统配合使用,在匹配完成后,创建帧同步房间来同步帧信息。
在安装完毕 MOGS-TOOLS 和 MOGS-SDK 之后(安装流程请参照快速开始),用以下方法引入帧同步系统,就可以使用帧同步系统的接口。
import { frameSyncSystem } from "@timi/mogs-sdk";
1
# 二、使用
1. 获取连接token
匹配完成后,得到帧同步token的信息
import { matchSystem } from "@timi/mogs-sdk";
matchSystem.onMatchConfirmed(async (res) => {
if(!res.confirmPlayer && !res.isOvertime && res.lockStepTokenInfo) {
const lockStepTokenInfo = res.lockStepTokenInfo
// res.lockStepTokenInfo即包含了连接帧同步需要的信息
}
})
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
2. 连接帧同步服务
frameSyncSystem
提供了游戏开始监听 frameSyncSystem.onGameStart
和 连接游戏 frameSyncSystem.connect
的方法。
以下为监听用户信息更新例子:
// 监听游戏开始
frameSyncSystem.onGameStart((e) => {
console.log(e);
});
// 加入房间
await frameSyncSystem.connect({
token: lockStepTokenInfo.token,
userId: lockStepTokenInfo.userId,
});
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
3. 准备开始游戏
当所有人都准备了,帧同步服务才正式开始
frameSyncSystem.ready();
1
4. 发送、读取数据帧
// 发送
await frameSyncSystem.uploadFrame(data);
// 获取数据帧
setInterval(() => {
for (let i = 0; i < 10; i++) {
const data = this.popFrame();
if (!data) {
break;
}
}
}, 20);
function popFrame() {
const data = frameSyncSystem.popFrame();
if (data && data.dataList.length) {
return data;
}
return null;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
5. 发送、监听广播信息
// 发送广播
frameSyncSystem.broadcast(data);
// 监听广播信息
frameSyncSystem.onBroadcast((data) => {
console.log(data);
});
1
2
3
4
5
6
7
2
3
4
5
6
7
6. 断开链接、结束游戏
// 断开连接,退出房间
frameSyncSystem.disconnect();
// 结束游戏
frameSyncSystem.end();
1
2
3
4
5
2
3
4
5
7. 保存、读取游戏数据
// 存储游戏数据
frameSyncSystem.saveGameData(data);
// 读取游戏数据
frameSyncSystem.loadGameData();
1
2
3
4
5
2
3
4
5
8. 获取延迟
frameSyncSystem.getPing()
1
2
3
2
3
# 三 特性功能
1. 补帧
该系统在内部自动完成补帧功能,不需要开发者调用
2. 追帧
帧的数据结构如下
interface Frame {
frameID: number;
tickMS: number;
lagFrameNum?: number;
timeStamp?: number;
dataList: RelayData[];
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
其中 lagFrameNum 为滞后的帧的数量,当该数值较大的时候,开发者可以通过加快调用popframe的频率来进行追帧
TIP
更多帧同步模块的api请参考帧同步模块 (opens new window)