# 帧同步(开发中)

# 一、介绍

该模块为 MOGS-SDK 的子模块,需要与匹配系统配合使用,在匹配完成后,创建帧同步房间来同步帧信息。

在安装完毕 MOGS-TOOLS 和 MOGS-SDK 之后(安装流程请参照快速开始),用以下方法引入帧同步系统,就可以使用帧同步系统的接口。

import { frameSyncSystem } from "@timi/mogs-sdk";
1

# 二、使用

1. 获取连接token

匹配完成后,得到帧同步token的信息

匹配系统的用法 (opens new window)

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. 连接帧同步服务

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

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

5. 发送、监听广播信息

// 发送广播
frameSyncSystem.broadcast(data);

// 监听广播信息
frameSyncSystem.onBroadcast((data) => {
  console.log(data);
});
1
2
3
4
5
6
7

6. 断开链接、结束游戏

// 断开连接,退出房间
frameSyncSystem.disconnect();

// 结束游戏
frameSyncSystem.end();
1
2
3
4
5

7. 保存、读取游戏数据

// 存储游戏数据
frameSyncSystem.saveGameData(data);

// 读取游戏数据
frameSyncSystem.loadGameData();
1
2
3
4
5

8. 获取延迟


frameSyncSystem.getPing()

1
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

其中 lagFrameNum 为滞后的帧的数量,当该数值较大的时候,开发者可以通过加快调用popframe的频率来进行追帧

TIP

更多帧同步模块的api请参考帧同步模块 (opens new window)