# ts-gameframework

**Repository Path**: myandroid008/ts-gameframework

## Basic Information

- **Project Name**: ts-gameframework
- **Description**: typescript写的快速使用的联机游戏框架, 入口服务器+游戏服务器集群+帧同步游戏框架
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 114
- **Created**: 2022-03-09
- **Last Updated**: 2022-03-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# ts-gameframework

## 介绍
typescript写的快速使用的联机游戏框架, 入口服务器+游戏服务器集群+帧同步游戏框架


## 软件架构

- 入口服务器: 提供游戏服务器列表或调度, 账号登录等功能
- 集群服务器: 游戏服务器都会连接到管理节点
- 游戏服务器: 游戏通讯和逻辑都走这里
- 通讯采用 `tsrpc`
- 服务端的游戏框架内置实现: `Game`, 支持帧同步(游戏逻辑无需放在服务端)
- 帧同步时, 默认开启`随机要求客户端同步状态给服务端`的功能, 方便大大缩短 中途加入/断线重连 客户端的追帧时间

*集群服务器暂时和入口服务放在一起*

## 安装教程

暂时没提供复用性安装方式,只能源码拷贝,直接使用

## 设计要求

- 状态数据分离, 如经典的ECS设计, 方便状态同步,或者帧同步中用作中间状态缓存
- 输入操作分离: 方便接入帧同步

其实只要是联机游戏, 就需要做到上面说的设计, 只是这里为了对接本框架而提出的设计原则

## 启动帧同步demo

- 用vscode打开各端项目: `gate`, `backend`, `frontend`, 执行 `npm install`
- 配置 `gate` 和 `backend` 目录 `gf.*.config.json` 里的资源 (主要是连接的redis需要配置一下)
- 按顺序执行各端的npm脚本: `gate`/`dev` => `backend`/`dev`
- 浏览vue实现的例子: `frontend`/`devVue` (注意用移动端H5的方式浏览)
![示例图片](Demo1.gif)
- 浏览creator3.4.1的例子 (导入后直接预览)
![示例图片](Demo2.gif)


## 帧同步游戏对接要点(具体的参考demo)

1. 配置各端的 `gf配置文件` ,redis服务器和各服务器的ip/port
2. 设计独立的数据存储方式,如ECS
3. 游戏服务端: 根据使用场景,实例化游戏对象 `Game` ,然后调用`startGame()` (默认开启功能:帧同步+随机要求客户端同步状态给服务端)
4. 客户端: 主要实现:
    - `AfterFrames`: 追帧消息,客户端根据消息中的状态数据+后续帧,来复原游戏
    - `SyncFrame`: 服务端帧同步消息,默认每秒60帧(即每秒60条消息)
    - `InpFrame`: 客户端的输入帧消息,建议统一收集,定时发送(如30ms发送一批), 将在服务端收到的下一帧生效
    - [`RequireSyncState`]: [可选,默认开启] 服务端要求客户端将本帧的游戏数据收集上来,使用`SyncState`消息发送给服务端
    - [`SyncState`]: [可选,默认开启] 客户端将游戏数据状态化,发送给服务端,用于后续追帧时能从这个状态+后续帧来快速复原游戏
5. 入口服务器实现用户登录 (参考例子ApiLoginToGame)